Patrick McNeil - The Web Designers Idea Book, Volume 3: Inspiration from Todays Best Web Design Trends, Themes and Styles

For Angela, Jack and Maizy.

Pretty much anytime you wrap up a huge project that youre passionate about, you feel a bit like celebrating. Like when you finish remodeling a house, or when you build a wooden rocking chair for your new baby boy, or when you finally launch a new pet project. Finishing a book is very much like this, and with each new book I manage to wrap up I can hardly believe where I am in life. Writing these Idea Books is about as much fun as I can imagine having at work. I get to sift through thousands of amazing designs, meet many new people and ultimately obsess over the web design industry. To say I am fortunate to be in this role is a vast understatement.

Gushing emotions aside, it truly is fun to see a book like this come together. With each new volumeand a greater history to look back onit becomes more and more evident how far the industry has come. Each year the industry grows and refines itself further. The quality of design improves, the quantity of great design increases and the sense of community grows stronger. This is what makes the web so special; at the end of the day we are all working together in a complex interchange of ideas, tools and clients. And it is my hope that this book captures a snapshot of the web as it existed in 2012.

One of the biggest hurdles I faced in writing this book is that with each new book, the base of people interested in submitting their work grows. This is obviously a good thing, but it also means I have to pass on more and more work because of limited space. This means hundredsperhaps thousandsof gorgeous sites I would love to include simply wont fit.

What really inspires me when writing this book series is the amazing designers. For every artist who is in the limelight and whose name many of us recognize, there are a hundred others lurking in the shadows and cranking out incredible work. Many havent found their way into the spotlight; others dont want to. I take joy in finding some of these designers who run below the radar. I am frequently delighted to discover that the designer behind a site I love is also behind five others I love as well. It is the work of these unsung heroes that I most love to showcase. Sure, some works you find here come from some very well-known people, but for the most part, you probably have not seen most of the material. I think this is what makes my Idea Books extra special; they offer a fresh set of inspiration rather than the same huge names we all know about.

Patrick McNeil

One of the reasons many people (myself included) love the web is because it so perfectly combines technology and design. And while technology has always had an impact on design, I believe we are currently experiencing a situation in which many technologies come together and force massive shifts in the industry. The result is a major change in web design styles, trends and techniques.

Consider the following technologies:

• the explosion of new devices (tablets, smartphones, and so forth)
• the progress of responsive designs and development techniques
• refinements in using custom type online
• the introduction of CSS3 and HTML5
• refinements in many content management systems

With all of these areas moving together at once, we can clearly see how the face of the web is changing; in fact, we see it firsthand each day as we use the web. The industry is in a time of increased flux and along with this comes many new design patterns. What I find fascinating is how they interconnect. Each of these technologies has pushed the industry along, but it is the combination of all these things that have become the collective catalyst for change; a perfect storm if you will.

A prime example of this is responsive design. With responsive design, the goal is to have a website adapt to the users device and function in an ideal way in each situation. If I view the site on a PC, smartphone or tablet, I basically get a tailored experience for that device. This is primarily accomplished by developing style sheets for each potential layout. As it turns out, with CSS3 we can apply many more visual styles in code, something that was previously accomplished with images. This is rather convenient when we are applying style variations, such as drop shadows, rounded corners or gradients to the same set of elements. Combine this with improvements like the support for multiple backgrounds on one element, which means the HTML is simpler and easier to manage, which reduces the complexity dramatically and really helps when were creating multiple versions of a page via CSS. Then add to the top of this far greater support for custom type in a page via CSS. Now its far easier to embed text in a page, reducing the need for things like image-based text or plug-ins that render custom type in a flash (sIFR). I know this is a lot to process, but I want you to see that it is all woven together into a perfect storm. Each piece contributes to the overall evolution of the process, with the result being rather dramatic change in a much shorter time span then we normally experience. To be sure, the web is in perpetual motion, but for the last few years it has been moving at warp speed.

Lets dig in and look at a variety of technologies that have shaped the web as we find it today. And, of course, along the way we will look at a ton of beautiful designs that demonstrate some of the potential uses of these technologies. While it is not the goal of this book to be a technical manual, I will also provide a brief introduction to each of these topics in case youre not acclimated to them. Ultimately, though, we are here to observe the beautiful designs in an effort to spark ideas and inspire you.

A critical part of the web is the use of content management systems (CMS for short). This technology has had a profound impact on the cost and process of getting content online. And while these systems have been around for a long time, in recent years they have reached a truly amazing point.

A CMS allows many people to manage and publish content to a website. At the heart of every CMS is a system for creating page templates. Users of the system populate it with content through an interface streamlined for data and content entry. Then, when the site is displayed for users on the web, the templates and content are merged and result in the output of the actual site. This means the content management is isolated from the structural bits allowing almost anyone to publish content once a site is set up (think WordPress for example).