Skills
and Techniques for Web Design
Marketing and communication design
Marketing and communication
design on a website may identify what works for its target market. This can be
an age group or particular strand of culture; thus the designer may understand
the trends of its audience. Designers may also understand the type of website
they are designing, meaning, for example, that (B2B) business-to-business
website design considerations might differ greatly from a consumer targeted
website such as a retail or entertainment website. Careful consideration might
be made to ensure that the aesthetics or overall design of a site do not clash
with the clarity and accuracy of the content or the ease of web navigation,
especially on a B2B website. Designers may also consider the reputation of the
owner or business the site is representing to make sure they are portrayed
favorably.
User experience design and interactive design
Users understanding the contentof a website often depend on users understanding how the website works. This is
part of the user experience design. User experience is related to layout, clear
instructions and labeling on a website. How well a user understands how they
can interact on a site may also depend on the interactive design of the site.
If a user perceives the usefulness of that website, they are more likely to
continue using it. Users who are skilled and well versed with website use may
find a more unique, yet less intuitive or less user-friendly website interface
useful nonetheless. However, users with less experience are less likely to see
the advantages or usefulness of a less intuitive website interface. This drives
the trend for a more universal user experience and ease of access to
accommodate as many users as possible regardless of user skill. Much of the
user experience design and interactive design are considered in the user
interface design.
Advanced interactive functions
may require plug-ins if not advanced coding language skills. Choosing whether
or not to use interactivity that requires plug-ins is a critical decision in
user experience design. If the plug-in doesn't come pre-installed with most
browsers, there's a risk that the user will have neither the knowhow, nor the
patience to install a plug-in just to access the content. If the function
requires advanced coding language skills, it may be too costly in either time
or money to code compared to the amount of enhancement the function will add to
the user experience. There's also a risk that advanced interactivity may be
incompatible with older browsers or hardware configurations. Publishing a
function that doesn't work reliably is potentially worse for the user
experience than making no attempt. It depends on the target audience if it's
likely to be needed or worth any risks.
Page layout:
Part of the user interface design
is affected by the quality of the page layout. For example, a designer may
consider if the sites page layout should remain consistent on different pages
when designing the layout. Page pixel width may also be considered vital for
aligning objects in the layout design. The most popular fixed-width websites
generally have the same set width to match the current most popular browser
window, at the current most popular screen resolution, on the current most
popular monitor size. Most pages are also center-aligned for concerns of
aesthetics on larger screens.
Fluid layouts increased in
popularity around 2000 as an alternative to HTML-table-based layouts and
grid-based design in both page layout design principle, and in coding
technique, but were very slow to be adopted. This was due to considerations of
screen reading devices and windows varying in sizes which designers have no
control over. Accordingly, a design may be broken down into units (sidebars,
content blocks, embedded advertising areas, navigation areas) that are sent to
the browser and which will be fitted into the display window by the browser, as
best it can. As the browser does recognize the details of the reader's screen
(window size, font size relative to window etc.) the browser can make
user-specific layout adjustments to fluid layouts, but not fixed-width layouts.
Although such a display may often change the relative position of major content
units, sidebars may be displaced below body text rather than to the side of it.
This is a more flexible display than a hard-coded grid-based layout that
doesn't fit the device window. In particular, the relative position of content
blocks may change while leaving the content within the block unaffected. This
also minimizes the user's need to horizontally scroll the page.
Responsive Web Design is a newerapproach, based on CSS3, and a deeper level of per-device specification within
the page's style sheet through an enhanced use of the CSS @media
pseudo-selector.
Typography
Web designers may choose to limit
the variety of website typefaces to only a few which are of a
similar style,
instead of using a wide range of typefaces or type styles. Most browsers
recognize a specific number of safe fonts, which designers mainly use in order
to avoid complications.
Font downloading was later
included in the CSS3 fonts module and has since been implemented in Safari 3.1,
Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in
web typography, as well as the usage of font downloading.
Most layouts on a site
incorporate negative space to break the text up into paragraphs and also avoid
center-aligned text.
Motion graphics
The page layout and user
interface may also be affected by the use of motion graphics. The choice of
whether or not to use motion graphics may depend on the target market for the
website. Motion graphics may be expected or at least better received with an
entertainment-oriented website. However, a website target audience with a more
serious or formal interest (such as business, community, or government) might
find animations unnecessary and distracting if only for entertainment or
decoration purposes. This doesn't mean that more serious content couldn't be
enhanced with animated or video presentations that are relevant to the content.
In either case, motion graphic design may make the difference between more
effective visuals or distracting visuals.
Quality of code
Website designers may consider it
to be good practice to conform to standards. This is usually done via a
description specifying what the element is doing. Failure to conform to
standards may not make a website unusable or error prone, but standards can
relate to the correct layout of pages for readability as well making sure coded
elements are closed appropriately. This includes errors in code, more organized
layout for code, and making sure IDs and classes are identified properly.
Poorly-coded pages are sometimes colloquially called tag soup. Validating via
W3C can only be done when a correct DOCTYPE declaration is made, which is used
to highlight errors in code. The system identifies the errors and areas that do
not conform to web design standards. This information can then be corrected by
the user.
