This document outlines five elements of effective web design: links, forms, form validation, status messages, and animations. It discusses best practices for each element, including using different link states, including key form elements and labels, using real-time and post-submission validation, providing feedback messages, and adding animations like tooltips and transitions. Forms should be easy to use, minimize fields, have a clear call to action, and use visual contrast. Validation ensures required fields are filled and users are notified of errors.

2. FIVE ELEMENTS OF A GOOD AND EFFECTIVE
WEB DESIGN:
• LINKS
• FORMS
• FORM VALIDATION
• STATUS MESSAGES
• ANIMATIONS

3. 1. LINKS
•NORMAL- THE DEFAULT STATE OF A LINK.
•VISITED – THIS IS A LINK THAT IS NOT BEING HOVERED OVER OR
CLICKED BUT WHOSE TARGET HAS BEEN VISITED BY THE USER.
•ACTIVE – IS ONE THAT IS CURRENTLY BEING CLICKED BY THE USER
•HOVER – IS THE LINK LOOKS LIKE WHEN THE USER MOVES THE MOUSE
OVER IT.

5. 2. FORMS
•ALLOWS A USER TO ENTER DATA THAT IS SENT TO A SERVER FOR PROCESSING.
•FIVE BEST PRACTICES FOR DESIGNING WEB FORMS:
1. INCLUDE THE 5 KEY ELEMENTS OF A WEB FORM
2. MAKE YOUR WEB FORM EASY TO USE
3. MINIMIZE FORM FIELDS
4. CATCH ATTENTION WITH YOUR CALL TO ACTION (CTA)
5. DESIGN WITH VISUAL CONTRAST

6. 5 KEY ELEMENTS OF A WEB FORM:
1.STRUCTURE
2.INPUT FIELDS
3.FIELD LABELS
4.ACTION BUTTONS
5.FEEDBACK

7. SKYPE USES EACH OF THESE ELEMENTS IN THEIR REGISTRATION FORM.

8. 2. MAKE YOUR WEB FORM EASY TO USE
•USE SPECIFIC LABELS
•USE SHORT LABELS
•PROVIDE EXAMPLES
•USE ASTERISKS FOR REQUIRED FIELDS
•USE SENTENCE CASE MAKE THE FORM TITLE EASY TO
UNDERSTAND

9. SALESFORCE USES A BULLETED LIST TO ACCOMPANY THEIR WEB FORM TITLE – ”SIGN UP
ONCE AND WATCH ANY OF OUR FREE DEMOS."

10. 3. MINIMIZE FORM FIELDS
•LESS IS ALWAYS MORE WHEN DESIGNING WEB FORMS.
•SHORTER WEB FORMS CREATE LESS FRICTION FOR USERS,
WHICH IMPROVES THE CHANCE OF A CONVERSION.
•TYPICALLY, 5-7 FORM FIELDS ARE ACCEPTABLE TO USERS.

11. 4. CATCH ATTENTION WITH YOUR CALL TO
ACTION (CTA)
•THE CALL TO ACTION (CTA) BUTTON ON YOUR WEB FORM SHOWS USERS
WHAT’S NEXT. IT SHOULD BOTH CAPTURE THE INTENT OF THE WEB FORM
AND ADDRESS THE USER’S END-BENEFITS.

12. 5. DESIGN WITH VISUAL CONTRAST
•VISUAL CONTRAST IS CRITICAL TO WEB FORM DESIGN BECAUSE
IT INDICATES WHICH AREAS DESERVE ATTENTION.
•REMEMBER THESE VISUAL ELEMENTS WHEN DESIGNING YOUR
WEB FORM
•COLOR
•BRIGHTNESS OBJECT LIMITATION

13. THIS EBOOK OFFER FROM MARKETER GREG KORISKO USES A DIFFERENT SHADE OF ORANGE FOR
THE CTA TO HELP DRAW THE EYE DOWNWARD.

14. 3. FORM VALIDATION
•THE CRITICAL POINT WHERE THE WEBSITE COMMUNICATES THE USER
REQUIREMENTS AND ERRORS IN A FORM.
•THREE CORE THINGS TO CONSIDER:
1. REQUIRED FIELDS
2. REAL-TIME VALIDATION
3. POST-BACK VALIDATION

15. REQUIRED FIELDS
•ALL REQUIRED FIELDS
SHOULD BE INDICATED.
THIS IS DONE USUALLY
WITH AN ASTERISK.

16. REAL-TIME VALIDATION
•THIS KIND OF
VALIDATION INFORMS
THE USER AS QUICKLY
AS POSSIBLE OF ANY
PROBLEMS WITH THE
DATA THEY HAVE
INPUTTED.

17. POST-BACK VALIDATION
•THIS KIND OF VALIDATION
HAPPENS AFTER THE USER
HAS SUBMITTED THE FORM.

18. 4. STATUS MESSAGES: ERRORS, WARNINGS,
CONFIRMATION
•FEEDBACK AFTER PERFORMING AN ACTION ON YOUR
WEBSITE.

20. 5. ANIMATIONS: POP-UPS, TOOLTIPS,
TRANSITIONS
•MOST COMMON PLACES ANIMATIONS ARE USED INCLUDE:
1. TOOLTIPS – LITTLE POP-UPS WHEN USER’S MOUSE HOVER OVER ELEMENTS.
2. IMAGE ROTATORS OR SLIDERS – HOME PAGE SLIDE SHOWS ARE ALL RAGE, AND
A WIDE RANGE OF OPTIONS IS AVAILABLE FOR TRANSITIONS AND STYLES.
3. LIGHTBOX – YOU CAN STYLE NOT ONLY THE LIGHTBOX ITSELF, BUT ALSO THE
TRANSITION TO IT.