The document discusses the hottest trends in web design for 2013, including responsive layouts that adapt to different devices, retina image support for high-resolution displays, single-page web designs, fixed navigation bars, large background images and illustrations, lazy loading and infinite scrolling, vertical scrolling, CSS transparency effects, QR codes, mobile navigation toggles, fullscreen typography, CSS3 animations, and circular design elements. The author is Sameera Thilakasiri, a front-end developer based in Colombo.
Hottest trends to web design in 2013 by Sameera Thilakasiri
1. Hottest Trends To Web Design In 2013
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1
2. Responsive Layouts
The idea is to support all
devices from laptops, desktops,
smartphones, tablets, and
anything released in the future.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 2
3. Retina Image Support
Apple first engineered this idea with the iPhone 4 and has since
applied this screen display onto their other devices, including the
iPad and some MacBooks.
Retina screens are basically twice as dense as any average LCD.
So they are the same number of physical pixels, but digitally
twice as many pixels can be fitted into the same physical space.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 3
4. Single-Page Web Design
Single page design is a big topic
and covered under many
different categories. Obviously
there have been single-page
websites since the creation of the
World Wide Web. But over the
recent years we have seen this
trend evolve to sport a more
natural user experience.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 4
6. Enormous photo backgrounds and
Large images used for large impact
visuals.
Photographers or
even fans of
photography will
definitely enjoy this
design trend. It’s an
excellent way to
capture your visitor’s
attention and it can
look great when done
properly.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 6
7. Lazy loading / infinite scrolling
A number of social media
websites have begun applying
infinite scroll effects onto
dashboards and timelines and
user feeds. This effect was
gaining traction due to the
popularity of Twitter and
Tumblr’s unique layout style.
And now more recently
Pinterest has also adopted this
infinite page scroll on their
homepage.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 7
8. Vertical Scrolling
Vertical scrolling is easy, convenient for all the mobile users.
Vertical scrolling is quite user friendly, efficient and definitely
allows easy navigation. Apart from all this, another trend that is
expected to hit 2013 is vertical scrolling of menus and buttons.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 8
9. CSS Transparency
The new CSS3 properties
have allowed for opacity
edits on any webpage
element. This means you
have control to generate
transparency in any
modern web browser –
no Photoshop required!
This trend of web design
transparency was
recently discussed on
Codrops with some very
enlivening talking points.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 9
10. Digital QR Codes
The abundance of mobile
smartphones has led to a
surge of QR Code apps.
This stands for Quick
Response Code and has
developed from the older
UPC barcodes. You will
find these tagged
everywhere from
restaurants to event
venues and automobile
sales lots.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 10
11. Detailed Illustrations
Newer design trends are
all about catching and
holding one’s attention. I
feel that illustrations
perform this task
brilliantly. The problem is
finding a designer who
can make such
impeccable works of art,
or even teaching
yourself.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 11
12. Mobile Navigation Toggle
When speaking of responsive design one of the most difficult
questions is how to build a solid navigation. You want to give
your readers direct access to all your important links, without
flooding the page making it unreadable. It is also a good idea to
keep your responsive navigation hidden away until it’s needed.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 12
13. Fullscreen Typography
Earlier I mentioned using
big oversized photographs
in the background of
website layouts. This trend
can be extended to focus on
typography as well:
designing your webpage
text so it fills the entirety of
the browser. Some users
may find this annoying. But
this is not often the case if
the layout is fitted perfectly
for super-large text.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 13
14. CSS3 Animations
The CSS3 transition property and all the related browser prefixes
offers CSS dynamic effects just like JavaScript. Designers can now
animate effects on the page based on different CSS properties. I
have seen a lot of nice hover effects and form input fields using
these transitions the right way.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 14
15. Circular Design Elements
The trend of circles within
website layouts is something
newer and has been given a lot
of attention recently. Designers
like circles because they are
clean, neat, and generally fit into
any layout block. You can build
patterns and even fix your page
elements into circular designs
(eg. user avatars, share buttons,
post dates, etc).
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 15
17. Author
Sameera Thilakasiri is a front-end developer based in Colombo. Specialist in
UI, UX, SEO, IA, IxD, RWD. He is blogging technical areas and lifestyle
photographer while is leisure. He can be reached by
http://www.sameerast.com
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 17