{"id":10931,"date":"2012-01-02T21:01:27","date_gmt":"2012-01-02T13:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10931"},"modified":"2025-04-21T19:37:03","modified_gmt":"2025-04-21T11:37:03","slug":"web-design-trend-2012","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/","title":{"rendered":"15 Web Design Trends to Watch Out For in 2012"},"content":{"rendered":"<p>So far, the year 2011 has brought some amazing changes in design and Internet technology. Web development has become a much smoother subject to learn, not to mention the countless open-source libraries useful in streamlining the process. And yet, it seems the global design community is far from throwing in the towel.<\/p>\n<p>I want to introduce 15 ideas that have grown very rapidly over the past year. These trends encompass web and <a href=\"https:\/\/www.hongkiat.com\/blog\/cheatsheet-graphic-designers\/\">graphic design<\/a> techniques which will likely play a big role moving into 2012. You have probably seen a few of these represented throughout many of your favorite sites online.<\/p>\n<p>Thankfully, the methods to implement these features are becoming easier to understand and much slimmer in code.<\/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 Interface Design<\/h2>\n<p>The average user\u2019s experience is possibly the most important aspect to consider when designing a website.<\/p>\n<p>You want page elements to respond quickly to keyboard\/mouse input and behave as expected. Some examples may include side fly-out menus, drop-down boxes, and popup windows.<\/p>\n<p>Including famous JavaScript libraries such as MooTools and jQuery, it has become much easier to animate these features and more. Most modern-day browsers support this code and even gracefully degrade when the scripts aren\u2019t available.<\/p>\n<p>Ultimately, you want to make the user feel comfortable when interacting with any part of the design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/bill-gates-foundation-flyout-menu.jpg\" alt=\"Bill Gates Foundation navigation menu\" width=\"580\" height=\"310\"><\/figure>\n<p>Similarly, you should take form input and data checking into consideration. On many <a href=\"https:\/\/www.hongkiat.com\/blog\/login-registration-form\/\">registration pages<\/a>, you\u2019ll receive small responses as you work through each input area.<\/p>\n<p>You can automate checking for valid email addresses, duplicate usernames, and even double-check password inputs. This will save time on the user\u2019s end and provides a handy guide throughout the signup process.<\/p>\n<h2>2. Touchscreen Mobile Devices<\/h2>\n<p>In the past couple of years, it has become evident that smartphones are gaining support among even non-tech enthusiasts. But only since 2011 have we seen an explosion of mobile sites and mobile-specific templates.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.lukew.com\/touch\/TouchGestureGuide.pdf\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/touch-gesture.jpg\" alt=\"Mobile touch gesture guide\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>The popularity of iPhone and iPad devices along with Android-powered phones means you will have visitors fully interacting with your pages through touch commands. This has to become a realistic consideration with every design mockup.<\/p>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/designing-for-mobile-devices\/\">Trends in<\/a> <a href=\"https:\/\/www.hongkiat.com\/blog\/mobile-web-design\/\">mobile web design<\/a> have shown that building an entirely separate mobile theme often provides the best results. In this way, you can keep all the dynamic content in place on your main layout while serving up a slimmed version of the site to mobile users.<\/p>\n<p>Who can say they honestly don\u2019t enjoy free downloads? Web designers have been sharing their content online for years, but only recently has this become a very popular trend among digital artists.<\/p>\n<p>There have been a few communities built specifically around offering free downloads for web and graphic designers.<\/p>\n<h2>4. HTML5 & CSS3 Standards<\/h2>\n<p>Both of these new design archetypes have accumulated an ever-growing following throughout 2011. Semantic web designers have been waiting years to churn out CSS-only designs rendering rounded corners and drop shadows.<\/p>\n<p>Additionally, the W3C has made a lot of headway in garnering support from the most popular browsers.<\/p>\n<p>I can only see good things for the future of <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/html\/\">HTML5<\/a>\/<a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS3<\/a> web development. Front-end designers are often overlooked in today\u2019s field, yet they serve such a great importance to the entire composition process.<\/p>\n<p>Try not to squeeze yourself into any set \u2018label\u2019 based on the techniques you know and practice daily. We offer a beginner\u2019s <a href=\"https:\/\/www.hongkiat.com\/blog\/building-html5-css-webpages\/\">how-to guide for HTML5\/CSS3 coding<\/a> if you feel the need to catch up.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.flickr.com\/photos\/kiwoo\/5597887432\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/html5-css3-for-web-designers.jpg\" alt=\"HTML5 CSS3 learning guide\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>Sticking with these new standards will also make developing in JavaScript and jQuery just that much easier.<\/p>\n<p>Developers have already been publishing and sharing their HTML5\/CSS3 project code online, and if things continue, we\u2019ll surely notice a whole lot more of this going into next year.<\/p>\n<h2>5. Ribbons and Banners<\/h2>\n<p>Although this design technique isn\u2019t exactly \u201cnew,\u201d it never truly broke through mainstream until just recently. You have probably seen examples of corner ribbons, banner navigation bars, and small ribbon badges.<\/p>\n<p>These trends have likely exploded because of the massive accumulation of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.google.com\/search?q=web+design+ribbon+photoshop+tutorial\">detailed tutorials<\/a> which can be found all through Google.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/ruby-robots-banner.jpg\" alt=\"Ruby Robots signup banner\" width=\"580\" height=\"310\"><\/figure>\n<p>Web designers are more competent these days in launching their own blogs to share information. Now, simple techniques can easily be passed around between designers to duplicate the most popular effects.<\/p>\n<p>There are even <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/365psd.com\/day\/339\/\">free PSDs<\/a> you can <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/365psd.com\/day\/2-162\/\">download<\/a> to save yourself the effort.<\/p>\n<h2>6. Premium WordPress Themes<\/h2>\n<p>The final release of WordPress 3.0 included a host of long-awaited features such as custom post types and unique article images. Yet, the most profound changes I have seen are coming from WordPress development shops which specialize in premium <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/wordpress-themes\/\">WP themes<\/a>.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.woothemes.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/woothemes-membership-home-page.jpg\" alt=\"WooThemes premium WordPress themes\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>After you purchase such a theme, the installation process is similar to any other. Yet, it\u2019s now possible to include custom plug-in functionality, child themes, new admin menus, and a whole bunch of other features right from within the theme!<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.woothemes.com\/\">WooThemes<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/go\/elegant\">ElegantThemes<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.rockettheme.com\/wordpress\">Rocket Themes<\/a> are a few brands which stand out to me above all the rest. Their quality is impeccable, and I feel their developers go above and beyond to create the best templates and most intuitive admin menus.<\/p>\n<p>Going into 2012, I can only imagine WordPress will become even easier to use. This means more high-quality themes to be released and more amazing blogs to be launched.<\/p>\n<h2>7. Online Magazines<\/h2>\n<p>Speaking about WordPress themes, we should also bring up the quickly-adopted <a href=\"https:\/\/www.hongkiat.com\/blog\/creating-and-running-a-profitable-online-magazine-part-i\/\">success of<\/a> <a href=\"https:\/\/www.hongkiat.com\/blog\/creating-and-running-a-profitable-online-magazine-part-ii\/\">online magazines<\/a>. These websites are not so different from any generic WordPress blog aside from the general structure and page layout.<\/p>\n<p>You can spot these larger mags by the sheer presentation of their home page and collection of authors writing for the site.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mashable.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/mashable-online-magazine-layout.jpg\" alt=\"Mashable magazine layout\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>As magazines begin moving online, they will become a source of income for many writers. Granted, a topic such as \u2018web design\u2019 targets a smaller niche than, say, gaming or economics.<\/p>\n<p>But the fact that we\u2019re seeing more <a href=\"https:\/\/www.hongkiat.com\/blog\/42-free-online-magazines-for-designers\/\">design magazines online<\/a> than print goes to show where the world may be heading in the years to come.<\/p>\n<h2>8. Easy Drop Shadows<\/h2>\n<p>As a facet of CSS3, it\u2019s now easier than ever for designers to implement a drop shadow anywhere on the page. Box text and box-style elements have been given respective properties to render clear-cut shadow effects.<\/p>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.css3.info\/preview\/text-shadow\/\">text-shadow syntax<\/a> is very easy to memorize and follows along as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.css3.info\/preview\/box-shadow\/\">box-shadow<\/a>. With images now unnecessary in rendering these effects, web developers can focus on expanding these basic ideas further.<\/p>\n<h2>9. Dynamic Typography<\/h2>\n<p>Fonts are a big part of the sphere encompassing web design tradition. The most notable fonts including Arial, Helvetica, Georgia, and Trebuchet MS have been around for years now. Although they continue to serve a deep purpose in web standards, there are plenty of alternate options for advanced <a href=\"https:\/\/www.hongkiat.com\/blog\/showcase-web-design-beautiful-typography\/\">webpage typography<\/a>.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.adobe.com\/\">Typekit<\/a>, for example, only requires a couple of lines of code to be included in your document head. After this, you can specify which font names to include and append them into your CSS.<\/p>\n<p>The best part about this technique is that it relies mostly on JavaScript, so the end user isn\u2019t required to have the fonts installed.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/google-web-fonts-display.jpg\" alt=\"Google Web Fonts interface\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>Another alternative is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\">Google Web Fonts<\/a>, which behaves in a similar manner to Typekit. I recommend interested designers to check out <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webdesignerwall.com\/tutorials\/css3-font-face-design-guide\">CSS3\u2019s @font-face<\/a> media query, as you are given much more creativity. This code can be used to import a <code>.ttf<\/code> or <code>.otf<\/code> font file from your web server and include it as a usable stylesheet font! With so many alternate systems used for building dynamic fonts, I\u2019m expecting 2012 to hold a surge of innovation and design talent in this area.<\/p>\n<h2>10. Image Gallery Slideshows<\/h2>\n<p>With the subsequent popularity of jQuery, I have spotted more and more <a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-image-galleries-sliders-best-of\/\">image slideshows<\/a> being dropped into web layouts. Galleries are perfect for demonstrating a quick glimpse of inner-page content. This could be a set of portfolio entries, photographs, <a href=\"https:\/\/www.hongkiat.com\/blog\/photo-gallery-slideshow-wordpress-plugins\/\">blog posts<\/a> with featured images, demo screenshots, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/hello-themes-magneto-slideshow.jpg\" alt=\"Hello Themes Magento slideshow\" width=\"580\" height=\"310\"><\/figure>\n<p>When you consider the many unique sliding and fading animations, it has never been easier to construct a quick slideshow for your home page. I\u2019m confident that 2012 will see an uptick in these trends, and not just between designers.<\/p>\n<p>Online web applications and software companies have been using slideshows as guided tutorials to display screenshots and unique features.<\/p>\n<h2>11. Modal Popup Boxes<\/h2>\n<p>I feel that modal boxes are still fairly new to the Internet, considering they\u2019ve been appearing in desktop software and mobile apps for years. The purpose of a modal window is to offer box content (such as user registration or login) on top of the current page without loading onto a new one.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/digg.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/digg-login-form-modal.jpg\" alt=\"Digg login modal box\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>Many of the open-source image gallery scripts use a type of lightbox effect where the background fades darker than the popup box. I really enjoy this feature whenever I see it, although it has yet to be adopted by many.<\/p>\n<p>And although modal boxes are sexy and sleek, they can also be very difficult to code and get working properly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/googleplus-modal-popup-box.jpg\" alt=\"Google+ circles modal\" width=\"580\" height=\"310\"><\/figure>\n<p>To get ideas for your own websites, check out some of the more popular social news sharing communities. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.reddit.com\/\">Reddit<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/digg.com\/\">Digg<\/a> are the first two which come to mind as they both feature register\/login modal boxes with a typical layout. Additionally, the UI effects for Google+ boast a considerable amount of modal functionality.<\/p>\n<h2>12. Inspirational Lists<\/h2>\n<p>Collections of list items have appeared since the very early days of web design. As we moved into the new century, designers began using HTML ordered and unordered lists to house navigation menus. But nowadays, lists can and are being used for much more.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.getflow.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/flowapp-lists-todo-format.jpg\" alt=\"Flowapp todo list interface\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>In most of the blog themes I find, the entire sidebar is loaded with lists! Not to mention designers who have crafted awesome CSS styles for lists in their article entries.<\/p>\n<p>We covered <a href=\"https:\/\/www.hongkiat.com\/blog\/html-lists-styling\/\">inspiring list styles<\/a> in another post earlier this year which may give you some more insight into the matter. Looking forward into 2012, I\u2019m expecting some really creative examples, possibly on par with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.getflow.com\/\">Flowapp\u2019s custom layout<\/a> for tasks & to-dos.<\/p>\n<h2>13. Generated Image Thumbnails<\/h2>\n<p>In the web universe, we can agree that content is king. But most designers will also agree that a page of blank text becomes boring real quickly. Images can add that extra spice if you know how to sprinkle them in gently. One such method is using dynamic thumbnails to provide previews for each page or article.<\/p>\n<p>Blogs today are continuing to adopt the featured image trend, so why not apply generated thumbnails into your theme as well? These often draw my attention towards the article headline and help to break up a page full of text links.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/dribbble-screenshot-thumbnails.jpg\" alt=\"Dribbble design thumbnails\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>As another example, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/\">Dribbble<\/a> provides a whole gallery listing of thumbnails for each design shot. In such a table row-style layout, it\u2019s super easy to catch a glimpse of each thumbnail and scroll through to find what you\u2019re looking for.<\/p>\n<p>This tactic has proven to grab the attention of the whole design community! Er, at least the members of Dribbble at best. I can only expect that 2012 will see further exertion of these ideas building upon such examples from the past.<\/p>\n<h2>14. Oversized Icons<\/h2>\n<p>This unique trend semi-originates from the popularity of Mac OS X icon designs. As programmers began to launch websites for their Mac applications, we all too frequently have seen the enormous sizes represented in branding.<\/p>\n<p>Accordingly, this trend has also been picked up through iOS developers and now comfortably rests within modern design culture.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.panic.com\/transmit\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/panic-transmit-app-icon.jpg\" alt=\"Transmit FTP app icon\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>It\u2019s difficult to predict how these trends will fare as we move into 2012. On the one hand, these icons can be clunky and take up more space than necessary.<\/p>\n<p>Yet, we\u2019re not even close to hitting a shortage of iOS\/OSX apps, and designers are still churning out pixel-perfect icon specs. Not to mention that web designers are now including oversized icons within just about any page branding! It\u2019s a good way to nab your visitor\u2019s direct attention and build a name for your company.<\/p>\n<h2>15. Exaggerated Hyperlinks<\/h2>\n<p>Anchor links are certainly within the top five most important elements of any website. These have obviously come a long way since the 1990s, and popular design trends have only been growing exponentially. It appears we are moving into an era where exaggerated design takes precedence.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/simplebits.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/simplebits-studio-links.jpg\" alt=\"SimpleBits website links\" width=\"580\" height=\"310\"><\/a><\/figure>\n<p>There are so many incredible ideas for hyperlink design, both in standard and hover effects. CSS3 rounded corners, text shadows, and custom font families add even more great ideas into the mix! One of my favorite examples is from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/simplebits.com\/\">SimpleBits<\/a>, which uses a short dynamic animation on each of their blog entry permalinks.<\/p>\n<h2>Conclusion<\/h2>\n<p>These ideas are only some of the more popular trends I have noticed gaining precedence throughout 2011.<\/p>\n<p>Great web design is always about focus and keeping user intentions as top priority. It\u2019s unlikely these philosophies will differ moving into 2012, but how we build layouts and present data is always in change. Let us know your thoughts or questions in the comments discussion area.<\/p>","protected":false},"excerpt":{"rendered":"<p>Discover the top web design trends of 2012. From responsive design to retro aesthetics, explore the innovations that defined the year in web design.<\/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":[3395,352],"tags":[4577,510],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>15 Web Design Trends to Watch Out For in 2012 - Hongkiat<\/title>\n<meta name=\"description\" content=\"Discover the top web design trends of 2012. From responsive design to retro aesthetics, explore the innovations that defined the year in web design.\" \/>\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-2012\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15 Web Design Trends to Watch Out For in 2012\" \/>\n<meta property=\"og:description\" content=\"Discover the top web design trends of 2012. From responsive design to retro aesthetics, explore the innovations that defined the year in web design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/\" \/>\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=\"2012-01-02T13:01:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:37:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/bill-gates-foundation-flyout-menu.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=\"15 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-2012\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"15 Web Design Trends to Watch Out For in 2012\",\"datePublished\":\"2012-01-02T13:01:27+00:00\",\"dateModified\":\"2025-04-21T11:37:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/\"},\"wordCount\":2128,\"commentCount\":82,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2012\\\/bill-gates-foundation-flyout-menu.jpg\",\"keywords\":[\"Web Design Trends\",\"Web Designers\"],\"articleSection\":[\"UI\\\/UX\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/\",\"name\":\"15 Web Design Trends to Watch Out For in 2012 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2012\\\/bill-gates-foundation-flyout-menu.jpg\",\"datePublished\":\"2012-01-02T13:01:27+00:00\",\"dateModified\":\"2025-04-21T11:37:03+00:00\",\"description\":\"Discover the top web design trends of 2012. From responsive design to retro aesthetics, explore the innovations that defined the year in web design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2012\\\/bill-gates-foundation-flyout-menu.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-design-trend-2012\\\/bill-gates-foundation-flyout-menu.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-design-trend-2012\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"15 Web Design Trends to Watch Out For in 2012\"}]},{\"@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":"15 Web Design Trends to Watch Out For in 2012 - Hongkiat","description":"Discover the top web design trends of 2012. From responsive design to retro aesthetics, explore the innovations that defined the year in web design.","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-2012\/","og_locale":"en_US","og_type":"article","og_title":"15 Web Design Trends to Watch Out For in 2012","og_description":"Discover the top web design trends of 2012. From responsive design to retro aesthetics, explore the innovations that defined the year in web design.","og_url":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-01-02T13:01:27+00:00","article_modified_time":"2025-04-21T11:37:03+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/bill-gates-foundation-flyout-menu.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":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"15 Web Design Trends to Watch Out For in 2012","datePublished":"2012-01-02T13:01:27+00:00","dateModified":"2025-04-21T11:37:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/"},"wordCount":2128,"commentCount":82,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/bill-gates-foundation-flyout-menu.jpg","keywords":["Web Design Trends","Web Designers"],"articleSection":["UI\/UX","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/","url":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/","name":"15 Web Design Trends to Watch Out For in 2012 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/bill-gates-foundation-flyout-menu.jpg","datePublished":"2012-01-02T13:01:27+00:00","dateModified":"2025-04-21T11:37:03+00:00","description":"Discover the top web design trends of 2012. From responsive design to retro aesthetics, explore the innovations that defined the year in web design.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/bill-gates-foundation-flyout-menu.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-design-trend-2012\/bill-gates-foundation-flyout-menu.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"15 Web Design Trends to Watch Out For in 2012"}]},{"@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-2Qj","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10931","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=10931"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10931\/revisions"}],"predecessor-version":[{"id":73966,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10931\/revisions\/73966"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=10931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=10931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=10931"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=10931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}