Download WebDesign101

Introduction
• Where do
I start?
• Web designing is the art of
combining technical and aesthetic
aspects in a balanced, package.
• The main objective of a website is
to deliver information to the viewers
in the most efficient way possible.
Web Hosting
• Things to
look for in
a web
host
• First, a web host needs to be
established. There are a variety of
free and paid web hosts on the
internet available for personal and
business use.
• Finding a web host out of the
millions available may be a bit
difficult. Be patient and find one
that fits your budget and technical
needs.
Web Domains
• Important
features
of web
hosts
• .com,
.org, .net,
and more
•
•
.com – notes that this site is a
commercial site. A .com is usually a
business site who promotes their
services and products in order to gain
profit through an online business.
.org – notes that this site is an
organization’s website. A .org site is an
informational website about
organizations profit and non-profit and
other information such as history, what
the organization does, etc;
Web Domains
• Important
features
of web
hosts
• .com,
.org, .net,
and more
•
•
.net – notes that this site is a non-profit
site. A .net site is either an informational
site about certain topics or interests
without promoting services and products
for profit.
Others – there are several other types of
dots such as .biz, a site for small
businesses, sites from another country
are also denoted by the first two letters or
the first and third letter, first and fourth
letter, etc; of the country such as .de
[deutsche], .ru [Russia], and .cn [China].
Things to Look For
• Important
features
of web
hosts
• .com,
.org, .net,
and more
• The more common choice for
personal use is a hosting service or
subdomain.
• Examples:
– GeoCities
– Homestead
– NetFirms
Things to Look For
• Important
features
of web
hosts
• What
should
students
look for in
a web
host?
•
•
•
•
•
•
•
•
Price
Web Space
Bandwidth
Integration with Multimedia
Compatibility Issues
Services Offered (CGI, SQL, PHP)
E-mail Services
Easy-to-use Account Interface
Suggestions
• The best
web hosts
on the
net!
• Free services:
– www.150m.com
– www.netfirms.com
– www.geocities.com
• Paid Services
– www.netfirms.com
– www.mediatemple.com
– www.infinology.com
Developing a Stronger Workflow
• Why are
you
making
the
website?
• There’s always a reason to make a
website. If it’s selling products,
talking about games, or making an
online photo album. Always
remember what users would expect
from your website just as much as
your expectations.
• Creating a website is much easier if
it is a joint venture. Teamwork is
quintessential!
Developing a Stronger Workflow
• The
dynamics
of the
idealistic
team
•
The idealistic team consists of:
– Webmaster – Overviews the site,
makes & suggest changes, updates the
site.
– Layout/Graphics Designer – Designs
the story board, layout, and creates
graphics to attract users.
– Coder & Editor – Codes the HTML and
revises it for any errors or mistakes.
– Writers – Writes up the information to
be posted on the website.
Teamwork and Assigning Roles
• The
dynamics
of working
as a team
• Delegate work as evenly as
possible.
• Do not be afraid to express your
own opinions in front of the group.
Your input
matters just as
much as any
other team
member’s
input!
Available Development Software
• Which
programs
to start
out with
• Development programs can help
the novice web designer
immensely.
• A variety of educational and
industry-grade programs are
available on the market.
• There are two main types of
website developers:
– HTML editors
– “WYSIWYG” editors
HTML Editors
• HTML
and its
uses on
website
design
• Hypertext Markup Language (AKA
HTML) is the basic code that
websites are developed upon.
• HTML editors compile common
codes and provide features to
make HTML generation easier to
use for first-timers.
HTML Editors
• The
different
HTML
editors
out there
• Recommended programs:
– CuteHTML
• Automatic tag feature – makes HTML
generation a breeze
• Great for beginners wanting to learn the
basics of HTML
– Notepad
• The simplest, most basic program
• Available on ALL standard Windows PCs
• Streamlined – but no preview feature
“WYSIWYG” Editors
• What are
WYSIWYG
editors?
• “WYSIWYG” is the common
acronym for the second type of
website development software.
• Stands for “What You See Is What
You Get”
• WYSIWYG programs allow the
user to either edit the code itself, or
to edit the page as it is.
“WYSIWYG” Editors
• The
different
WYSIWYG
editors
out there
• Recommended programs:
– Microsoft FrontPage
• Educational standard for web design
• Flexible, easy to use, website within
minutes
• Wide availability
– Macromedia Dreamweaver
• Industry-standard web page editor
• Supports several code languages
• Better for intermediate and advanced
users
Available Design/Layout Software
• Design/
Layout
software
for the
beginning
student
• Coding is indeed an important part
of website creation, but creating an
appealing layout is just as
important.
• The caliber of design/layout
software is somewhat advanced.
Consider adding these touches
when you are experienced enough
with web design.
Adobe Photoshop
• Creativity:
the key to
design
• Industry-standard for editing
pictures and designs. Could be
used for layout-design, you can use
the slice tool to cut your layout into
ideal pieces and export it into a
table via HTML without any coding.
Using Adobe Photoshop
• Expanding
your
aesthetic
horizons
• Take tutorials online to enhance
your Photoshop abilities.
– www.deviantart.com
– www.spoono.com
• Take the elements
of design into
consideration. Keep
the designs looking
original, but
professional.
Examples of Designs
• The next
level of
design and
layouts
• Software
used:
Photoshop
3D Studio
Max
L to R: “Experimentation” and “FALLOUT” by Thai Truong
Examples of Designs
• The next
level of
design and
layouts
• Software
used:
Photoshop
3D Studio
Max
Team DEKA posters – Created in Photoshop
Adobe GoLive
• Animation
and
graphics
in one
package
• GoLive takes the best of animation
programs (such as Flash) and
graphics programs.
• It allows the user to use a variety of
Adobe programs without switching
applications.
Macromedia Flash
• Creativity:
the key to
design
• An extremely powerful vector
animation program widely used in
the web design industry.
• Uses the concepts of frames and
tweens to set its objects and
shapes into motion.
Using Macromedia Flash
• What is
vector
animation
anyway?
• Take tutorials online to enhance
your Flash abilities.
– www.deviantart.com
– www.spoono.com
– www.kirupa.com
• Become familiar with Flash’s
“framed” interface. Consider
learning Action Scripting, the code
language of Flash.
Macromedia Fireworks
• Creativity: • Allows users to import files from all
the key to
major graphics formats and manipulate
design
both vector and bitmap images to
quickly create graphics and interactivity.
• Images can be easily exported to
Dreamweaver, Flash and third-party
applications.
Making Layouts
•
• Where
should I
begin?
• Phases of
preplanning
•
Always draw a storyboard. It organizes
a lot of things into your design such as
recommended dimensions, graphic
placements, and where to place links,
and many others things.
Always assign your roles to people
who have strong knowledge in certain
areas, then later assigning them roles
they are weak in order to strengthen
that area.
Storyboards
• Phases of
preplanning
Sample Storyboard – Compliments of TechTV.com
Examples of Layouts
• Make your
[ENTER]
page
appealing!
• Software
used:
Photoshop
Dreamweaver
To the left:
Riverdale High
School Technology
Education Portal
Page
To the right:
Challenger Learning
Center Website
[ENTER] Page
Examples of Layouts
• Make sure
your main
pages are
balanced.
• Software
used:
Photoshop
FrontPage
L to R: “GHP ’03 Forum Website” and “N4: Mode7”
Things to Do
• Making
sure you
do the
right
things!
•
•
•
Organize your code – it’ll be easier for
your coder & editor to quickly. E.G. all
your codes for tables should be in one
section, and your cascading style
sheets should be in one section.
Always revise your HTML before
posting, such as previewing before
going on to the host.
Be patient. Anger within the team will
cause more problems and put the
website in pending mode.
Things to Do
• Making
sure you
do the
right
things!
•
•
•
Organize your data - Entropy of data
creates no harmony within site and does
not appease most web viewers such as
pictures [thumbnails] and table-styling.
Keep your pictures at optimized web
settings – Bandwidth is always important.
Always keep your site’s loading time as
quick as possible so web viewers do not
have to wait long to see a page.
Have fun making a website. It’s what
drives a person to make the best website
they can.
Things NOT to Do
• The
things to
do…and
the things
NOT to
do!
•
•
•
Frames were good, but now they aren’t. Try
to avoid frames as much as possible.
A flash site is not considered a complete
website. It is better to make the best of both
worlds. Some people prefer flash sites, but
a lot of people would rather look at the html
version in order to find what they want
quickly.
Movies and sounds are good, but always
consider the bandwidth and the loading
speed. It would require a higher speed
connection [T1/DSL/OC-xx] in order to view
it quickly.
Things NOT to Do
• The
things to
do…and
the things
NOT to
do!
•
•
•
•
•
•
Don’t use fonts that you only have on that
computer and that a lot of people do not
have.
Do not rip another person’s layout design.
Do not steal another person or group’s code
with the exception of royalty-free codes.
Don’t use bitmaps. They’re huge. Load time
would suck.
Refrain yourself from using long URL names
[Geocities, Tripod, etc;]
Do not rush your website development.
Conclusion
• Where do
I go from
here?
• The best way to improve website
designing skills is to practice by
creating your own websites.
• Do not expect to have the ideal
product after just a few tries. It takes
time to build up the necessary skills.
• The web design techniques shown
in this presentation are just the tip of
the iceberg. Always strive to learn
more!
Meet the Authors
• Harsh Patel
• Team
– 15 years old (2003)
Signifikant,
– Expertise: Flash, 2D/3D Animation,
hailing
Landscape Designs (Bryce 5), Flash
from
ActionScripts
Riverdale • Jonathan Saethang
High
– 14 years old (2003)
School
– Expertise: Academics (4.0 GPA),
Creative Writing, Leadership,
Intermediate Website Design
• Thai Truong
– 18 years old
– Expertise: Graphic Design, Photography,
Photoshop, 3D Studio Max, DDR and
Computers