{"id":15963,"date":"2013-01-02T21:01:34","date_gmt":"2013-01-02T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15963"},"modified":"2025-04-21T19:44:11","modified_gmt":"2025-04-21T11:44:11","slug":"web-design-trend-2013","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/","title":{"rendered":"20 Hottest Trends To Watch Out For in 2013"},"content":{"rendered":"<p>All throughout 2012 there was an enormous surge in new <a href=\"https:\/\/www.hongkiat.com\/blog\/category\/design\/\">web design<\/a> trends. Some of you may remember my earlier post on <a href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/\">web design trends going into 2012<\/a>. Now we can see many of these ideas have come to fruition, and even adopted further increasing levels of novelty. In this article, I would like to delve into <strong>20 more design trends for the new 2013 year<\/strong>.<\/p>\n<p>The design influence is <strong>merely a reflection of our culture and expectations for <a href=\"https:\/\/www.hongkiat.com\/blog\/category\/uiux\/\">user interfaces<\/a><\/strong>. Ideally, these trends represent <strong>favorable ideas in the web design community<\/strong>. However, designers will always have their own opinions when it comes to design terms, so take these ideas with a grain of salt.<\/p>\n<p>If you are interested, keep your eyes peeled for examples of these trends and techniques.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trends-2014\/\" class=\"ref-block__link\" title=\"Read More: Web Design Trends for 2014\" rel=\"bookmark\"><span class=\"screen-reader-text\">Web Design Trends for 2014<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/web-design-trends-2014.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-19011 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/web-design-trends-2014.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Web Design Trends for 2014<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAfter spending hours online at different websites, you tend to pick up discernable trends in design. Over the...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. Responsive Layouts<\/h2>\n<p>This topic was my first point in the 2012 trend article, however I feel that <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/rwd\/\">responsive web design<\/a> 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 future.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/01-pixelcloud-website-responsive-mobile-iphone.jpg\" alt=\"Responsive website on iPhone\" width=\"500\" height=\"292\"><\/figure>\n<p>You could think of this trend more like a <strong>uniform web design<\/strong> 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\u2019t the sole purpose.<\/p>\n<p>You can have a responsive website which also adds brilliant illustrations and graphics into the layout when the browser window is larger.<\/p>\n<p class=\"recommended_top\"><strong>Recommended Reading: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/rwd\/\">Responsive Web Design series of articles.<\/a><\/p>\n<h2>2. Retina Support<\/h2>\n<p>Along with responsive support for website layouts, I have also seen a dramatic rise in people building for retina devices. 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.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/02-retina-js-javascript-library.jpg\" alt=\"Retina.js JavaScript library\" width=\"500\" height=\"292\"><\/figure>\n<p>Retina screens are basically <strong>twice as dense as any average LCD<\/strong>. So they are the same number of physical pixels, but digitally twice as many pixels can be fitted into the same physical space.<\/p>\n<p>This means pixel-perfect <strong>web designers supporting retina devices will need to create two sets of images<\/strong>. First you need to sample your image at double the resolution, then save a \u201cstandard\u201d version at half the size. The larger image will be scaled down to the standard resolution and will look very crisp on retina screens.<\/p>\n<p>One of my favorite tools for responsive web design is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/imulus.github.io\/retinajs\/\">retina.js<\/a>. This is a JavaScript library for <strong>automatically displaying @2x retina copies of images whenever your user is browsing on a retina device<\/strong>.<\/p>\n<p>Although this won\u2019t detect CSS background images, it is still the most handy resource as opposed to coding everything in media queries.<\/p>\n<h2>3. Fixed Header Bars<\/h2>\n<p>Using the CSS <code>position: fixed;<\/code> 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 home page. This trend has been around for a while but now we are seeing this in full force.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/03-trilulilu-video-media-network-fixed-toolbar.jpg\" alt=\"Trilulilu fixed top navigation bar website\" width=\"500\" height=\"350\"><\/figure>\n<p>Fixed headers are so interesting because they can work on practically any website. This includes social networks, blogs, and even design studios or private companies. The design is very trendy and looks great paired with most layouts. But aside from the aesthetics, this bar also <strong>provides an exceptional user experience<\/strong> without needing to look very far to navigate the website.<\/p>\n<h2>4. Large Photo Backgrounds<\/h2>\n<p>Photographers or even fans of photography will definitely enjoy this design trend. I have seen countless showcases discussing the ideas of big oversized photography in the background. It\u2019s an <strong>excellent way to capture your visitor\u2019s attention<\/strong> and it can look great when done properly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/04-davidia-int-interior-website-photo.jpg\" alt=\"Interior website photo\" width=\"500\" height=\"350\"><\/figure>\n<p>I am often fond of big photographs since they can be pleasing on the eyes. When blended into your layout, this design technique can give your website a major edge in marketing. On this topic, I always consider the ever popular design portfolio of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.kerem.co\/\">Kerem Suer<\/a>. This unique background photo behaves as <strong>custom branding<\/strong> for everybody who lands on his website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/05-kerem-suer-freelance-portfolio-website.jpg\" alt=\"Kerem Suer freelance design portfolio\" width=\"500\" height=\"350\"><\/figure>\n<h2>5. CSS Transparency<\/h2>\n<p>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 \u2013 no Photoshop required! This trend of web design transparency was recently <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/codrops\/2012\/11\/26\/using-transparency-in-web-design-dos-and-donts\/\">discussed on Codrops<\/a> with some very enlivening talking points.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/06-squarespace-blog-transparency.jpg\" alt=\"Squarespace transparent website layout\" width=\"500\" height=\"350\"><\/figure>\n<p>One excellent example is on the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/newsroom.squarespace.com\/\">Squarespace Blog<\/a> where the central wrapper is given a <code>background: transparent<\/code> property. Typically this can be used <strong>to generate some other background from repeating patterns, or to setup the background using internal elements<\/strong>.<\/p>\n<p>Another interesting design technique for <strong>manipulating transparency is through <code>rgba()<\/code> color syntax<\/strong>. When designing in CSS, you have the option of specifying colors using Red, Green, Blue, and Alpha-Transparency values. So using the syntax <code>rgba(255,255,255,0.6)<\/code> would generate the color white at only 60% opacity. This is certainly a design trend we can expect continuing into 2013 and beyond.<\/p>\n<h2>6. Minimalist Landing Pages<\/h2>\n<p>Anybody who has spent some time researching markets will understand that <a href=\"https:\/\/www.hongkiat.com\/blog\/category\/ecommerce\/\">selling on the Internet<\/a> is just plain smart. You have <strong>access to a large consumer base from anywhere in the world<\/strong>. Additionally, you can sell products which are not even physical, such as videos or creative resources.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/07-pictopro-sales-landing-page-paypal.jpg\" alt=\"PictoPro website icons\" width=\"500\" height=\"350\"><\/figure>\n<p>Creating a landing page online is all about capturing new leads for your product or service. New trends are <strong>following the idea of minimalism:<\/strong> keep everything simple and focus on your core product.<\/p>\n<p>This is exemplified on the <strong>PictoPro webpage<\/strong> which offers <strong>a beautiful resource for cheap icons<\/strong>. The page is fairly crafty using vector icons as a background effect. But all the text is easy to read and it\u2019s basically a one-click checkout process. You cannot get much simpler than that.<\/p>\n<p class=\"recommended_top\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/beautiful-landing-pages\/\">Beautiful Landing Pages: Tips And Examples<\/a><\/p>\n<h2>7. Digital QR Codes<\/h2>\n<p>The abundance of mobile smartphones has led to a surge of QR Code apps. This stands for <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/QR_code\">Quick Response Code<\/a> and has developed from the older UPC barcodes. You will find these tagged everywhere from restaurants to event venues and automobile sales lots.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/08-keith-homemade-cakes-bakery-qr-code.jpg\" alt=\"Keith Cakes Bakery contact QR code\" width=\"500\" height=\"302\"><\/figure>\n<p>But very recently, I have found a couple of websites with these codes <a href=\"https:\/\/www.hongkiat.com\/blog\/qr-code-artworks\/\">built right into the design<\/a>. This isn\u2019t something you would normally consider since they are often found in print. But QR codes could <a href=\"https:\/\/www.hongkiat.com\/blog\/customized-colored-qr-codes\/\">become trendy<\/a> as data transmission becomes quicker over time. You can see a brilliant example of this technique on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.keithcakes.com.au\/contact.php\">Keith Cakes<\/a> contact page.<\/p>\n<p class=\"recommended_top\"><strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/quick-response-qr-code-product-marketing\/\">A Look Into: Product Marketing With Quick Response (QR) Code<\/a><\/p>\n<h2>8. Social Media Badges<\/h2>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/marketing-your-blog-10-essential-tips-you-should-know\/\">Marketing<\/a> is one of the ultimate determining factors in a <a href=\"https:\/\/www.hongkiat.com\/blog\/powerful-branding-techniques-through-social-media\/\">website\u2019s success<\/a> <a href=\"https:\/\/www.hongkiat.com\/blog\/social-networking-advice\/\">or failure<\/a>. Social media and viral marketing are exploding in many different websites. Digg used to reign popular in this domain but has since conceded to rivals like Reddit. But these are not the only two popular resources for sharing stories online.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/social-media-badges.jpg\" alt=\"Social media badges\" width=\"500\" height=\"274\"><\/figure>\n<p>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.<\/p>\n<h2>9. Detailed Illustrations<\/h2>\n<p>Newer design trends are all about catching and <a href=\"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/\">holding one\u2019s attention<\/a>. 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.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/09-two-giraffes-website-illustrations.jpg\" alt=\"Website illustration\" width=\"500\" height=\"370\"><\/figure>\n<p>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. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mailchimp.com\/\">MailChimp<\/a> is probably the most definitive example with its trademark chimp mail carrier.<\/p>\n<p class=\"recommended_top\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/60-beautiful-hand-drawn-web-design\/\">50 Beautiful Hand-Drawn Web Design<\/a><\/p>\n<h2>10. Infinite Scrolling<\/h2>\n<p>Infinite scroll loading has been around for at least a few years. But this technique hadn\u2019t really hit mainstream until this year and I\u2019m sure it will continue into 2013.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/10-pinterest-infinite-load-pins.jpg\" alt=\"Pinterest infinite scrolling pins homepage\" width=\"500\" height=\"350\"><\/figure>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pinterest.com\/\">Pinterest<\/a> has adopted this loading technique <strong>for their layout and it works beautifully<\/strong>. You can search anything and the results page will continually load as you scroll down. <strong>Pagination is basically a non-issue<\/strong> and doesn\u2019t even work as a detriment into the user experience. Talk about designing for simplicity!<\/p>\n<p>But another great example and possibly my favorite example is on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.tumblr.com\/\">Tumblr<\/a>. You can blog and reblog photos from other people you follow which all appear on your Dashboard. So after logging into your account, all the most recent posts will scroll infinitely down the page.<\/p>\n<p>This is an excellent technique which does not work on every layout, but for the right websites, this can look and behave phenomenally.<\/p>\n<h2>11. Homepage Feature Tours<\/h2>\n<p><strong>Sliding image presentations<\/strong> and <strong>demo videos<\/strong> are both very common with new products on the web. <strong>Landing pages and startups <\/strong>often try to entice potential users with these informational goodies. And they can often work very well, if you know how to construct something that looks good on a webpage.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/11-mediafire-landing-page-tour-demo.jpg\" alt=\"MediaFire direct download files tour webpage layout\" width=\"500\" height=\"292\"><\/figure>\n<p>Looking back over 2012, I would say my favorite example of this trend is on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mediafire.com\/\">MediaFire\u2019s homepage<\/a>. The entire top portion of the page <strong>rotates between a series of slides<\/strong>. They each explain what you can do on MediaFire and how their features compare with other websites.<\/p>\n<p>What helps this demonstration stand out is also <strong>their use of big graphics and icons<\/strong>. This is another trend which will not work on all websites, only for certain products you can draw in loads of attention.<\/p>\n<h2>12. Sliding Webpage Panels<\/h2>\n<p>Dynamic websites used to be very popular when Flash and ActionScript were all the rage. Now, dynamic effects have moved into the realm of JavaScript\/jQuery, and this has in turn affected the way designers build websites. <strong>Sliding panels<\/strong> is just one technique I happen to really enjoy and would expect to see more in 2013.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/12-captain-dash-website-panels.jpg\" alt=\"Captain Dash website layout sliding panels\" width=\"500\" height=\"292\"><\/figure>\n<p>But if you can handle them with <strong>responsive design techniques or an alternate mobile site<\/strong>, then this is a really cool effect worth trying out.<\/p>\n<h2>13. Mobile Navigation Toggle<\/h2>\n<p>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 <a href=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-nav\/\">responsive navigation<\/a> hidden away until it\u2019s needed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/13-treehouse-blog-mobile-nav-menu-bars.jpg\" alt=\"Treehouse Blog responsive mobile navigation menu links\" width=\"500\" height=\"292\"><\/figure>\n<p>Enter this beautiful design trend of <strong>mobile navigation toggle menus<\/strong>. The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.teamtreehouse.com\/\">Treehouse Blog<\/a> 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.<\/p>\n<p>What I like most about the toggled navigation is that <strong>you can design menus in so many various forms<\/strong>. You can have links drop down from the top, or slide down, or push content over from the left or right side. Designers have so many options to play with and there is plenty of time for UI experiments.<\/p>\n<p class=\"recommended_top\"><strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/building-mobile-app-navigation-with-jquery\/\">Mobile App Design\/Dev: Building Navigation With JQuery<\/a><\/p>\n<h2>14. Fullscreen Typography<\/h2>\n<p>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 <strong>this is not often the case if the layout is fitted perfectly<\/strong> for super-large text.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/14-alex-pierce-website-typography-oversized.jpg\" alt=\"Alex Pierce website typography oversized text\" width=\"500\" height=\"292\"><\/figure>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thegeekdesigner.com\/\">Alex Pierce<\/a> has a great website layout which does focus deeply on typography. You can see this includes <strong>rich text effects using CSS3 properties<\/strong>. Additionally, the website is very easy to navigate, and many of the other page elements appear oversized as well.<\/p>\n<p><strong>Big text with unique font styles can stand out just as much as oversized photography<\/strong>. And I am sure this will see more design critiques moving into the new year.<\/p>\n<p class=\"recommended_top\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/showcase-web-design-beautiful-typography\/\">Showcase Of Web Designs With Beautiful Typography<\/a><\/p>\n<h2>15. APIs and Open Source<\/h2>\n<p>Open source software has been around for decades and has been changing the web since its inception. But over the course of 2012, I have noticed more open source software pertaining to <strong>webpage widgets, layouts, and dynamic effects<\/strong>. Typically we could also be talking about free website templates, layouts, or <a href=\"https:\/\/www.hongkiat.com\/blog\/opensource-ecommerce-shopping-carts\/\">CMS software<\/a> such as WordPress.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/15-github-open-source-community.jpg\" alt=\"Social networking open source programming code development\" width=\"500\" height=\"350\"><\/figure>\n<p>Open APIs and resources like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/\">Github<\/a> allow designers to not only <strong>prototype layouts, but also animations and effects on the page<\/strong>. jQuery has a practically uncountable number of plugins for free download to be found all over the Web.<\/p>\n<p>And I am honestly not expecting the amount of open source projects to slow down anytime soon. This truly is the greatest era to be getting started and advancing your knowledge in the field of creating websites.<\/p>\n<h2>16. Deep Box Shadows<\/h2>\n<p>I discussed CSS3 box shadows in our previous post written for 2012, and this trend has proven to be very accurate. In fact, I now almost always expect to see box shadows infused with elements in modern web designs. The effects look amazing and they rarely detract from the aesthetics except when overused.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/16-rareview-box-shadows-hover-css3.jpg\" alt=\"CSS3 box shadows\" width=\"500\" height=\"301\"><\/figure>\n<p>I believe the problems that designers had to face years ago <strong>stemmed from box shadows being too difficult to implement<\/strong>. Back a few years, this effect would require some type of JavaScript or direct background images created in Photoshop. Now box shadows <a href=\"https:\/\/www.hongkiat.com\/blog\/creating-responsive-form-with-css3-html5\/\">can be generated with a few lines in CSS<\/a>.<\/p>\n<h2>17. CSS3 Animations<\/h2>\n<p>The CSS3 <code>transition<\/code> 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 <a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\">hover effects and form input fields<\/a> using these transitions the right way.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/17-codrops-timed-css3-animated-alerts.jpg\" alt=\"Codrops tutorial css3 animation transition effects\" width=\"500\" height=\"350\"><\/figure>\n<p>Another excellent and very inspiring example comes from a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/TipsTricks\/CSS3TimedNotifications\/\">CSS alerts tutorial on Codrops<\/a>. Notice how you can setup various times and settings for the animations.<\/p>\n<p>This is definitely a trend which offers some promise in the coming months and years with lots of room to advance. I am confident that newer web designers will give rise to booming animations <strong>all created without the use of scripting<\/strong>.<\/p>\n<h2>18. Vertical Navigation<\/h2>\n<p>I was not a big fan of this layout style when I first started noticing different websites adopting this trend. However, over this past year I have seen more designers creating elegant solutions with the vertical rhythm still intact. And when done properly, <strong>vertical website layouts can be affluent with content and design taste<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/18-riot-industries-portfolio-phil-renaud.jpg\" alt=\"Riot Industries vertical navigation menu links website layout\" width=\"500\" height=\"350\"><\/figure>\n<p>The portfolio on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/riotindustries.com\/\">Riot Industries<\/a> is a great example for newer web designers. Check out how the navigation links work and how the portfolio entries are dynamic on hover effects. Also, the border textures really show a dividing line between the left and right columns.<\/p>\n<p>This textured effect is apparent in other vertical layouts as well, such as the CSS gallery <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.designbombs.com\/\">Design Bombs<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/19-designbombs-vertical-layout-webpage-design.jpg\" alt=\"DesignBombs css website layout gallery vertical links\" width=\"500\" height=\"350\"><\/figure>\n<h2>19. Single-Page Web Design<\/h2>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/beautiful-creative-single-page-portfolio-websites\/\">Single page design<\/a> 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.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/20-cageapp-single-webpage-layout-screenshot.jpg\" alt=\"Cage App website single page layout design\" width=\"500\" height=\"350\"><\/figure>\n<p>I think the website design for <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cageapp.com\/\">Cage App<\/a> 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.<\/p>\n<p>Plus as you scroll down the page, the navigation bar actually stays fixed at the top of your window. Incorporating other popular design trends into a single-page layout is one solution for <strong>drawing attention from visitors and making one captivating website design<\/strong>.<\/p>\n<h2>20. Circular Design Elements<\/h2>\n<p>The trend of <strong>circles within website layouts<\/strong> is something newer and has been given a lot of attention recently. Designers like circles because they are <strong>clean, neat, and generally fit into any layout block<\/strong>. You can <strong>build patterns and even fix your page elements into circular designs<\/strong> (eg. user avatars, share buttons, post dates, etc).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/21-lucia-soto-freelance-portfolio-circles-website.jpg\" alt=\"Lucia Soto freelance design portfolio circular website designs\" width=\"500\" height=\"350\"><\/figure>\n<p>The portfolio of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/luciasoto.es\/\">Lucia Soto<\/a> 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 <strong>they ooze uniqueness<\/strong>.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>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.<\/p>\n<p>I hope you may consider some of these ideas and think about how they do affect modern day websites. You can find examples of these emerging trends, in smaller businesses to global companies and all other websites in-between. If you are thinking ahead of the curve and want to share some insight on design trends in 2013, just drop a comment in our post discussion area.<\/p>","protected":false},"excerpt":{"rendered":"<p>All throughout 2012 there was an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012. Now we can see many of these ideas have come to fruition, and even adopted further increasing levels of novelty. In this article, I would like to&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2066,4577,510],"topic":[4520,4523],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Hottest Trends To Watch Out For in 2013 - Hongkiat<\/title>\n<meta name=\"description\" content=\"All throughout 2012 there was an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Hottest Trends To Watch Out For in 2013\" \/>\n<meta property=\"og:description\" content=\"All throughout 2012 there was an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-02T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:44:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/01-pixelcloud-website-responsive-mobile-iphone.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"20 Hottest Trends To Watch Out For in 2013\",\"datePublished\":\"2013-01-02T13:01:34+00:00\",\"dateModified\":\"2025-04-21T11:44:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/\"},\"wordCount\":2843,\"commentCount\":168,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2013\\\/01-pixelcloud-website-responsive-mobile-iphone.jpg\",\"keywords\":[\"Responsive Web Design\",\"Web Design Trends\",\"Web Designers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/\",\"name\":\"20 Hottest Trends To Watch Out For in 2013 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2013\\\/01-pixelcloud-website-responsive-mobile-iphone.jpg\",\"datePublished\":\"2013-01-02T13:01:34+00:00\",\"dateModified\":\"2025-04-21T11:44:11+00:00\",\"description\":\"All throughout 2012 there was an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2013\\\/01-pixelcloud-website-responsive-mobile-iphone.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2013\\\/01-pixelcloud-website-responsive-mobile-iphone.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2013\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Hottest Trends To Watch Out For in 2013\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Hottest Trends To Watch Out For in 2013 - Hongkiat","description":"All throughout 2012 there was an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/","og_locale":"en_US","og_type":"article","og_title":"20 Hottest Trends To Watch Out For in 2013","og_description":"All throughout 2012 there was an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012.","og_url":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-01-02T13:01:34+00:00","article_modified_time":"2025-04-21T11:44:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/01-pixelcloud-website-responsive-mobile-iphone.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"20 Hottest Trends To Watch Out For in 2013","datePublished":"2013-01-02T13:01:34+00:00","dateModified":"2025-04-21T11:44:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/"},"wordCount":2843,"commentCount":168,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/01-pixelcloud-website-responsive-mobile-iphone.jpg","keywords":["Responsive Web Design","Web Design Trends","Web Designers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/","url":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/","name":"20 Hottest Trends To Watch Out For in 2013 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/01-pixelcloud-website-responsive-mobile-iphone.jpg","datePublished":"2013-01-02T13:01:34+00:00","dateModified":"2025-04-21T11:44:11+00:00","description":"All throughout 2012 there was an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/01-pixelcloud-website-responsive-mobile-iphone.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2013\/01-pixelcloud-website-responsive-mobile-iphone.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Hottest Trends To Watch Out For in 2013"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-49t","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15963"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15963\/revisions"}],"predecessor-version":[{"id":73983,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15963\/revisions\/73983"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15963"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}