|
This year's findings paint a clearer picture of
the distinctions between full-time and freelance
web professionals: how you work, what you earn,
and what you love about the job. |
Interestingly, too, despite the brutality
of a global recession that was already in full swing
when we offered the survey, most respondents revealed
a surprisingly high level of job security, satisfaction,
and confidence in the future.
We present Web design trends for 2009:
recent developments, new design elements and new graphic
approaches. We also discuss situations in which these
trends can be used and present some beautiful examples.
Web
Design Trends for 2009
| |
Letter
Press / Embossing
One of the most unexpected trends we've
observed over the last months was the emergence
of letterpress (actually pressed letters)
in Web design. Probably the most important
reason for this trend is the simple fact
that this technique has been rarely used
until now.
Letterpress is used in various styles and
on various websites and for various topics;
in particular, it is often used in product
designs and on websites for online services. |
 |
Rich user
interfaces
Happily, user interfaces in modern websites
and Web applications are becoming more beautiful
and more usable. Over the last year, the
user experience for these applications has
dramatically improved, resulting in rich
and responsive user interface that have
tremendous similarities with classic desktop
applications. AJAX and Flash are widely
used to offer users the dynamic interaction
that they have come to expect from advanced,
sophisticated, professional solutions. |
|
PNG transparency
PNG transparency, although unsupported
by Internet Explorer 6, seems to have gained
popularity on the scene over the last year.
Apparently, designers are trying to better
integrate background images into the actual
content and are aiming for a style that
is often seen in printed media, magazines
for instance. In most cases, semi-transparent
backgrounds stand out in the overall background
of a page and are intended to highlight
an important design element, such as a headline
or announcement. Sometimes PNG transparency
is used for the background of modal boxes
as well. |
|
Big typography
In 2009, big typography should remain popular.
In particular, design agencies, portfolios,
product websites and online services will
use big typography to communicate the most
important messages of their websites.
The font size of these design elements
often goes beyond 36 pixels, and in many
cases quite expensive typefaces are used
to reach an audience. Overall, designers
are paying closer attention to typographic
details such as leading, line height and
choice of font. The consequence: websites
are more beautiful and more consistent and
look solid and trustworthy. |
|
Font replacement (sIFR, etc.)
As designers pay more attention to typography,
they also pay more attention to the fonts
that are used for the copy in the body of
websites. Although classics such as Helvetica,
Arial, Georgia and Verdana undoubtedly dominate,
we observed a slight trend towards font
replacement (for instance, with sIFR).
What is interesting is that these fonts
are often seamlessly integrated in the design
of websites; they are almost never used
for their own sake or simply to “upgrade”
the typography of a website. Designers are
trying to blend beautiful typography and
arresting visual design to improve the appearance
of websites and improve the user experience. |
|
Modal boxes
Modal boxes (dialog windows) are, essentially,
the second generation of pop-ups. They serve
as a user-friendly alternative to classic
JavaScript windows and support users by
focusing their attention on the most important
area of the website. Modal windows are always
triggered by a user action (e.g. signing
up or logging in) and appear on top of the
main content, like a window in a regular
desktop application. Modal windows are often
presented in a very subtle way: they are
often semi-transparent and have a “Close”
button.
|
|
Media blocks
With more broadband Internet access, users
can now afford to browse more than they
did a couple of years ago, and designers
can use this opportunity to present content
in a more attractive and memorable way.
Hence, it’s no wonder that many product
websites use media blocks (for videos and
screencasts) for this very purpose. The
main advantage of such elements is that
they can communicate content quickly and
effectively and make it easier for users
to consume information.
Users just lean back and enjoy the show;
they get everything explained to them step
by step, without having to click, search
for descriptions or learn the navigation.
The movies are usually pretty short and
get directly to the point; they are mostly
formal but can be entertaining, too.
But please make sure that videos are an
alternative presentation of (and not the
main or only!) content on your website.
Not every user has broadband access to the
Web, not every user is willing to watch
a video (e.g. because he or she may have
a radio or music playing in the background),
and not every user has Flash and JavaScript
installed on his or her machine. |
|
The magazine look
An interesting development in the design
of blogs is the adaptation of various techniques
usually found in traditional (print) media.
The arrangement of posts on the page, the
use of typography, illustrations and even
text alignment often resemble traditional
techniques from print. Grid-based designs
are gaining popularity as well but are used
mostly in portfolios, product pages and
big blogs; they almost never appear on corporate
websites or in online shops. |
|
Carousels (slideshows)
Carousels are essentially slideshow navigations,
in which the content rotates vertically
or horizontally (hence the name “carousel”).
To rotate the navigation, users need to
click on one of two toggle elements (usually
a left/right or up/down arrow). Depending
on the toggle element selected, the content
is rotated in the desired direction.
Instead of clicking through various sections
of the website for their favorite stories,
users can quickly skim through the available
stories without vertical scrolling or unnecessary
mouse movements. The result: users save
time, and the carousel focuses their attention
sharply on the content, instead of on interacting
with the browser. Such slideshow navigation
is often used on entertainment websites
and big blogs, but designers also make use
of it in their portfolios to showcase their
work in a more interactive way. |
|
Introduction blocks
The upper-left area of a website is the
most important block on the page, because
it grabs the most attention from visitors.
Therefore, it makes perfect sense to place
the most important message of the website
right there and thus make sure that readers
get the message as quickly as possible.
In fact, this is exactly what many designers
are doing. Whether for a Web application,
corporate design, online service or portfolio,
designers are pushing their slogans and
brief introductions to the top of the page
and are using strong, vivid typography to
make a good first impression. Some introductions
are short, others are quite lengthy; in
either case, they usually take a lot of
space; the full width of the layout and
between 250 and 400 pixels in height are
common dimensions for these introduction
blocks. Notice, though, that introduction
blocks almost never appear in blogs and
rarely in online shops. |
|
|
Source:
Smashingmagazine.com |
|
|
Website Designing India
