Web Design Element
Chapter 4
LINKS
1. Normal Link
Normal links is the default state of a link(i.e., one that is not being hovered over or clicked or pointed to a URL that the user has already visited).
2. Visited link
Visited link is link that is not being hovered over or clicked but whose target has been visited by the user.
3. Active link
Active link is one that is currently being clicked by the user. Most developers will replicate the hover state here if a style is not provided to them.
4. Hover link
the hover state is what link look like when the user moves the mouse over it. This is the normal states are the ones most designer prepare for.
FORMS
Form label
forms typically collect personal data that users are reluctant to give out. As such, properly informing user of the exact purpose of the form is wise.
Input fields and labels
plan on how the input fields of the form will be laid out on the page and how the labels for those fields will be styled and oriented relative to fields.
Form Validation
This is the critical point where the website communicates the user requirements and errors in a form.
There are three core things to consider:
1. Required fields
all the required fields should be indicated. This is done usually with an asterisk.
2. Real – time validation
some validation can be done real-time as the user completes the form. This kind of validation informs the user as quickly as possible of any problems with the data they have inputted.
3. Post back validation
this kind of validation happens after the user has submitted the form. The style used for real-time validation is often repeated here, but another option is to group all errors into a single message.
Status Messages: Errors, Warnings, Confirmation
User will usually need some sort of feedback after performing an action on your website. The most likely scenario is after submitting a form, but many other events could occur as well. Carefully consider your website and the action that user might take, and plan for the messages that the website will need to communicate.
Animations: Pop-ups, Tooltips, Transitions
Tooltips- those little pop-ups when user’s mouse hover over the elements.
Image rotators or sliders- home page slide shows are all the range of option is available for transitions and styles.
Lightbox- you can style not only the lightbox itself, but also the transition to it.
In this lesson I learned the different types of links and the three core things to consider in form valiadtion. I’ve also learned about the Errors, Warnings, Confirmation in status mesage and also the common places animations used. This lessno really taught me a lot about things I should be aware of.
credits to the owner of the images I used...