30 Minute Redesigns

Hope many of you saw the first week of our weekly 30 minute redesigns last Saturday. If you please check out the redesign I did of RichGates.com:

30 Minute Redesign: Rich Gates

The idea is that I redesign a website in just 30 minutes, trying to improve upon it’s design aspects. I then publish a case-study of my improvements for learning purposes and email the webmaster the final .psd design. I will be doing one redesign each week, and to be eligible for the following week’s redesign you must leave a comment to the previous week’s redesign with your web address and why you would like a redesign.

Voting Begins

After receiving lots of great comments to last week’s redesign post, I’m happy to present the candidates for this Saturday’s redesign. Please look over the websites below, and then use the poll at the bottom of this post to choose which site you’d like to see redesigned:

1: Web Area

2: Save Delete

3: Hot Yoga

4: DoKall

5: Citium Sistemas

6: The Capital Singers of Trenton

7: D&D Photography and Design

Vote Now!

Please cast your vote using the poll below:

Be sure to check back on Saturday for the winning case-study!

Gate Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

Download Them Free

You can download the full-sized textures totally free using the link below:

Download Textures Free

License: Creative Commons Attribution

Today we present Part 1 of a two part post, identifying common mistakes in design, and showing you the right way to do things.

For each example we will present case-studies, in order for you to understand the principles of design first hand.

Saturation and Color Choices

Whilst color is a great attribute to web design, it must be used correctly. Colors should go together well, and be easy on the eyes. Color should be used to draw attention, not just for the sake of it:

WRONG:

Yaxay.com – The colors of this design are a little overwhelming. The viewers eye doesn’t really know where to go. The large block of bright orange in the background actually pulls the viewers eye away from the page content.

ShopSafe.com – The bright colors of the menu and background seem to clash. They’re far too saturated, giving a cheap feel to the website. The overwhelming colors pull the viewers eye away from the content. The eye should be on the website’s offers and products, not on the useless background!

RIGHT:

ColorSchemer.com – This website shows that bright colors can be done tastefully. The background, whilst bright is subdued enough to enhance the content, rather than distract from it. The brightest colors are in the top-center of the design, drawing in the users eye. The bright colors are relevant to the site’s purpose, and give life to the website’s design.

37Signals.com – Whilst not an overly colorful website, blocks of color are used to promote the most vital content of the website. Key text and product areas are highlighted with color, and different (but complimentary) colors are used to differentiate between the various products.

Typography

A good website design should have clear, legible typography. Fonts should be kept to a minimum (2-3 tops) so as not to overwhelm your visitors.

WRONG:

KanyeUniversecity.com/blog – Kanye West’s blog uses menu font that is very hard to read (not helped by it’s tiny size). His menu is rendered very unusable, and the website suffers.

Neil Gaiman – Neil Gaiman’s blog uses a similarly hard to read menu font. The image menu tabs, close kerning, close proximity between menu links, and integrate into the header actually make the menu look like part of the header design, rather than a menu at all. The result – a hard to navigate website!

RIGHT:

AListApart.com – AListApart uses a very clear menu typography, as well as elegant headings. Fonts are used sparingly, but to great effect!

ElliotJayStocks.com – ElliotJayStocks uses dynamic text replacement to improve his pages typography. The menu and headline use the same type, but both are clear and legible.

Branding

With so many websites out there, branding is becoming increasingly important. Designs should not only look professional, but encompass your websites philosophies and message. Furthermore, your brand should help set you apart from your competitors, sticking out in visitors minds.

WRONG:

TechDesigns.co.uk – TechDesigns design isn’t terrible, but it had literally nothing to set it apart from the crowd. The design seems like any generic hosting template, yet it’s for a web design agency!

BusinessProDesigns.com – BusinessProDesigns is another very generic lookins website. There is no branding, no uniqueness to the design.

RIGHT:

Tutorial9.net – Tutorial9 has a clear brand, playing off of the ‘Cloud 9′ ideal. The logo, subtle background patterns and color-scheme all serve to promote the image of providing ‘heavenly tutorials’ to their visitors.

OutLawDesignBlog.com – With a name like ‘Danny Outlaw’ Danny couldn’t really help but brand himself brilliantly. That being said, his website pulls off the branding effort with perfection. The western feel and attention to brand detail is outstanding!

K.I.S.S

The old motto Keep It Simple Stupid is never truer than in the world of web design. Simplicity is key to great design. The best designs only have the content that is vital, no useless content at all. Additionally white space is required for great design, leaving a good amount of space between the visual elements of the page in order to give it a padded feeling.

WRONG:

WebCreationUK.com – WebCreationUK is a web design company, yet they seem to find the need to cram every piece of information they can onto their homepage. There is no feeling of being drawn into their site, as instead you feel bombarded by the amount of data that they’re throwing at you!

Web-App.net – Web-App.net takes a similarly shocking approach, bombarding you with endless columns of text. There is very sporadic white space on this website, and because of this content areas are not clearly defined.

RIGHT:

KyanMedia.com – KyanMedia contains a very selective amount of information, and for this reason it’s visual elements feel nicely spaced out and focused. There is no confusion when viewing this design, your eye knows just where to go.

MT-Ventures.com – MediaTemple Ventures is a very minimal design, yet it doesn’t feel underdone. Rather, the design is elegant, and the content feels professionally integrated. The design utilizes plenty of white space.

A Unique Layout

A unique design is essential. I’m personally not a fan of the thousands of sites using pre-made themes and templates. Nothing about these designs stands out, and particularly those sites in the design niche should consider using a custom-made design:

WRONG:

Websites Using Pre-Made Themes – Sure, themes/templates are convenient and handy, but in using a template many sites sacrifice their ability to make a real name for themselves. One solution for designers is to purchase a theme so that the code is already in place, but then use the design to make modifications – this way you can put a unique twist on a pre-made design. I’d like to make it clear that I have nothing against theme/template providers, many of them offer great designs. However, professional websites should consider using a unique design.

RIGHT:

WebDesignerWall – WebDesignerWall has one of my favorite all time favorite designs. It’s originality and creativity had the entire community talking when the design first went live.

WebDesignerDepot – WebDesignerDepot is a more recent example of a design that captured the interest of the design community. The hugely creative and unique header helped to carve out a niche for the blog, providing quality content and great design insight.

30 Fresh and Professional Blog Designs

Blog design has always been a special art. Bloggers often have to fit a lot of content into their designs – post contents, titles, dates, social bookmarking options, advertising – the list goes on…

That’s why today we present 30 fresh and professional blog designs that present their content elegantly and cleanly. Some really inspiring designers here!

Members Only Tutorial

This tutorial is available exclusively to our VIP members. In order to read the tutorial and download it’s original .psd source file you must sign up as a member.

If you sign up today you get access to over 75 .psd source files, as well as our weekly members only tutorials and other content!

Design a Rocking Grungy Band Website

Final Image

The result of this tutorial is shown below:

What You Will Learn

This tutorial teaches you:

• How to work with brushes/textures
• Applying complex overlays and layer styles
• How to create a grungy ‘rock&roll’ look
• How to construct unique menu designs from scratch
• How to lay out your content in a good visual manner
• & Much More!

Learn how to layer up textures, brushes and overlays to create a highly complex, grungy website header.

Learn how to manipulate photos in order to create an eye-catching and dramatic photo montage header.

View the Tutorial

You can view this tutorial using the link below, but remember, in order to do so you must have a VIP account.

VIEW TUTORIAL.

30 Minute Redesigns Every Saturday!

I’m very excited to announce the launch of a new weekly post series at PSDFAN – 30 Minute Redesign Saturdays.

The idea is very simple, each week I redesign a visitors website in 30 minutes. I then observe what I tried to achieve with the redesign, and identify problems with their original website.

Why 30 Minutes?

Good question! I chose to spend 30 minutes on each week’s redesign in order to prove that you don’t need weeks of labour and an expensive design team to improve your websites’ design! Obviously with more time I could make the redesign considerably better. However, these posts show that with just 30 minutes of your time spent identifying problems with your current website, and spent mocking up a new design, you’re well on your way to providing your visitors with a better user experience.

Week 1: Rich Gates

Rich Gates provides professional voice overs for a living. You can view his current site below:

RichGates.com.

In the space of 5 minutes I can identify some of the key strengths and weaknesses of this design, and sketch out a mockup.

STRENGTHS:

• Clean design (whoever designed this originally does have skills)
• Readable content, bold colors
• Easy to Navigate
• Concise Content
• Interactive Demo Player useful for Potential Clients

WEAKNESSES:

• Visually you can’t tell what the site is about. There are no visual cues promoting the ‘theme’ of the site.
• The content whilst concise has no visual hierarchy. All text is roughly the same size, so your eye doesn’t really get ‘grabbed’.
• There is a distinct lack of images, nothing is hugely wrong, yet nothing is particularly interesting.
• There are no factors really drawing you further into the site. You need some ‘call to action’ buttons!

My Redesign

As mentioned, I could do a hell of a lot more with more than 30 minutes, but off the top of my head I produced the following design.

WHAT I TRIED TO DO:

• Add a logo for some personal branding. I tried to create a set of lips from music equalizer bars. This could be done better with more time, but the basic idea is there.
• I created a more structured layout, framing the content better and drawing the visitors eye down the page.
• I created a large, attention grabbing headline, instantly showing what Rich does.
• I created a simple image montage, visually depicting what kind of industry Rich is involved in. This also ‘jazzes up’ the page a little.
• I created more of a textual hierarchy. Using larger headlines to identify areas of content and prompt the visitor to scan content more.

Comparing the 2 Designs:

Here is a quick comparison between Rich’s original design and my 30 minute redesign. Sure, my design could be more polished, but I believe that a lot of the basic elements have been improved upon, creating a more pleasant browsing experience.

How and Why To Enter Redesign Saturdays

You can have the chance to have your website redesigned in next weeks post. All you need to do is leave a comment to this post with your website address and why you think it needs a redesign.

The Benefits of Getting Your Site Redesigned Include:

• Most obviously – a FREE redesign job!
• Your website gets exposure to PSDFAN’s thousands of readers
• You understand how to improve your website. This isn’t just a redesign, it’s a lesson in design.
• You will get emailed the .psd of your redesign and can do whatever you want with it!

So please, leave a comment today for a chance to have your website redesigned next week!

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (600X700px).

Paste in this great old paper texture. Call this layer ‘paper texture’.

Step 2

Create a new layer called ‘gray area’. Now use your rectangular marquee tool to create a box 10px in from the top, left, and right edges of your canvas, and 250px in from the bottom edge. Fill your selection with dark gray (252525).

Step 3

Reduce the opacity of your gray area layer to 90%.

Then download this great Splatter Brush Set.

We want to erase the edges of our gray area using this grungy brush set. To do this in a non-destructive way though, go to layer>layer mask>reveal all. Select one of your splatter brush set, black brush and erase the edges of your gray area.

Step 4

Apply a pattern overlay to your gray area layer. I downloaded great set of patterns from SquidFingers.com.

Reduce the patterns opacity to around 25% to give a subtle effect.

Step 5

Download this Free PSDFAN Sunburst Set

Apply the sunburst over your gray area. Then go to layer>layer mask>reveal all. Apply a radial gradient ranging from transparent to black, to erase the edges of your sunburst.

Then reduce this layers opacity to 15%.

Step 6

To try and add a little extra to your sunburst effect go to edit>transform>warp and warp as demonstrated below:

Step 7

Download this photo of clouds and paste it over the top area of your gray area.

Then go to image>adjustments>desaturate. Use a large, soft eraser brush to erase the edges and bottom of your image, until you have a subtle cloud overlaying your gray area.

Step 8

Now download this photo of a mountain range.

Cut it out using your lasso selection tool, and then paste the mountain range over the bottom of your gray area.

Then use a large, soft eraser to erase the edges of your mountain range.

Step 9

Now apply a red color overlay blending option to your mountain layer. (Vivid Light – 15% opacity).

Finally, reduce your mountains layer opacity to 50%.

Step 10

I decide that my cloud layer is looking too faint, so I increase it’s opacity to 30% and apply the same red color overlay effect (blend mode: vivid light, opacity: 10%).

Step 11

Now open a new document (100X500px). Create 4 vertical guides at 20, 40, 60 and 80px. Then fill each of the 5 available spaces with a different colored bar, creating a rainbow effect.

Step 12

Now return to your original poster and select/copy your paper texture layer. Paste it over your stripes in your other document, and change your paper textures blend mode to ‘multiply’. This should give your stripes a nice texture.

Step 13

Paste your colorful lines image into your main document. It should automatically be pasted central in your canvas. Then select the very bottom of your colored bars and go to edit>distort>perspective.

Draw in the corners of your selection, to bring your colored bars to a fine point. This should create a cool center piece for your design.

Step 14

Now create a new layer called ‘colored circles’. Create multiple circular selections, and fill each with a color-transparent linear gradient. Then change this layer’s blend mode to ‘overlay’ and reduce the opacity to 40%.

Step 15

Paste in a photo over the top of one of your circular gradients.

Go to image>adjustments>desaturate to grayscale the photo.

Then reduce the opacity of this layer to approx 30% and use a large, soft eraser brush to erase it’s edges.

Step 16

Add various other photos over your gray area and colored circles, each time desaturating the photo, reducing it’s opacity and erasing it’s edges:

Step 17

Add some text to the bottom half of your canvas:

Step 18

Now use your marquee selection tools to add some basic dividers between the lines of text:

Step 19

Finally, go to layer>add adjustment layer>gradient overlay and apply the gradient demonstrated below:

And We’re Done!

I really hope that you enjoyed this tutorial and would love to hear your feedback!

PSDFAN VIP Area Giveaway Winners Announced!

We recently hosted a giveaway celebrating the launch of our new VIP Members Area.

We Appreciate Your Feedback & Suggestions

After receiving 69 amazing entries, we feel that we have a much better idea of what our community wants from our tutorials and members content! The suggestions were original and inspiring, and we’ll do our best to cover each of the topics suggested.

The Winners

Each winner receives a full 3 month subscription to the , giving them access to all of our 75+ source files and all members only tutorials/downloads.

Glass 2 Textures

You can view the textures below, and can download the full sized textures at the bottom of this page.

Download Them Free

You can download the full-sized textures totally free using the link below:

Download Textures Free

License: Creative Commons Attribution

Members Bonus Content: 25 Super Useful Ways to Get Inspired

Today PSDFAN is launching a weekly phenomenon – Members Bonus Content.

Once a week we will publish a top quality article as part of our regular weeks posting. However, whilst our regular visitors will receive a good amount of content totally free, our VIP members will receive additional parts to the article. This is of course in addition to our weekly members only tutorials, regular tutorials, and regular inspiration posts & articles!

Today we bring your 25 Super Useful Ways to Get Inspired. Whilst the first 10 methods are listed here, the other 15 are only available for VIP members.

Sign up for a VIP Members Account today to access our 75+ source files, plus weekly tutorials, bonus content and downloads!

1. CSS/Website Galleries

Many designers use CSS galleries to inspire their own web design projects. What better what to get inspired than to look through dozens of incredible designs in minutes?

Recommend Inspiration:

CSS Mania

Other Inspiration:

The Best Designs

Most Inspired

CSS Remix

2. Design Networks

Design networks are a great way to promote your own work and get inspired by others. Often networks cover a wide range of mediums and professions, so you can easily check out anything from digital art to product design!

Recommend Inspiration:

Behance Network

Other Inspiration:

DeviantArt

Worth1000

Design Related

3. Logo Galleries

Just like with CSS Galleries, logo galleries can provide us with tonnes of inspiration. I personally use logo galleries even when I’m not working on a logo design, simply because the level of talent and creativity inspires my day to day work!

Recommend Inspiration:

LogoPond

Other Inspiration:

LogoFaves

Logo Galleria

Creattica (Logo Section)

4. Design Blogs

There are plenty of design blogs out there, but only a handful provide top-notch content day in day out. These sites work hard to provide us with great inspiration each day.

Recommend Inspiration:

Instant Shift

Other Inspiration:

Smashing Magazine

1st Web Designer

My Ink Blog

5. Color Pickers

Some websites offer a ‘color scheme’ service, whereby you can create and view color schemes. This can be highly inspirational, as if you’re trying to work out a suitable color palette for your project you can browse the best schemes from the gallery!

Recommend Inspiration:

Kuler

Other Inspiration:

Color Scheme Designer

Color Lovers

Color Schemer

6. Invest in Some Design Books

Blogs and websites are great for inspiration. However, sometimes it can be nice to have a book on your shelf to pick up whenever you’re feeling uninspired. These titles are all really helpful for any designer, and should definitely inspire you!

Recommend Inspiration:

Don’t Make Me Think! A Common Sense Approach to Web Usability

Other Inspiration:

Logo Lounge 3

Layout Workbook – A Real-World Guide to Building Pages in Graphic Design

Web Design: Best Studios

7. Visit an Exhibition

Too much time spent in front of a computer screen really isn’t good for you. I don’t want to sound like your mother, but often getting out and checking out great art in the ‘real world’ can be hugely inspirational. I often like to visit graphic design and art exhibitions. Check out these intriguing upcoming exhibitions:

Recommend Inspiration:

MoMA: The New Typography

Other Inspiration:

Envelopes Exhibitions

V&A: Decode (I’ve been this this and it was a lot of fun!)

MoMA: Tim Burton

8. Change Your Desktop

Research has proven that changing your desktop wallpaper can have a dramatic effect on your workflow. I try to change mine reasonably often in order to keep myself inspired. Check out the following resources for some super inspiring wallpapers!

Recommend Inspiration:

30 Stunningly Beautiful Wallpapers

Other Inspiration:

15 More (Really) Stunning Desktop Wallpapers

30 Magnificent High Def Space Wallpapers

35 High Def Wallpapers To Calm and Inspire You

9. Take Notice of Product Packaging

It’s true that inspiration lies in the world all around us. Product packaging is a part of our every day life, yet we often don’t pay attention to it on more than a subliminal level. If you stop and take notice of great design you’ll begin to feel more inspired already! I’ve based several tutorials on cool things I’ve seen in the supermarket before!

Recommend Inspiration:

Beautiful and Expressive Packaging Design

Other Inspiration:

50 Beautiful and Effective Package Designs

Showcase of 54 Creative and Beautiful Package Designs

Packaging Design Inspiration

10. Design Related Discussion and Q&A Boards

Sometimes observing isn’t enough to inspire you. It can be really inspiring to get together with other designers and discuss your favorite designs, design ideas and general design philosophies. Luckily we’ve rounded up some awesome discussion boards and Q&A forums. You can use these resources to get inspired, but also help you with any design problems/issues.

Recommend Inspiration:

Answers.DesignReviver

Other Inspiration:

Graphic Design Forum

How Design Forum

Your Design Forums

Want Inspiration Tips 11-25? Join Our VIP Members Area Today!