Вы находитесь на странице: 1из 18

Web Design

Element
1. Links
Following states of links:
•Normal link
•Visited link
•Active link
•Hover link
Normal Link
• Normal link
- this 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).
Visited Link
• Visited link
- this is link that is not
being hovered over or clicked
but whose target has been
visited by the user.
Active Link
• Active link
- an 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.
Hover Link
• 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.
2. Forms
Two of the most important considerations
when laying out a form are:
•Form label
•Input fields and labels
Form Label
• 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
•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.
3. 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:
• Required fields
• Real – time validation
• Post back validation
Required Fields

•Required fields
- all the required
fields should be
indicated. This is
done usually with
an asterisk.
Real – Time Validation
• 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.
Post - Back
Validation
• 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.
4. 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.
5. Animations: Pop-ups, Tooltips,
Transitions
Common places animations used are
the following:
•Tooltips
•Image rotators or sliders
•Lightbox
Tooltips
•Tooltips
- those little pop-ups
when user’s mouse
hover over the
elements.
Image Rotators or Sliders
• Image rotators or
sliders
- home page slide
shows are all the range
of option is available
for transitions and
styles.
Lightbox
•Lightbox
- you can style not
only the lightbox itself,
but also the transition
to it.

Вам также может понравиться