Two weeks ago, Six Revisions and All Modern, a retailer of home and office goods, announced a giveaway to revamp one lucky winner’s workspace with beautiful and elegant items designed by Blomus.

Many people participated (over a hundred), providing their wonderful thoughts and opinions about their own workspaces.

Today, I’m happy to announce the lucky winner of this giveaway.

The Winner

The winner of the Revamp Your Workspace Giveaway is:

• Kate

Screenshot

Winners were selected via a MySQL query in the same method as previous contests. The following is a screen grab of the results.

Thank You

I’d like to thank All Modern for providing the prizes and working with Six Revisions to host this excellent giveaway.

More Giveaways on the Way!

Make sure to stay tuned for more fun and useful giveaways here on Six Revisions. The best way to be notified when a giveaway is posted is by subscribing to the Six Revisions RSS feed.

Related content

• Banner Design Application + WordPress Themes Giveaway
• Announcement: Billings 3 License Winners
• Announcement: Warm Forest Aspen Flash Template Winners
• Related category: Freebies

In this showcase, you will see a few excellent examples of beautiful web designs which we hope will help inspire you.

1. 45Royale

2. 84 Colors

3. Ali Felski

4. Andrew Reff

5. Artifice Studios

6. Chris Spooner

7. Dale Harris

8. Darren Hoyt

9. Design Hippy

10. Drew Wilson

11. Finch

12. Helen Guttridge

13. Joe Lifrieri

14. Jason Santa Maria

15. Joseph Szilagyi

16. Meta Lab

17. Numan Cebi

18. Nyokiglitter

19. Paul Noble

20. Paula Solanoy

21. Rawkes

22. Reformata

23. Ritchie Linao

24. Zigpress

25. Daniel Oliver

Related content

• 40 Excellent Blog Designs
• 30 Fresh and Promising Design Blogs to Follow
• 30 Beautifully Blue Web Designs
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Thomas Hardy is a freelance web designer from Newcastle upon Tyne (UK), here is his portfolio. He founded Web Designer Help and Swick, where he regularly blogs. You will also find him on Twitter and Facebook.

Most of the lessons you’ll learn in web design comes from work experience; learning is an iterative process and there is no better way to gain knowledge than to make mistakes (and then and learning from them).

In this article, we discuss 10 essential and general tips that every novice web designer should know.

1. Optimize Web Graphics for Better Page Load Times

Learn how to optimize your web graphics by selecting the proper format and making sure that it’s as small as it can possibly be. Even though people are advancing to broadband connections, there are still quite a few who use dial-up internet connections. Additionally, with the emergence of mobile device technologies that don’t necessarily have broadband-like speeds, having slow page load times due to image file sizes can turn users off.

Here a general rule of thumbs for picking the right file format: images that have solid colors are best saved as PNGs and GIFs, while images with continuous colors (such as photographs) are best saved as JPGs.

There are plenty of tools available at your disposal that will help you further optimize your images and lower their file sizes, check out this list of tools for optimizing your images.

By limiting the number of images you use to the bare minimum, being smart about using images, and reducing file sizes as best as you can, you will significantly cut down page response times of  a web page and improve your web page performance.

2. Keep it Clean and Simple

A good web design is not just one that looks visually appealing, but also one that is user-friendly. A clean and simple web design typically ends up being a high-usability web design that is not confusing to interact with.

By having too many site features and components on a page, you risk the chance of distracting website viewers from the purpose of the website. Make sure each page element has a purpose and ask yourself the following questions:

• Does the design really need this?
• What does this element do and how does it help the user?
• If I remove this element all of a sudden, will most people want it back?
• How does this element tie into the goal, message, and purpose of the site?

Additionally, though it may be super awesome to come up with a new concept or interface design pattern for your website, make sure that the design is still accessible and intuitive to your users. People are accustomed to common interaction patterns, site features, and web interfaces - and if your design is truly unique, make sure it’s not too obscure and puzzling. Be creative, but also keep it simple.

3. Navigation is the Most Important Thing You Will Design

The most essential site feature is the website’s navigation — without it, users are stuck whatever page they happen to land on. With that obvious fact out of the way, we’ll talk about some important points to consider when constructing a navigation scheme.

First, it’s very important to put enough time and a lot of planning on a site’s navigation structure. This is common sense, but it’s still surprising how many web designs take site navigation for granted.

Placement, style, technology (will it use JavaScript or just CSS?), usability, and web accessibility are just some of the things you need to consider when creating the navigation design.

Your navigation design should work without CSS because of text-based browsers. Poke fun of text browsers all you want, but they are still prevalent in many mobile devices. Perhaps more importantly, navigation that works with CSS disabled is accessible (99.99% of the time) via screen readers.

Navigation should be accessible and usable without the need for client-side technologies such as JavaScript or Flash, which users may not have enabled or installed for various reasons such as security or company policy.

It is imperative that you have a good navigation system in place that is located at a highly-visible location. A good navigation is detectable as soon as the web page loads without having to scroll down the web page. This is where keeping it clean and simple plays a major role: a complex and unconventional design can lead to user confusion.

Users must never wonder, even for a split second, "Where is the site navigation?"

For sites organized in a hierarchical, multi-level manner, make sure that it is easy to navigate from between parent and child web pages. In addition, it should be easy to reach top-level pages (such as the site’s front page) from any webpage.

The main goal of your site navigation is to allow users to get to their desired content with as few actions and with as little effort on their behalf as possible.

4. Use Fonts Wisely and Methodically

Though there are thousands of fonts out there, you can really only use a handful (at least until CSS3 is fully supported by major browsers). Make it a point to stick to web-safe fonts. If you don’t like web-safe fonts, consider a progressively-enhanced web design that leverages sIFR or Cufon.

Keep font usage consistent. Make sure that headings are visually-different from paragraph text. Use white space, tweak line-height, font-size, and letter-spacing properties to make content pleasant to read and effortlessly scannable.

Perhaps one of the things that web designers often get wrong is font-sizes. Because we want to fit as much text as we can in a web page, we sometimes set font sizes to uncomfortably small sizes. Try to keep font sizes at and above 12px if possible, especially for paragraph text. While many people face no difficulty reading small text sizes, think about older users and persons with low-vision and other types of vision impairment.

5. Understand Color Accessibility

After talking about fonts, we also need to point out the importance of using the right colors.

You  need to consider color contrast of background and foreground colors for readability and for users with low-vision. For instance, black text on white background has a high-contrast, while orange text on red background will make you strain your eyes.

Also, use colors that are accessible to users with particular forms of color-blindness (check out a tool called Vischeck that will help you test for certain types of color-blindness).

Some color combinations work well only when the color is used as a foreground color instead of a background color. Take for example, dark blue text on a pink background versus but pink text on blue background, same colors but different levels of readability and reading comfort. It is important not only to get a good color combination but also to apply it to the right elements on the page.

6. You Need to Know How to Write Code Yourself

With various WYSIWYG editors flooding the market, it has become as simple as 1-2-3 to design a site. However, most of these editors insert unnecessarily code junk, making your HTML structure poorly designed, harder to maintain and update, and causing your file sizes to bloat.

By writing the code yourself, you come out with clean, crisp, and terse code that’s a pleasure to read and maintain; code that you can be proud to call your own.

Knowing how to use a WYSIWYG or an IDE with a visual preview does not excuse you from learning HTML and CSS. You have to know what’s going on in order to create effective, semantic, and highly-optimized web designs.

7. Don’t Forget Search Engine Optimization

A good designer should always remember to keep the basics of SEO in mind when designing a site. For example, structuring web content so that important text are represented as headings (i.e. page title and logo). This is where learning how to code properly comes in handy. Knowing correct, semantic, and standards-based HTML/CSS - you will quickly realize that divs are better than tables for web layouts not only for accurate representation of site content, but also for search engine rankings; you will also know that CSS background text image replacement is a good idea.

8. Understand that People are Impatient

People on an average spend only a few seconds before deciding whether they want to read more or navigate away to another site. Therefore, you as a web designer have to device a way for encouraging users to choose the former option within those precious seconds.

Know that not many visitors will scroll down to view the entire contents of the page if what they see at the top does not interest them. Remember to keep your important elements on the top where they are easily visible, but also do not overcrowd the top half of the page which can intimidate users and turn them off from reading further down the page. Consider the top half of a web design a selling point: be a salesman, make people buy into the notion that they want to see what else is on your site.

9. Learn About (and Be Aware of) Browser Quirks

One of the things you must know as a web designer is that your work operates in a finicky and unpredictable environment: web browsers. It’s not enough that your designs work on a few web browsers, they need to work in as many browsing situations as you can possibly afford. Before production - test your prototypes using tools like Browsershots.

10. Make Designs that are Flexible and Maintainable

A good web designer makes sure that the site can easily be updated or modified in the future. Designing websites that are malleable and easy to maintain is a sign of a great web designer. Make your work as modular as possible by separating style from structure.

Know that our industry is dynamic and still young - things change in a very short amount of time. Keeping this thought in mind will promote the creation of flexible web designs.

What are your web design tips?

If you have more tips to share to beginning web designers - kindly share them in the comments.

Related content

• Why Designers Should Learn How to Code
• How to Design for Your Worst Client: You.
• How to Stay Ahead of the Curve as a Designer
• Related categories: Web Design and Web Development

About the Author

John Urban is a sophmore at UCLA and currently majoring in computer science. He is a writer for an online magazine StyleCeo which deals with fashion. In his spare time, he enjoys sports, being with his girl, or just doing some freelance work. If you like his work on here and you’d like for him to work as a freelancer for you, you can contact him on Twitter.

Comments are now disabled. Stay tuned for the follow-up post announcing the winners.

Marketcircle, a company who won an Apple Design Award this year in WWDC09, has teamed up with Six Revisions to give away three packages of the Daylite 3 productivity suite bundled with the Daylite Touch.

For those unfamiliar with Daylite, it is a business productivity suite designed to help you manage your business and your team: project collaboration, shared calendars, task delegation, and sales tracking, you can do it all from within Daylite’s super intuitive interface. With the award-winning Daylite Touch iPhone app (which won a Macworld Best of Show award), you can do all of this from within your iPhone.

Three randomly selected lucky winners will win a full license of Daylite 3 AND a one-year subscription to Daylite Touch.

How to Participate

To participate, leave a comment about one of the following topics:

• How do you manage your business and schedule?
• What tips do you have for being more productive?
• What kind of hardware/software do you need in order to be productive?

Make sure to leave a valid email address when filling out the comment form because this is how we will contact you once you’ve won.

Giveaway Details

This giveaway will end on July 6, 2009 after which commenting on this post will be disabled. You can only participate once. Please don’t forget to put a valid email address in the comment form email field so that we can contact you if you’ve won.

About Marketcircle Inc.

Marketcircle Inc. develops award-winning business applications for Mac OS X and the iPhone, including Daylite business productivity management software, and Billings, a practical time-billing and invoicing application. Incorporated in 1999, Marketcircle Inc. is located in Toronto, Canada, with partners worldwide.

In this article, you will read about the top 10 JavaScript-based animation frameworks and libraries that will enable you to create engaging and captivating user experiences.

1. $fx

$fx is a compact and lightweight JavaScript animation library which extends native JavaScript DOM methods with its own animation methods and functions. Its small file size (weighing in at only 3.7 KB), hassle-free implementation, and low learning curve makes $fx a powerful option for adding eye-popping animation effects to your web projects. Check out the Examples section on the Manuals page to see the library in action.

2. jsAnim

Created by web developer Kevin Dolan, jsAnim is a JavaScript animation framework for creating high-impact and slick animation sequences for web interfaces. Crafted with standards and best practices in mind, jsAnim allows you to create stunning animation effects without sacrificing web accessibility of your web projects.

3. scripty2

scripty2 is a flexible and lightweight JavaScript animation framework for developing delicious visual effects. The project is still young (alpha), but you can already see its impressive capabilities in the scripty2 demo page which shows examples that rival Flash-based objects in smooth, seamless, and complex animations.

4. GX

GX, developed by Italian web developer Riccardo Degni, is a compact (10KB uncompressed animation effects library that puts strict web standards and best practices at the forefront of its development philosophy. Built on top of jQuery, but heavily influenced by MooTools development patterns, you can customize your GX download to include only the parts you need, making your scripts optimized for file size. Check out the GX Demos to see its capabilities.

5. Glimmer

Glimmer is a framework for easily creating interactive elements on your web pages. Glimmer comes with wizards GUIs, reducing your coding requirements and guaranteeing standardization across your projects. Check out the Image-Sequencer demo to see Glimmer’s animation capabilities. It’s written on top of the popular jQuery library.

6. Animator.js

Animator.js is a class-based way for implementing JavaScript-based animation effects. Its design and development principles follow OOAD, which promotes maintainable and high-lifetime development of applications. Thus, it syntax is prototypal and object-oriented, reminiscent of MooTools and Prototype.js syntax.

7. Scriptio

Scriptio is an open source framework for animation and presentational elements to enhance and enrich the learner’s web experience. Scriptio is easy to learn and its terse syntax makes it great for fast prototyping. View the Scriptio Examples page where you will find eight cool demos that exemplify this framework’s abilities.

8. Processing.js

Processing.js is a fully featured framework for scripting images, animation, and interaction developed by jQuery library creator, John Resig. Processing.js is a JavaScript port of the open source Processing project. You should check out the Exhibits page to see full-production implementations of Processing.js.

9. Run

For developers looking for a simple means of animating content, Run, a universal JavaScript animation framework, is the definitive way to go. Run emphasizes on ease-of-use as shown by its intuitive syntax and copious amounts of documentation. Run has also been tested on a wide array of web browsers, ensuring utmost cross-browser compatibility. Head over to Run’s Example page to see the project in action.

10. Burst Engine

Burst Engine is an open source vector animation framework for HTML 5’s Canvas element. Burst provides smooth, slick, and complex animations that will surely leave a memorable impression upon viewers. To see Burst in action, check out the 3D Engine demo (and prepare to get very impressed).

Related content

• 10 Promising JavaScript Frameworks
• Graphing/Charting Data on Web Pages: JavaScript Solutions
• JavaScript Debugging Techniques in IE 6
• Related categories: JavaScript and Web Development

There are many different types of headers, and in this collection, we’ll show you 25 beautiful header designs from various types of websites in the hopes of inspiring your creativity.

1. 61 Pixels

2. Abduzeebo

3. Ali Felski

4. Basmitree

5. British Space Organisation

6. Dev Thought

7. Ellis Lab

8. Jason Reed

9. Jayme

10. John Joubert

11. Marc Handdetrucs

12. By Marina

13. Mosaiko

14. Naldz Graphics

15. No Milk Today

16. One Button Mouse

17. Stephen Fry

18. That Indie Dude

19. The Great Bearded Reef

20. The Piss Biscuit

21. Tutorial9

22. Vectips

23. Web Burza

24. Web Designer Wall

25. XHTML IT

Related content

• 25 Stylish Examples of Web Forms
• 40 Beautiful Examples of Minimalism in Web Design
• 30 Beautiful Web Designs Inspired by Nature
• Related categories: Design Showcase / Inspiration and User Interface

About the Author

Thomas Hardy is a freelance web designer from Newcastle upon Tyne (UK), here is his portfolio. He founded Web Designer Help and Swick, where he regularly blogs. You will also find him on Twitter and Facebook.

In this showcase, you’ll be able to feast your eyes on over 30 stunning and amazing artwork centered on typography with the aim of jumpstarting your creative juices.

mos def lyric portrait

A Tribute to Yulia Brodskaya

Fact Magazine (cover typography)

Bad Typography is Everywhere

Soft type

Heist

Ink and Water Don’t Mix

typography whore

Love your body

BLACKOUT POSTER

Brown Fox

PINK PARTY FLYER

Things beginning with T

The world on a plate

Legotype

cim_organic

Colorcubic Experimental Prints

Posing for Typography

Typographic World Map

50 Motion Graphics Essentials

Type tips

ed

Belio Experiments

Estrella Levante Posters

MSCE 16/05/09 :: D.A.R.Y.L.

untitled

Bad Vibes

Love,love,love / Pattern

YEAH logo pattern

positive/negative

Empire

KDU

Smashing Pumpkins Poster

Related content

• 20 Websites with Beautiful Typography
• 45 Beautiful Free Fonts for Modern Design Trends
• 25 Excellent Typography Tools for the Serious Designer
• Related categories: Graphic Design and Design Showcase / Inspiration 

In this web design tutorial, you’ll learn how to create a professional web design with an illustrated "vector" header in Photoshop. You’ll see many techniques here including how to draw using the Pen Tool and a excellent type treatment using layer styles.

Final Result

To view the finished product, click on the following image to see the full-scale version.

Setting Up the Photoshop Document

1 Open up Photoshop, create a new document that is 950 pixels by 1280 pixels and with a white background (#FFFFFF).

Creating the Header Section Background

2 Select the Rectangular Marquee Tool (M) and create a rectangular selection across the top part of the canvas. The height of the rectangle should be around 170-190 pixels.

3 Set the foreground color to #49B0D9 and the background color to #BCE2EF and then select the Gradient Tool (G) with the Linear Gradient option. Drag the linear gradient from the top of the selection downwards to create the linear gradient in the rectangular selection.

Drawing the Mountain Range in the Header

4 Create a new layer. With the Pen Tool (P), begin to make a mountain backdrop (see the figure below); try to keep the mountains proportional to each other. Once you’ve created the mountain range, right-click on the mountain range drawing and select "Make Selection…" to convert the pen path to a selection.

5 Fill the mountain range selection with any color, double-click on its layer to open up the Layer Styles dialog box, and then add the layer styles shown in the following figures.

Your mountains should look something like this:

6 On the highest two mountain peaks, create a random selection over the tops of the mountains using the Lasso Tool (L).

7 Fill the selections with a white color (#FFFFFF), double-click on the layer to open up the Layer Styles dialog box, and then add a Stroke layer style following the settings on the following figure.

You should have something like this:

Drawing the Grassy Area in the Header

8 Create a new layer. Make a selection underneath your mountains using the Rectangular Marquee Tool (M). The selection should be no more than about 100px in height.

9 Set your foreground color to #8AA426 and your background color to #6F841F. Use the Gradient Tool (G) with the Linear Gradient option to drag a linear gradient from the top of the selection down to the bottom of the selection.

10 Add some noise using Filter > Noise > Add Noise.

You should have something like this:

Drawing Hills in the Header

11 Create a new layer. Using the Pen Tool (P), create a small "hump" somewhere on the grassy area; this will be one of our hills. Once the small hump/hill has been drawn, right-click on the path, and choose "Make a Selection…" to covert the pen path to a selection, and then fill in the selection with any color.

12 Add a Gradient Overlay by double-clicking on the layer to open up the Layer Styles dialog box using the settings in the following figure.

You should have something like this:

13 Select the hump/hill by holding down CTRL and clicking on the hump/hill layer. Add a stroke to the hump/hill selection, Edit > Stroke…, using the settings in the following figure.

14 Now, delete the flat bottom part of the hump/hill by using the Rectangular Marquee Tool (M), making a selection along the flat edge at the bottom, and then using Edit > Clear or pressing the Delete key.

15 Repeat the previous steps (Steps 11 - 14) but this time, don’t add the stroke (in Step 13).

Drawing the Clouds in the Header

16 We are now going to add some clouds to our sky area. Create a new layer. Use the Elliptical Marquee Tool to create a circle somewhere above the mountains, around the sky area.

17 Add to your selection by holding down the SHIFT key and drawing another circle, making sure that both circles overlap. Repeat this process until you have a shape that resembles a cloud.

18 Fill the selection with a white color (#FFFFFF) and then apply the following layer styles.

19 Repeat the Steps 16 - 18 to create as many clouds as you want. Try to experiment with the Layer Opacity to add a bit of depth to the clouds.

Your clouds should now look like this:

Applying a Nice Text Treatment for the Website Title

20 Using the Horizontal Type Tool (T), add your website’s title on the top left corner of the canvas - this will serve as our site’s title/logo. Feel free to use whatever font settings you wish, but the tutorial uses "Verdana" with a font size of 26pt.

21 Add the following layer styles to website title text layer.

Your website title should look something like this:

Creating the Navigation Bar

22 Create a new layer. Using the Rectangular Marquee Tool (M), make a selection at the bottom of your grassy area. Make sure that the selection slightly overlaps the grassy area.

23 Fill the selection with any color then add the following Gradient Overlay layer styles in the following figures.

24 Using the Horizontal Type Tool (T), add your navigation links to the navigation bar.

Creating the Content Area and Content Boxes

25 Create a new layer. Using the Rectangular Marquee Tool (M), make a selection underneath your navigation all the way down to the very bottom of the canvas. Fill the selection with a white color (#FFFFFF) then add the following layer styles.

You should have something like this:

26 The stroke you just added should be visible underneath the navigation bar, if it’s not, use the Move Tool (V) to move the background down until it appears. The stroke should be directly underneath the navigation. Use the Zoom Tool (Z) to zoom in to the stroke underneath the navigation bar. Use the Rectangular Marquee Tool (M) or the Single Row Marquee Tool to make a 1px selection right below the stroke underneath the navigation. Fill that 1-pixel selection with a white color (#FFFFFF).

27 Using the Rounded Rectangle Tool with a radius set to 15px.

Underneath the navigation bar, create a rounded rectangle shape and draw out a rounded rectangle. Set the color of the shape to a white color (#FFFFFF) and then add then add a 1px stroke using the color #D3D3D3.

28 With the Rectangular Marquee Tool (M), make a selection over the top half of your rounded rectangle shape. Fill the selection with white color (#FFFFFF).

29 Load a selection around the rounded rectangle shape by holding down CTRL and clicking on the rounded rectangle layer.

30 Make the white rectangle layer from Step 28 the active layer, and then make an inverse selection, Select > Inverse (Shift + Ctrl + I). Delete the stuff beneath the inverse selection, Edit > Clear or by pressing the Delete key.

31 Where the vertical linear gradient ends, we need to add a gray border at the bottom. Create a new layer. Using the Rectangular Marquee Tool (M), create a 1px horizontal line across the content box and then fill the selection with a color of #D6D6D6, Edit > Fill… (Shift + F5).

32 Repeat the Steps 25 - 31 to create more content boxes as needed.

33 As an added touch, fill your content boxes with dummy content and pictures.

Creating the Footer

34 Duplicate your grassy area layer. Move it to the bottom of the canvas using the Move Tool (V).

35 Resize the height of the footer with Edit > Free Transform (Ctrl + T), and resizing the grassy area by dragging the transform controls, leaving a 1px gap at the top of the footer area.

36 Create a 1px line all the way across the footer using the Rectangular Marquee Tool (M) or the Single Row Marquee Tool, and then filling the selection with a color of your choice using Edit > Fill… (Shift + F5).

37 Finally, add your footer information to the footer area.

Congratulations, You’re Finished!

If you followed along the tutorial, you should come out with something that looks like the following figure, click on it to see the full-scale version.

Download the Source File!

The PSD source file is available for you to download and study.

• illustrative_web_design.zip (ZIP, 0.92 MB)

A Poll

Would you like to see an HTML/CSS tutorial based on this tutorial?(survey software)

Questions and Feedback

If you find places in the tutorial that are unclear or that you wish more information on, help us improve this tutorial by posing your questions in the comments.

Also, please provide us feedback on how we can better improve the tutorials here on Six Revisions

Related content

• How to Create a Sleek and Textured Web Layout in Photoshop
• How to Create a Dark and Sleek Web Design from Photoshop
• How to Create a Slick and Clean Button in Photoshop
• Related categories: Tutorials and Web Design

About the Author

Richard Carpenter is a freelance web and graphics designer from England. He is also a Blogger and Tutorial Writer, and owner of HV-Designs.co.uk. You can follow him on Twitter - @hvdesigns.

Design clearly isn’t new, and before we got into the habit of spending hours in front of a computer screen, the word’s greatest artists found inspiration from an offline world. To create extraordinary design, search in new places besides CSS galleries and showcases. Here are ten unusual places to get started, where one can look to find truly unique inspiration.

1. Different Eras

Each era in time presents a different culture, lifestyle, and a different style of art. Why must that be buried in time? Think of a time in the past — or if you’re feeling really creative — a time in the future. Think about the buildings, people, art, culture, events, and even the emotions that run through that era.

Art Throughout the Eras

For a relatively recent example: imagine post World War II. It is a well known time for reawakening, rejoicing, and individualism. At this time, abstract art came about in great numbers.

A look at past (or future) art can inspire one to think differently, and perhaps help to not follow the flow of today’s artists.

A Look at Everything Else

Let’s think beyond the art, though, for more inspiration. Again, following our post World War II example, look at some of the people, objects, and culture that came about.

From poster to product design, this era presented more than the recent political happenings. There’s a lot more to this era, and any era for that matter, than in the images shown above. Focusing on bringing that era to life on the web can make a great design.

Showcase of Era-Inspired Web Design

Just to take a look at how researching another era can relate to design, here are some great examples of time-inspired websites.

There’s really not a lot of variety in era-inspired web design; Many of them are retro, 50’s and 60’s style. However, that’s all the more reason designers should look into it. It’d be interesting to see what designer’s could come up with if they started thinking more about different times throughout history.

2. Nature

It’s been said a thousand times, but it’s going to be said once more — nature is a great source for design inspiration. However, many designers don’t know how to look at nature in order to draw the inspiration out.

Below are two techniques to looking at nature differently. Of course, there are many more, and many are specific to individual designers. Learn from the two below, and try to create your own technique for finding inspiration in nature.

A Different Perspective

A person can walk outside and see nature everyday. It’s pretty outside, but really — no big deal. Putting nature into a different perspective, though, can make things interesting. A good designer knows how to make the viewer focus on a certain point, or feel a certain way. As one can see from below, simply putting nature into new perspective can make a viewer look at and appreciate nature in a more meaningful way.

Photo credit to marikp1018-analogue and Fort Photo on Flickr.

The perspective photo on the right is no longer the ‘everyday’ photo of a swimming duck. This can go beyond perspective photography. Think of it as a thought process, and start trying to view nature in a new way. Change your perspective to create original and interesting design.

Looking Close

Nick La from Web Designer Wall is a well-known and incredibly talented web/graphic designer. He is one to often say that nature is his biggest inspiration. In his post, Design Process of the Phoenix, he shares insight on how he achieves unique and beautiful design from the same elements in nature that others don’t give a second glance.

Nick’s trick is to look at a certain element in nature, and view it close up. He’ll look at the texture, color, shape and variation, and then put it into design perspective. He shares more of his insight in his post, Finding Inspiration.

Showcase of Nature in Web Design

The small showcase below shows how nature can inspire design. Note that all of them are in some sort of unique perspective, making them interesting designs.

3. The City

Quite the opposite of nature is city life. Large cities have so much variety, color, personality, and action that it’s hard to ignore it as a source for inspiration. If one is from a larger city, it may be difficult to view it in such a way. Take a closer look though, and recognize buildings, art, and culture.

City Art

Take a walk downtown. Large scultpures like these are used throughout cities to promote artistic creativity, and can even be an effective marketing strategy when placed in front of company buildings.

These sculptures can range from abstract forms, to out of place elements, to representing a piece of the city’s history and culture. Don’t copy, of course, but this is quite an interesting form of art to admire and draw inspiration from.

Architecture

The coolest buildings always seem to be from large cities. Passing by we may notice and recognize their beauty, but how often does one take that beauty and turn it into design?

Whether a building is interesting because it’s incredibly tall, oddly unique, or beautifully historic, each building in a city can tell an inspirational story. Study the lines, textures, and shapes used in intriguing city architecture for your own creative outlet.

Billboards

There’s an awe-factor to city billboards. The lights, size, and mere creativity of advertisement in bigger cities can be very inspirational.

Take a walk down a major shopping district and study the billboards as an art form. View them during the day and at night for two different perspectives.

4. The Mall

Everything that can be sold in a mall is designed in some way. Clothing, jewelry, toys, and even food. Walk into a clothing store and find shapes and patterns. Walk into a toy store and notice colors, shapes, and themes. Even a food market uses ineresting design to make the food look delectible — both with the advertising, and the food product itself.

In addition, take in the people, sound, and experience as a whole into inspiration perspective. Anything from a kiosk to a central fountain may be enough to inspire design.

5. The Library

For a quieter creative outlet, go to your local library. A place with colors, interesting shapes, and patterns are what most think of when looking for inspiration. However, we often underestimate our own imagination. Go to the library, find an article, book, or journal, and let your mind do the rest.

Children’s Book Illustrations

As a good example of where to start, think of a illustrator’s job for a children’s book. They must read a children’s book, and fill in the visual aspect with their own creativity.

Go into the children’s section and pick out a few favorites. Better yet, find books you enjoyed as a child yourself; Sometimes memory can spark bigger inspiration. From illustrator style to special effects, like the hole cutouts in the book above, children’s books are meant to inspire.

The really cool thing about using books as inspiration is that they contain strategically placed text when used with illustration. This can easily be compared to web design, and may initiate some ideas about content placement and typography.

One’s Own Imagination

Another way of using a library for inspiration is to pick up a book, article, or journal without images. It can be fiction or not; a story or a study. Draw out a descriptive paragraph, the emotion felt, or your reaction of the reading to create a design

Even without actually seeing anything besides letters and words, books can put ideas in your head, whether it be of the story itself or of a random thought triggered by the text.

6. Magazines

Similar to books, magazines have images and stategically placed content that can inspire. Magazines, though, can be much more closely related to the web in terms of design. While a book can spark creativity for a sketch, a magazine can spark inspiration for typography, images, and layout. Not to mention, if you run a blog, inspiration for titles and content ideas.

Page Design

Magazine pages aren’t limited to CSS like web pages are. Many times a web designer will go with a layout structure they’re used to, but the freedom of magazine layouts remind us that we can still changed up the layout structure, while keeping readability.

Ad or Graphic Design

Similar design principles are used in magazine design as online. If a graphic catches your eye, stop and analyze it. Is it the color? The creativity? The layout? Truly analyzing what makes the most attractive designs so unique, can help us further our own talents.

Typography

An added benefit of magazines that other forms of inspiration don’t have, is great typography examples. Because typography is so important in web design, and typography-based design is also growing in popularity, we designers can use all the examples and inspiration we can get in this form.

Design Magazines

Let’s not rule out design magazines themselves.

While design magazines don’t seem to be an ‘unusual’ place to get inspiration, they’re inspiration nonetheless. Sometimes looking through a printed magazine, away from your computer screen, can be more beneficial.

7. Business Cards

Business cards are getting a lot of attention in the online design world recently. What better time to take them in for inspiration? Even if you’re not at a stage where you need personal business cards, they’re starting to become a unique form of inspiration.

Many creative business cards are becoming more than a small piece of paper. Use this knowledge to up your own level of design.

8. Music & Album Covers

Album covers are the ultimate of creative and original art. They can represent different eras, different style, and portray emotion. Take a look at the album covers of the music you like yourself. It may very well represent your own design style.

Just the Music

If looking at album covers isn’t doing the trick, just try listening to music, and creating a composition around a style, band, or specific song. Start with a blank sheet, and free write/free draw whatever comes into your head.

By getting out the deepest subconcious level of your creativity out on paper, you can create a consious, more formal design. Use music for inspiration, and use the abstract words and feelings you think of to design the rest.

9. High-Speed Photography

High-speed photography is a form of abstract photography that is sure to inspire. There are thousands of these high-speed examples, using physics as design. Here are three great examples, but a link to the Flickr gallery for high-speed photography is below for more.

To see more examples, check out the High-Speed Photography Flickr Group.

Some really neat effects can be made, and although these are real shots, we get an unreal feelings. Look at the color, shapes, and proxmity of these amazing pieces.

10. Away From it All

If all else has failed, and good enough inspiration cannot be found, there’s only one place left to find it: away from it all. Our brains do funny things, and sometimes when we start thinking too hard, we can’t see the big picture. Go do something mindless — find something away from creativity.

Take a walk, watch TV, or hang out with some old friends. Doing other tasks can do one of two things: 1) It can clear your head, so when you do come back to looking for inspiration, you may think of something you could not think of before or 2) that mindless task may bring out emotion and thought, creating an ‘ah-hah’ moment for inspiration.

Wrapping Up

Great designs can only be created from original thinkers. Become an original thinker by following the advice above and finding new ways to look at everyday things.

Any designer has his or her own unique practice for finding inspiration and design process for creating something out of nothing.

How do you find design inspiration?

How do you inspire yourself creatively? Share your opinions and tips with us in the comments.

Related content

• 16 Best Web Design Galleries for Inspiration
• How to Stay Ahead of the Curve as a Designer
• 40 Beautiful Examples of Vintage and Retro in Web Design
• Related categories: Web Design and Design Showcase / Inspiration

About the Author

Kayla Knight is a 20 yr. old college student, part-time web developer, freelancer, and blogger. In her spare time she maintains Webitect.net, a resource blog for webmasters. She also writes for top blogs like Smashing Magazine and Web Designer Depot. You can get a hold of her through her blog, or follow her on twitter - @Webitect

* Commenting now closed. Winner will be announced soon. *

Six Revisions and All Modern, a retailer of home and office goods, are giving away close to $200 dollars worth of nice items designed by Blomus to beautify your workspace to one lucky Six Revisions reader.

What You’ll Get

In this giveaway, the winner will get all six of the items below.

1. Patio Book Ends

This set of stainless steel book ends from Blomus make for a perfect modern storage solution.  The simple, yet elegant design works well for both home and office.

2. Akto Pen Holder

Store your pens, pencils and other office supplies in style with this stainless steel pen holder from Blomus.

3. Akto Notepad Holder

You’ll never have to scramble to find a little piece of note paper again!  Keep your note paper easily accessible with this stainless steel notepad holder from Blomus.

4. Akto Tape Dispenser

Avoid sticky situations by keeping a roll of tape at your fingertips.  This stainless steel tape dispenser is so much more stylish than those plastic ones.

5. Akto Magnetic Clip Holder

Never lose an important document again with the help of this magnetic paper clip holder from Blomus.

6. Lumen Hurricane Lamp

Late night at the office?  Keep your desk illuminated with this modern desktop lamp from Blomus.

How You’ll Get Them

This giveaway is limited to the U.S. because of shipping limitations. To enter, all you need to do is leave a comment on one of the following topics:

• Describe your current workspace (link to a photo if you want).
• What things do you need to have around when you’re working?
• What’s one missing feature in your workspace?
• What are things that distract you when you’re working?

Be sure to leave a valid email address in the email field of the comment web form as this is the way we will be able to contact the winner.

Giveaway Details

The giveaway ends on Monday, June 29, 2009 after which commenting will be disabled on this post. One winner will be randomly selected from the comments using a similar method as previous giveaways. You must leave a valid email address in the email field of the comment form so that we may contact you if you’ve won.

About All Modern

All Modern is part of CSN Stores, the third largest online U.S. retailer of home and office goods.  All Modern offers a fantastic selection of modern furniture, home accessories and lighting from top brands like Knoll, Herman Miller, Heller, Blu Dot and more.

About the Author

JC Parmley is a U.S.-based web designer and developer from Indiana. When he’s not designing interfaces and creating .NET apps, you can find him in the Frozen Waste fighting for the Horde (World of Warcraft) or kicking butt in the kitchen.