Full credit to Hongkiat.com
20 hottest trends in 2013
20 HOTTEST TRENDS* TO WATCH
OUT FOR IN 2013
*Trends represent favorable ideas in the web design community
Responsive web design has been changing to ultimately come to
a threshold where layouts are designed to match all forms of
digital media. The idea is to support all devices from laptops,
desktops, smartphones, tablets, and anything released in the
A uniform web design where the goal is to have a single set of
codes which run perfectly on all environments. Responsive
websites are often thought to cater towards mobile browsers, but
that isn’t the sole purpose.
The big idea here is to think about website design as a single
canvas which is dynamic and fluid by nature. CSS3 media
queries allow developers to customize layouts based on limited or
expanded screen real estate.
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
This means pixel-perfect web designers supporting retina
devices will need to create two sets of images.
First you need to sample your image at double the resolution,
then save a “standard” version at half the size. The larger image
will be scaled down to the standard resolution and will look very
crisp on retina screens. (tip: use retina.js)
FIXED HEADER BARS
Using the CSS position: fixed; property is a great way to staple a
header bar onto your website. As visitors scroll down your page
this will offer constant support for navigation and a trip back to the
This bar also provides an exceptional user experience without
needing to look very far to navigate the website.
LARGE PHOTO BACKGROUNDS
It’s anexcellent way to capture your visitor’s attention and it
can look great when done properly.
Consider the ever popular design portfolio of Kerem Suer
When blended into your layout, this design technique can give
your website a major edge in marketing.
Consider the file transfer website wetransfer.com which displays large
aesthetic ads in the background as your file is uploaded.
The new CSS3 properties have allowed for opacity edits on any
This trend of web design transparency was recently discussed on
Codrops with some very enlivening talking points.
One excellent example is on the Squarespace Blog where the central wrapper
is given abackground: transparent property.
Another interesting design technique for manipulating
transparency is through rgba() color syntax.
MINIMALIST LANDING PAGES
You have access to a large consumer base from anywhere in
Creating a landing page online is all about capturing new leads for
your product or service. New trends are following the idea of
minimalism: keep everything simple and focus on your core
This is exemplified on the PictoPro webpage which offers a beautiful
resource for cheap icons. The page is fairly crafty using vector icons as a
Recommended Reading: Beautiful Landing Pages: Tips And Examples
In some websites, these codes are built right into the design.
This isn’t something you would normally consider since they are
often found in print. But QR codes could become trendy as data
transmission becomes quicker over time.
You can see a brilliant example of this technique on Keith Cakes contact
Read Also: A Look Into: Product Marketing With Quick Response (QR) Code
SOCIAL MEDIA BADGES
You can position these badges pinned to blog posts and articles
anywhere in your layout. These are still used actively by readers and
fans who want to share content quickly on places like Facebook,
Twitter, or even LinkedIn.
Try these in your own web layouts:
Google +1 Button
LinkedIn Share Badge
Hacker News Vote Badge
Dzone Vote Buttons
Free Social Media Icon Sets – Best Of
100+ Remarkably Beautiful Twitter Icons And Buttons
Newer design trends are all about catching and holding one’s
MailChimp is probably the most definitive example with its trademark chimp
Recommended Reading: 50 Beautiful Hand-Drawn Web Design
Pinterest has adopted this loading technique for their layout and
it works beautifully.
Pagination is basically a non-issue and doesn’t even work as a
detriment into the user experience.
An excellent technique which does not work on every layout, but
for the right websites this can look and behave phenomenally.
FOR MORE IDEAS CLICK HERE