際際滷

際際滷Share a Scribd company logo

Web design elements

Download as PPTX, PDF
dyisebel elacion
dyisebel elacion

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.

1 of 23
Download to read offline
Web design elements
FIVE ELEMENTS OF A GOOD AND EFFECTIVE WEB DESIGN: LINKS FORMS FORM VALIDATION STATUS MESSAGES ANIMATIONS
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.
Web design elements
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
5 KEY ELEMENTS OF A WEB FORM: 1.STRUCTURE 2.INPUT FIELDS 3.FIELD LABELS 4.ACTION BUTTONS 5.FEEDBACK
SKYPE USES EACH OF THESE ELEMENTS IN THEIR REGISTRATION FORM.
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
SALESFORCE USES A BULLETED LIST TO ACCOMPANY THEIR WEB FORM TITLE SIGN UP ONCE AND WATCH ANY OF OUR FREE DEMOS."
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.
4. CATCH ATTENTION WITH YOUR CALL TO ACTION (CTA) THE CALL TO ACTION (CTA) BUTTON ON YOUR WEB FORM SHOWS USERS WHATS NEXT. IT SHOULD BOTH CAPTURE THE INTENT OF THE WEB FORM AND ADDRESS THE USERS END-BENEFITS.
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
THIS EBOOK OFFER FROM MARKETER GREG KORISKO USES A DIFFERENT SHADE OF ORANGE FOR THE CTA TO HELP DRAW THE EYE DOWNWARD.
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
REQUIRED FIELDS ALL REQUIRED FIELDS SHOULD BE INDICATED. THIS IS DONE USUALLY WITH AN ASTERISK.
REAL-TIME VALIDATION THIS KIND OF VALIDATION INFORMS THE USER AS QUICKLY AS POSSIBLE OF ANY PROBLEMS WITH THE DATA THEY HAVE INPUTTED.
POST-BACK VALIDATION THIS KIND OF VALIDATION HAPPENS AFTER THE USER HAS SUBMITTED THE FORM.
4. STATUS MESSAGES: ERRORS, WARNINGS, CONFIRMATION FEEDBACK AFTER PERFORMING AN ACTION ON YOUR WEBSITE.
Web design elements
5. ANIMATIONS: POP-UPS, TOOLTIPS, TRANSITIONS MOST COMMON PLACES ANIMATIONS ARE USED INCLUDE: 1. TOOLTIPS LITTLE POP-UPS WHEN USERS 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.
Web design elements
Web design elements
Web design elements

More Related Content

Web design elements

  • 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 WHATS NEXT. IT SHOULD BOTH CAPTURE THE INTENT OF THE WEB FORM AND ADDRESS THE USERS 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 USERS 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.