20+ Great Tools, Products, and Inspiration for Unique Web and Design Layouts

by in Toolkits on 7th Nov 2012 · 0 Comment

There needs to be consistency to some extent across the web as it allows for a better user experience and makes the web as a whole easier to use. This may be why we always tend to use the same layouts for our designs, over and over again. Even though there is a positive side to doing so, working with the same layouts for each project can get boring fast.

20 Great Tools, Products, and More for Coming Up with Unique Web and Design Layouts

Useful Resources for Unique Web and Design Layouts

There are some great ways implement consistency while still being original though. Evolving new layouts is part of the evolution of the web, and we may also be able to create better usability with a bit of experimentation. In this article, we've collected 20 tools, techniques, and inspirations for coming up with unique design layouts.

Learn by Example – Showcases

Showcases and galleries are probably the most common way to gain web design inspiration, and there's no shame in that. It can become a problem if one is simply copying – and showcases can surely diminish originality if used the wrong way. Use showcases and web design galleries in a positive way, pay attention to structure, layout, and also think of ways to bend the ideas into your own, both from a layout and aesthetic perspective.

40 Creative Design Layouts: Getting Out Of The Box
Here we have a great collection of forty design layouts that break outside of the standard way of thinking. If you're looking to break the bold, here may be a great place to find some inspiration.

40 Creative Design Layouts - Getting Out Of The Box

10 Rock Solid Website Layout Examples
If you're having a creative block when coming up with a layout, this article can help. It goes over ten common layout practices that are being used everyday, which can be twisted into more creative and original layouts as well. This showcase can offer up a nice starting point for any design.

10 Rock Solid Website Layout Examples

20 Excellent Website Layouts Ideas
These twenty examples span a wide variety of options, some more common than others. This showcase features layouts that can cover a lot of content, or can be used as ideas for simpler websites.

20 Excellent Website Layout Ideas

32 Examples of Usable Mobile Website Layouts
Mobile design layouts can be tricky with not as much space to work with. It may seem like we can't be as creative with mobile layouts, because we can't afford to be space-wise. This should be all the more reason to be creative with layouts though. This showcase is a great starting point.

32 Examples of Usable Mobile Website Layouts

40 Examples of Brilliant Responsive Website Layouts
Responsive design contains many layouts into one. It can be difficult to think of new ways to incorporate an initial layout that folds into other smart and usable layouts as a browser expands or contracts in size. A showcase like this is a great place to start for some ideas.

40 Examples of Brilliant Responsive Website Layout

Sketching Tools

Shying away from looking at others' work, sketching is a way to come up with unique ideas quickly and experiment with them as well. Sketching can also help clients to grasp an original layout idea before the design phase, and without other sources of reference to the unique layout. This is useful if you want to create a new layout concept that would be difficult to provide a non-creative client an example of.

Web Design Sketchbook
The Web Design Sketchbook contains 97 pages of gridded paper for easy sketching. There are two templates within the sketchbook, a full-page browser for detailed sketching, and a page of four smaller browsers for easy UI or responsive design sketching.

Web Design Sketchbook

Website Stencil Kit
Whether you just want cleaner looking icons for your web sketches because you need to impress a client, or because it helps you keep organized, these stencils can really come in handy. This stencil set contains a wide variety of the most commonly used web icons.

20 Great Tools, Products, and Inspiration for Unique Web and Design Layouts

Konigi Graph Paper
This printable sketching paper comes in a variety of templates, from mobile to desktop and also storyboard templates for thought-out UI design. There are also templates that have a space for notes that can help throughout the idea creation process.

Konigi Graph Paper

Mobile Sketchbook
This is a sketchbook dedicated to mobile design, whether that be mobile websites or apps. Since mobile can be the most difficult to layout, sketching is a great way to come up with innovative layout ideas.

Mobile Sketchbook

UX Sketchbook
The UX Sketchbook contains 50 double-sided pages for experimenting and planning web design layouts for a great user experience.

UX Sketchbook

Responsive Design Sketchbook
This gridded sketchbook contains a set of templates for working with the most popular viewports, and everything else in between. It's easy to create a responsive web design flow right on paper with this tool.

Responsive Design Sketchbook

Paper Browser
A simple sketchbook for web designers that doesn't get too distracting. This sketchbook contains nice proportions for sketching out templates in standard browser dimensions.

Paper Browser

Books

It can be nice to just have a hard copy of layout inspiration next to your desk to casually browse through. There are several publications that can help you to think outside the box (or stay within it when need be) when it comes to planning for website layouts.

The Web Designer's Idea Book: The Ultimate Guide To Themes, Trends & Styles In Website Design
Think of it as a web design showcase in book form. This small book is great for casually browsing to gain some inspiration.

The Web Designer's Idea Book

The Web Designer's Idea Book: Volume 2
Via the same author, this is part two of the Web Designer's Idea Book. This one has more ideas, a wider variety, and more up to date content for new ideas.

The Web Designer's Idea Book: Volume 2

Making and Breaking the Grid: A Graphic Design Layout Workshop
This book is not only a showcase but also instruction and guidance on when to work with the standard grid and when to break it, as well as how to do so for effective user communication.

Making and Breaking the Grid

Layout Index
Another layout showcase book, but this one includes print design as well that can be more creatively integrated into web design as well. Excerpts explain why particular layouts work and tips for implementing them on your own.

Layout Index

Outside Inspiration

If you're still in need of more originality or a creative kick-starter, try looking at the not-so-obvious sources of inspiration. It can be more difficult to come up with layout ideas that stem from outside web sources, but that only means the creative pay-off can be even greater.

Art
The primary difference between design and art is that design serves a purpose beyond portraying some meaning and inspiration. Good design's purpose is to communicate, and to create a better experience for the product's end user. This is why it can be difficult to draw purposeful design inspiration from art that is simply mean to inspire. However, it can be a great way to gain new ideas that can turn into usable design.

Art

The best part of drawing layout inspiration from art is that art comes in so many different forms. Explore some traditional media, and then actively think of ways to incorporate new layouts into your work. It's a great way to make design outside of the box, while still maintaining usability.

Print Design
There has been a major trend in print-style layouts in web design lately. When we think of the web, we often think of what's typical on the web, and what can be easily coded. However, this can really limit our ways of thinking about web layouts.

Print Design

Print design, though, can take on a wide variety of forms, shapes, spacing, and more. It's also already built to display consumable content in a useful and communicative way.

Real-Life Objects
At first going to real-life objects for layout inspiration may seem like a long stretch, but think about how many objects we deal with on a daily basis that have structure, balance, and interest. Some objects may be easier than others to use for inspiration, but keep an open mind.

Real-Life Objects

Perhaps its a set of windows in your home, or the calendar on your desk. Or, perhaps it's the way you've seen books laid out on a bookshelf. The possibilities are endless when using this inspiration source, it's just a matter of thinking creatively and keeping mindful of our surroundings to come up with some truly unique conclusions.

Software/Games/Non-Web
Take a look at the pre-designed layout of other types of interfaces as well. We don't always have to look at other websites or other print materials to gain inspiration. There are plenty of other tools we interact with every day that have thought out layouts that work. Think in terms of the software you use, a video game interface, or your favorite helpful application on your phone.

Software/Games/Non-Web

We use design every day, and we can learn a lot and break away from the standard layouts made for the web by implementing layouts from new sources.

Plugins

Grid Layout Shock
Grid Layout Shock is a responsive WordPress grid layout plugin.

Grid Layout Shock

Conclusion

Coming up with new layouts can be difficult, but it can also be an important step in continuing to create trends and even better user interfaces. Beyond that, doing the same thing for each new design can become boring, and focusing on a change in layouts can often times re-spark that creative interest in our websites.

What sources of inspiration do you use when trying to focus on creating new layout ideas, either for the web or print? What do you think the importance of coming up with new original ideas is?

Kayla Knight is freelance web designer and developer with several years of experience. In her spare time she enjoys the busy college life, and writes for some top design blogs.