Magik New Media is a user experience designer for both web and mobile platforms in Brisbane, Australia. Having numerous numbers of design assignments under its belt, Magik New Media associates regularly distribute tactics on subjects of contemporary design developments and social media. You can review several of our work on MagikNewMedia.com portfolio page or follow twitter updates @magik_new_media.

1. WEB DESIGN
20 Hottest Trends To
Watch Out For in 2013

2. FAVORABLE IDEAS IN THE WEB DESIGN COMMUNITY

4. 1. RESPONSIVE LAYOUTS
Uniform web design. 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. Use this to
your advantage and see how other designers are using it as well!

5. 2. RETINA SUPPORT
Twice as dense as any average LCD. web designers supporting retina devices will need
to create two sets of http://media02.hongkiat.com/web-design-trend-2013/.

6. 3. FIXED HEADER BARS
But aside from the aesthetics, this bar also provides an exceptional user experience without
needing to look very far to navigate the website.

7. 4. LARGE PHOTO BACKGROUNDS
Excellent way to capture your visitor’s This unique background photo behaves
attention as custom branding for everybody who
lands on his website.

8. 5. CSS TRANSPARENCY
One excellent example is on the Squarespace Blog where the central wrapper is given a
background: transparent property.

9. 6. MINIMALIST LANDING PAGES
Access to a large consumer base from anywhere in the world. following the idea of
minimalism. This is exemplified on the PictoPro webpage which offers a beautiful resource for
cheap icons.

10. 7. DIGITAL QR CODES
You can see a brilliant example of this technique on Keith Cakes contact page.

11. 8. SOCIAL MEDIA BADGES
You can check practically any social community for sharing badges and will likely find a great
solution. 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.

12. A SMALL LIST OF SOCIAL MEDIA BADGES
StumbleUpon
Badges
Free Social
Google +1
Media Icon
Button
Sets
Dzone Vote Pinterest
Buttons Buttons
Hacker News LinkedIn
Vote Badge Share Badge

13. 9. DETAILED ILLUSTRATIONS
Illustrations can be used in many various ways to bring about different moods in your website. Look
around the Internet, and you will find many different website galleries and showcases focusing on
digital illustrations. You can see these artistic works eventually blend into its website branding
almost perfectly. MailChimp is probably the most definitive example with its trademark chimp mail
carrier.

14. 10. INFINITE SCROLLING
Pinterest has adopted this loading technique for their layout and it works beautifully. You can search
anything and the results page will continually load as you scroll down. Pagination is basically a non-issue
and doesn’t even work as a detriment into the user experience. Talk about designing for simplicity!

15. 11. HOMEPAGE FEATURE TOURS
Looking back over 2012 I would say my favorite example of this trend is on MediaFire’s homepage. The
entire top portion of the page rotates between a series of slides. They each explain what you can do on
MediaFire and how their features compare with other websites.

16. 12. SLIDING WEBPAGE PANELS
Right off the bat you may not think CaptainDash is any special website. But as you click through the
navigation you will learn that each page is loaded in succession pushing from left-to-right.
Dynamic effects such as these do not always bode well for mobile users.

17. 13. MOBILE NAVIGATION TOGGLE
Enter this beautiful design trend of mobile navigation toggle menus. The Treehouse Blog is merely
one example of this technique which looks brilliant on your smartphone. And even in your web browser!
But there are dozens of websites and design studios who have adopted this trend for their own
responsive layouts.

18. 14. FULLSCREEN TYPOGRAPHY
Alex Pierce has a great website layout which does focus deeply on typography. You can see this
includes rich text effects using CSS3 properties. Additionally the website is very easy to navigate, and
many of the other page elements appear oversized as well.

19. 15. APIS AND OPEN SOURCE
Open APIs and resources like Github allow designers to not only prototype layouts, but also animations
and effects on the page. jQuery has a practically uncountable number of plugins for free download to be
found all over the Web.

20. 16. DEEP BOX SHADOWS
I believe the problems that designers had to face years ago stemmed from box shadows being too
difficult to implement. Back a few years, this effect would require some type of JavaScript or direct
background http://media02.hongkiat.com/web-design-trend-2013/ created in Photoshop. Now box
shadows can be generated with a few lines in CSS.

21. 17. CSS3 ANIMATIONS
Another excellent and very inspiring example comes from a CSS alerts tutorial on Codrops. Notice how
you can setup various times and settings for the animations.

22. 18. VERTICAL NAVIGATION
The portfolio on Riot Industries is a great
example for newer web designers. Check
This textured ef fect is apparent in
other vertical layouts as well, such
out how the navigation links work and how as the CSS gallery Design Bombs.
the portfolio entries are dynamic on hover
effects.

23. 19. SINGLE-PAGE WEB DESIGN
I think the website design for Cage App is possibly one great example of many trends listed in this
article. They are utilizing a single-page layout brilliantly with content split up by horizontal containers.
But you will also notice the very top of the page features a blurred background photo effect.

24. 20. CIRCULAR DESIGN ELEMENTS
The portfolio of Lucia Soto is basically one terrific example of circular web design. The website is built
dynamically so you are panning horizontally to different segments in the page. You will notice some cute
vector artwork dotted along the sidelines as well. Web designers crave these extra tidbits in page layouts
because they ooze uniqueness.

25. FINAL THOUGHTS
User interface design is one of the most complex topics when
building digital products. This rings especially true for website
layouts, trying to match navigations and content styles for a
successful user experience. These design trends aim to point
designers in the right direction.