WEB DESIGN

PRINCIPLES
 “WEB DESIGN IS A
CONCEPT OF PLANNING,
CREATING, AND
MAINTAINING WEBSITES.”
Visuals on a web page are of utmost importance since it is
one of the ways how you communicate with the viewer.
1. Visual Hierarchy
2. Proportion
GOLDEN RATIO
~ 1.618
3. Hick’s Law
4. Fitt’s Law
5. Accessibility
1. When a visitor visits the website, he or she must be
able to access each bit of information in the easiest
manner.
2. Typefaces must be readable and not too fancy for
some to access or understand
3. Choose contrasting colors for the BG and written
content for readability
4. Make sure your images are high-quality and are
suitable for your purpose
5. Accessibility
5. Accessibility
6. Visible Language
Should Communicate with the users clearly in an
engaging manner.

Principles for successful visual language

• Organize
• Economize
• Communicate
7.
White
Space and
Simple
Design
GRID – based layout
F-pattern design
8. Regular Testing

TETO
Test Early and Test Often
Web Design Principles
1. Visual Hierarchy
2. Proportion
3. Hick’s Law
4. Fitt’s Law
5. Accessibility
6. Visible Language
7. White Space and Simple Design
8. Regular Testing
 WEB DESIGN
ELEMENTS
To come up with a good web design and an effective visual and
technical appeal of a website, there are some elements that must
be considered.
1. Links
States for links
• Normal
• Default state

• Visited
• Target has been visited by the user

• Active
• One being clicked by the user.

• Hover
2. Forms
• Form Label
❑ forms typically collect personal data that users are
reluctant to give out. As such, properly inform users
what’s the exact purpose of the form.

• Input fields and labels

❑ Plan on how the input fields of the form will be laid
our in the page and how the labels for those fields will
be styled and oriented relative to the fields.
3. Form Validation
Core things to discover
1. Required field
• Indicate required fields, usually done with an
asterisk (*)
2. Real-time validation
• Some validations can be done in real time as users
completes the form.
3. Post-back Validation
• Validation that happens after the user has
submitted the form. Where they can group all
errors into a single message
4. Status Messages: Errors,
Warning, Confirmation
Users usually
need some
sort of
feedback
after
performing an
action on your
website.
5. Animations: Pop-ups, Tooltips,
Transitions
1. Tooltips
• Little pop-ups when
mouse hovers over
elements
2. Image rotators or
sliders
3. Lightbox
• displays images and
videos by filling the
screen, and dimming
out the rest of
the web page
 TEMPLATE
Ready-made design for your website, including images,
some navigations, and several sample pages.
 END.
Source: Empowerment Technologies – Erwin Reyes Callo
Folo.co.in