Bold fonts have always been popular in print design and advertising, but can often be under-looked in website design. However, bold typography is a great way to give designs a little extra punch and can do wonders for your image. Bold typography is all about creating impact, but it’s important to remember to direct that impact appropriately. Don’t just stick in huge welcome text if it’s going to detract from important content. Large, bold fonts can really grab your visitors attention, but that doesn’t mean that writing out bold text will automatically look professional. It’s not about the font, but what you do with it!

Styling Bold Text:

The examples below show how a little font styling can really make your bold text stand out. This kind of styling is very easy to do, but the attention to detail is what will do wonders for your overall impact.

5 Best Free Bold Fonts:

It can be really difficult to find great free fonts, as many look unprofessional or cheap. However, I’ve trawled the net and dug up my personal 5 favorite free bold fonts for you to download. All of these fonts are super professional, and hopefully they’ll give your next design a typographical boost!

AkaChen

Diogene Bold

Baar Zeitgeist

Whoopass

Kabel

Bold Text in Web Design:

Many well designed websites utilize bold typography as an eye catching way to draw visitors into exploring their site and/or services. Done wrong, bold typography can be distracting, ugly and ultimately pointless. However, the 10 sites below are all great examples of how to include bold typography in your designs:

Mike Precious uses great font-choice and subtle lighting/gradients to immediately draw the user’s eye. In this case the audience are first drawn to his work, as this takes visually precedence over the header/menu.

This website uses very bold, large headlines to immediately ‘wow’ the user. The user’s eye is drawn down the page, associating the similar typography near the top and bottom, as well as by the repeated ‘re’ message.

VideoHive use some lovely chunky typography to first explain what their site is all about and then draw people further into the site by encouraging them to learn more and sign up. By using images of text rather than plain text they can apply gradients and drop shadows to their headings to make them even more eye catching.

Alpha Multimedia Solutions creates an instant brand with their huge typographical logo. The way that the logo feeds into the main content area naturally draws the users eye downwards to explore their web page.

Evershed Golf create a central focus to their website, in order to draw attention to their events and popular golf school.

Logo Design Love combine their logo and heading into a bold footer. This instantly creates a brand, whilst letting visitors know what the site is all about.

Helvetireader uses a bold, bright heading to give personality to what would otherwise be quite a minimalist layout.

HugeType combines bold typography with a nice photo in order to create a striking header.

The Autumn Film push bold typography to poster like proportions. The white on red contrast is really striking, and really captures your attention.

Giant Creative also create a central focus to their website, through a use of elegant fonts and subtle background patterns.

Articles

Link to a few articles on bold typography.

Finding Inspiration in Type and Color

Typography is Sexy: Part 1 | Part 2 | Part 3

Breathtaking Typographical Posters

Your Thoughts

I would love to know what everyone thinks about bold typography in design, and feel free to share any of your favorite designs or principles in the comments to this post.

Welcome to Episode 1 of ‘Ask PSD.FanExtra’, our new weekly post series!

“What type of work should I carry in my portfolio to show potential clients?”

This week’s question is from: Pablo

A great question to start off the series! This question is actually harder than it appears at first.

The ‘Classic’ Answer:

The classic answer to this question is ‘only show your best work’. This is certainly true, it’s always better to show a handful of your best projects than to show anything you’ve ever worked on. You should also narrow down your portfolio to your more recent designs. It always looks a little strange to have a portfolio of outdated designs from 9-10 years ago.

I would generally advise a minimum of 4-5 projects/designs and a maximum of 15-20. Too few designs and you run the risk of appearing inexperienced. Too many designs and you can overwhelm your viewers, appear indecisive suffer from ‘portfolio bloat’.

So that’s the basic stuff covered: Choose a handful of your best, fairly recent designs.

What To Consider When Choosing Portfolio Works:

However, I’m afraid that’s the tip of the iceberg. When you’re out looking for new clients, or trying to shape a personal brand for yourself, you should definitely consider some of the following questions:

• Are you trying to change your image? Do you want your potential clients to view you differently?
• How would you like potential clients to view you?
• You have a say in your potential clients. What kinds of clients are you trying to attract?
• What type of design are you most interested in pursuing?

The answers to these questions should drastically shape the type of work you’re displaying. For example, are you looking to move to working with higher-end clients? Are you interested in pursuing more logo design work than web design work?

If you’re looking to land multiple smaller clients to bang out several logo designs then you should display more logo designs in your portfolio. If you’re looking to land some larger projects with high-end clients then focus on displaying your more complex/complete web projects for your more reputable past clients.

The Ultimate Question:

The ultimate question to ask yourself is ‘what does each project say about me as a designer?’. Sounds like a simple question, but try sitting down and go through each project in your portfolio. Try jotting down a list of words next to each design that you think define that work. This can really help finding the right combination of works to display.

Final Considerations:

Try to view your potential works from the clients perspective. Will your potential clients know any of the companies that you have worked with in the past? If they will then it might be a good idea to display these works. Whenever I view someone’s portfolio if they’ve designed a website that I’ve used in the past I feel an instant rapport with them, and want to delve further into their portfolio.

As a designer myself I have a whole range of past projects to choose from. However, I’d get a largely different response depending on the works I displayed. To have a lack of political correctness for a second, if I displayed the only ‘girlier’ works, I probably wouldn’t be attracting many male clients. If I displayed the works for creative/trendy firms (film studios, skateboard companies, music production companies etc…) then this may alienate some of the more corporate potential clients. However remember, if this is the type of client you want to attract, that’s fine. Not everyone wants to or can attract Fortune 500 clients!

Hey guys!

Today I’m happy to announce a new weekly post series at PSD.FanExtra. I know that many of you have unanswered questions when it comes to the field of design, and as much as I love writing tutorials (and will continue to do so), I’m also keen to address these issues.

Ask Away!

If you ask any design related question in the comments to this post, I’ll select my favorite, or the one I feel will most useful to our readers and will answer it the following week.

Your question could be something as basic as ‘how do I warp text?’ to something as abstract as ‘what do you think makes great design?’.

There really are no right or wrong questions. Anyway, I look forward to hearing from you, and let’s make this new series a success!

Originality is something to be cherished when it comes to graphic design, and truly original work can really stand out in the industry. Far too many designers are following trends rather than setting them. I’ve touched on the merits of originality in previous Thursday Theory posts, but today I’ll be discussing some practical ways to make your own work more original.

1: Take Your Own Photography (Or Use Premium Stock Images)

Within the Photoshop community I see a lot of the same stock images being used over and over, and there’s nothing that can turn off your audience quicker than thinking ‘I’ve seen that photo before!’. If you’re trying to set yourself apart and impress your viewers then it isn’t a great idea to base your work on a really overused photograph.

One great solution is to take your own photos and integrate them into your work. This has several benefits:

• The obvious benefit is that your photo will be totally unique, making your work more original.
• You can construct your photo-shoot to be perfect for your composition. The fact that you can control the subject, lighting etc… means that you can hopefully achieve a photo much more specific for your needs than any stock website.

There are some limitations with taking your own photographs of course. You won’t always be able to find the correct subject (for example a hot climate if you live in a cold one..), and you may not have the skills or equipment to achieve usable results.

If this is the case, then I would recommend using a premium stock website. The reason that many photos are overused is because there aren’t all that many high-quality free images out there. This means that if there’s a great free shot of say, a woman jumping up in the air, then this will naturally be snapped up by all the Photoshop gurus out there. By using a premium stock website you generally receive a better quality of image, but also a less-used one. Many designers aren’t willing to pay even a little for great shots, so you can stand out from the crowd by integrating some premium-quality shots into your work, for just a few dollars!

2: Create Your Own Textures, Rather Than Using Stock Photography

Textures are a huge part of graphic design, and are clearly very useful. However, just like photography, the same textures can be seen being used over and over in various designs. A great solution is to try and create your own custom made textures when possible. There are lots of great tutorials to help you achieve your own textures, and this adds a really personal touch to your work!

40 Tutorials to Create Your Own Photoshop Textures

This great post lists a terrific range of Photoshop tutorials to create your own custom textures. These range from grass, to stone, to paper and wood, everything you need!

3: Draw Inspiration From Personal Experiences

Personal experiences in your life are by definition personal. This makes them very often unique, and specific to you! Personal experiences have inspired thousands of rock songs, so why not let them inspire your next graphic design project? If you’ve suffered a break up, recently got a promotion, been hurt, laughed all night with friends… all these things can help inspire your Photoshop designs. Try to translate the moods and experiences from your life into a visual medium, and the personal connection should help you inject more passion and personality into your compositions.

Another personal inspiration can be memories and nostalgia. Don’t just use your daily routine to inspire you, try and think back to your most defining moments and important events in your life.

4: Hone Your Own Style

As your continue down your path as a designer you’ll notice a personal style developing in your work. It’s important to embrace this, and try and create cohesion throughout all your works. Of course you should be trying new techniques and styles all the time. However, with the best designers you can often tell who designed their work, even without seeing a name. The little quirks, and idiosyncrasies within your work is what makes it so special and personal to you, so try to recognize these traits and encourage them in your future works!

5: Design For Yourself

When designing it can be all too easy to start designing for your audience, rather than yourself. You should never be designing to achieve popularity or peer approval. Just because a certain lighting effect is trending right now, this isn’t a good reason to integrate it into your work. Designing (unless for a client) should be an insular activity, where you are designing to impress YOU! It’s the classic example of being a trend setter rather than a trend follower.

If you’re happy with your own work that’s fantastic, and if others appreciate it too that’s a great bonus.

6: Think Outside of the Box

Your work should never be predictable or dull. By thinking outside of the box, or pushing your boundaries you can often come up with much more original, insightful work. Try thinking outside of the box in terms of composition, subject matter, message etc… Don’t be afraid to shock. You may upset a few people along the way, but it’s a great learning curve to go beyond what feels comfortable for you. Experiment with various mediums and styles, and constantly look to further your skills.

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Please leave a comment below and join the discussion:

It’s pretty evident that big headlines are a popular web design trend right now, and have been for some time. However, just because something is trending doesn’t mean that it doesn’t have downsides, or that it should even be used at all!

Today I’ll look at some of the pros and cons of using big headlines for your website, and if they’re really necessary at all.

Pros:

Big Headlines are Trendy

As I’ve already mentioned, big headlines are bang on trend right now. Whilst this might be quite a superficial reason to use them, at least people should appreciate your efforts. Furthermore you’re pretty likely to feature on some of the more popular CSS galleries if you use a nicely designed large headline.

Always bear in mind that you want to be setting the trend though, not simply following the crowd. It’s fine to use large headlines, but try to do something different with your headline, even if it’s a small detail. This will help to set you apart from the thousands of websites also following the trend.

The example above shows that you don’t even really need any proper content above the fold, your site can consist entirely of a large, attractive headline. Because it’s so on trend right now, this simplistic website has been featured on plenty of web galleries. That isn’t to say it’s badly designed, the typography is clean and elegant, I’m just saying that by adhering to a popular trend this site can boost it’s popularity.

Big Headlines are Eye-Catching

It’s undeniable that large website headlines are very eye-catching. This is perfect if you’re trying to make a statement with your website and really draw people into it.

To make your big headlines even more eye catching try to use bold typography, and have plenty of contrast between your background and type.

Digiguru uses a huge headline to really grab the attention of visitors. The headline is made all the more eye-catching by the stark contrast between the black background and white typography.

Big Headlines Allow for More Creative Freedom

Asides from padding, kerning etc… it can be difficult to do a lot with regular sized typography. The great thing about large website headlines is that often they can be created as a work of art, rather than plain text. Often large headlines feature as a piece of stand-alone graphic design, and can be entwined with images, patterns, textures and other visual elements.

Christian Annyas uses some really attractive typography for his large headline. This is an example of text that couldn’t really be used with regular web text. The text is subtly textured, and sits over a detailed, beautiful background design.

Big Headlines Can Act as Great Calls to Action

Headlines can act as one of the best calls-to-action right behind buttons. This really goes hand in hand with my point about them being eye-catching. If you’re catching your user’s eye, you may as well prompt them to do something!

The Nola Japan Quake fund uses a large headline to act as a call-to-action for people to donate and help the disaster. This is a great example of a large headline working towards a good cause. On a personal note I encourage everyone to donate if you can.

Cons:

Pushes Content Below the Fold

Generally good web design ensures that vital content is above the fold, so that users don’t need to scroll to view it. However, large website headlines really hinder this, as they often take up so much space that crucial content disappears below the fold.

Circle push their key navigation below the fold. On my browser the top of the menu icons jut out a little, but you can’t actually read the menu items. This seems fairly unnecessary, as the headline could still be very sizable and still let the menu items display correctly. This is an example of the large headline trend being somewhat overused.

Overwhelms the Wider Visual Hierarchy of the Site

Often if a headline is particularly huge it can detract from the rest of the site. There may be genuinely effective visual hierarchy used throughout the rest of the site (clear headings etc…), but these will not be as noticeable or effective when positioned near a much larger block of text.

Thrive Solo uses such a large, bold headline that the surrounding text pales. The welcome message doesn’t really have much impact at all compared to the main headline. In fact, the main headline is so large that whenever I try to look elsewhere on the page, my eye is drawn back to this huge headline like a magnet. In short, it’s too distracting, and undermines the surrounding content.

Tendency Just to Look Nice

Often large headlines are used just for aesthetic value. This is fine up to a point, as we all want to enhance the visuals of our websites. However, if the headline serves no purpose, and literally just looks nice, then maybe you should reconsider what should be filling that space.

Design by Ashfall uses a complex typographic headline that captures attention by combining a variety of text colors, styles and vertical/horizontal positioning. The effect is impressive, but is actually quite hard to read. Is this a case of style over substance?

May Not Stand the Test of Time

As a general rule, design principles/foundations are more enduring that trends, which are relatively fleeting. This means that if your web design is simply following the latest trend, then it may not degrade that well once the trend is over, and you’ll most likely need to redesign.

Some trends endure better than others, usually if they’re somewhat subtle. However, hugely over blown headlines are not a subtle statement, and if they suddenly go out of fashion, then they will be very difficult to pull off.

Webz Guru uses a large, attractive headline. I’m actually a fan of this design, but imagine if it suddenly starts trending to have smaller headers and really move a lot more content above the fold. This design simply couldn’t endure a major trend shift like that.

Other Points to Consider…

Big Headlines Won’t Work for All Sites

It’s important that big headlines will only work for certain types of website. Portfolio sites are particularly known for using large headlines, but the same can’t be said of high-content sites such as news website. Imagine Yahoo.com pushing most of it’s content below the fold in place of a huge stylish headline? I think not…

Be sure that you’re not using a large headline just for the sake of it, or just to follow a trend. Only use a large website headline if it’s appropriate.

Big Headlines Can be Done Tastefully

If you want to use a large headline but don’t want to grab too much attention or detract from the rest of your site, then it is possible to achieve this. Take a look at the final example below. By using understated contrast with the main background the headline is elegant and subtle. You still get a lot of the pros of using a large headline, but don’t overdo things.

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Please leave a comment below and join the discussion:

.
Typography is a tricky art-form, and it can be hard to take your typography from good to great. However, hopefully the pointers below will encourage you to explore some new ideas when it comes to your typography!
.

Great Typography is Original and Interesting:

The best typography doesn’t regurgitate old ideas. Rather, it strives to be original! When you’re coming up with typography, try to take inspiration from unusual sources, rather than ripping off other designers. Try to create something personal to you, and it will more likely be original and unique.

A lot of aspects about this piece make it interesting and unique. The distorted letters combine to form a melting abstract composition, with some really interesting lighting and textures.

Paying Attention to Details:

Like any form of design, the quality often lies in the details. Even if your typographic design is seemingly simply in terms of structure/layout, it can really pay to spend some extra time on the details. Whether that means slightly adjusting your kerning, or going in and retouching single pixels to get things looking perfect, it’s worth it!

The above example is a great example of details paying off. At a distance the letters appear fairly standard. However, the closer you inspect them, you find hidden layers of complex vector designs. Thus this composition can be viewed as a perfectly legible font, or a richly textured vector masterpiece.

It’s More Than Just a Font!

When you’re working with typography, try not to be limited by the concept of the font. We’re used to applying fonts in fairly typical ways – in word documents, in websites etc… Try to totally break free from these restrictions. View your typography as a living thing, as a natural entity, as whatever you can imagine!

The project shown above is a great example of breaking away from the standard view of fonts. The author has taken the idea of dissecting letters, but into a very real, 3D realm. The hospital settings and actual 3D models result in a project that’s truly engaging.

Experiment with Various Mediums:

When working with typography it can be all too easy to restrict yourself to the digital medium. Try branching out and including mediums such as sculpture, pen/pencil drawing and collage into your typographic work.

The above example shows some lovely examples of hand-drawn typographic. This can lend a much more palpable feel to your work than simply typing out computer fonts.

Remember the Purpose of your Typography:

Just like any other type of design, typographic design often needs to fit a brief. Even with non-commercial work, try and always consider the purpose of your typography. Who is your audience? What type of mood are you trying to evoke? Questions such as these should help guide the visual aspect of your design.

The example above is a project for Heston Blumenthal’s cookbook. The artist perfectly captured the ‘fantastical’ theme, using glorious golden typography, with plenty of elaborate flourishes and details.

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Please leave a comment below and join the discussion:

Perspective and depth are important aspects of graphic design, yet are often overlooked within community discussion. This is perhaps because graphic design is regarded as an inherently 2D medium. Consequently discussions of perspective and depth are generally confined to cinematic and photographic circles. This is interesting as photography is often dependent on perspective and depth, yet is arguably as 2D a medium as graphic design.

Despite it’s understated reputation, perspective is a crucial part of accomplished graphic design. In my opinion the two main roles of perspective within graphic design are as follows:

• 1: It makes images more interesting. – An image with depth and perspective is often more intriguing to the viewer than a flatter image. Perspective can seemingly contort and manipulate the normal, giving more unique results.

This image would be nowhere near as striking had it not utilized depth of field. The unusual depth of field really draws the viewers eye.

• 2: Perspective triggers movement in the viewers eye, engaging them and drawing them into the work. – Images with depth and perspective make us feel more a part of it than flatter images. They capture how we see the world.

Try not to be drawn into looking at this image – it’s difficult! The perspective and lines within this piece are really engaging. Notice also how the lines of perspective are enhanced by the lighting of the setting. This light really helps add to the depth of the piece.

But What About in Graphic Design?

Yes, I know that the two examples already given are photographic. However, it’s important to remember than principles of photography and cinema can of course be transposed to a graphic design medium.

That being said, we’re going to look at how to integrate perspective into your graphic design work, and make your compositions more interesting!

Utilize Depth of Field

If you want to give your work more depth then you need to get some distance between your subject and background (or at least give the impression of distance). Next time you open up Photoshop, try to experiment with a composition whereby the background feels very distant in comparison to your foreground/subject.

Yes, another photographic example I know, but this photograph demonstrates how by focusing on a close foreground and having a distant background, you can achieve instant depth.

Create Lines of Perspective

One of the most effective ways to create perspective is to establish clear lines of perspective in your work. This can be done using very complex shapes, or as simple as a basic 4 line structure.

This piece shows the basic structure of a great composition, and how perspective is constructed. You can see how planning out your perspective as a first step can lead to a final piece with a lot of depth.

Unusual Compositions

You can really establish the perspective of your composition through unusual designs. These tend to grab your viewers attention more than regular images, and thus the depth/perspective is amplified.

This image shows how unusual composition can make the perspective of an image far more prominent. The surreal nature of this work is really eye catching.

Use of Gaussian Blur

A common trick amongst Photoshoppers is to blur certain elements of your composition to create a false sense of depth. I’ve used this technique several times at PSDFAN in my tutorials, and it can really make your images pop!

These examples of PSDFAN tutorials show the popular gaussian blur effect. Elements (in this case rocks and feathers) are blurred in order to give the impression of depth. Elements should be larger and more blurred to imply close proximity to the viewer.

Using Lighting/Colors/Detail/Angles to Enhance Perspective

This step pretty much involves bringing a lot of the previous steps together. Try to bear in mind where your eye is drawn. Obviously more colorful, well-lit, detailed areas will capture the viewers attention more. You can also use angles to direct the eye.

This piece integrates many of the techniques already discussed. The dove is blurred to create an artificial depth of field. The blue shards use light/color to draw the users eye towards the center of the piece, an effect which is enhanced by the angles/points of the shards pointing inwards. A vignette effect is also used to enhance this central lighting and perspective.

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Please leave a comment below and join the discussion:

As a movie lover I often find that I can draw inspiration from my favorite movies. However, this seems to be an area overlooked by graphic artists.

Today I’m going to take a brief look at some areas of the movies that inspire me. Next time you’re catching a flick try and pay attention to some of these cinematic aspects. I’m sure you can find a way to translate some of your favorite cinematic works to your digital works. Remember, it can be hugely beneficial to draw inspiration from several mediums! If you’re only ever looking at online blogs your work won’t be as diverse as it could be.

Mis-En-Scène:

When applied to the cinema, mise-en-scène refers to everything that appears before the camera and its arrangement—composition, sets, props, actors, costumes, and lighting. (Source: Wikipedia). In short, mise-en-scène are the overall visuals of a shot.

The Batman movie series have one of the most iconic, recognizable mise-en-scènes ever. Even a glimpse at the now famous logo or a silhouette of the batman create all kinds of visual connections for the viewer. In your graphic design work this is what you should be aiming for. To create an instantly identifiable work you should try and keep things simple and unique!

Lighting:

Lighting is often used in movies to draw the users eye towards a subject or event. The same can be said for graphic design, where lighting, as well as lighting effects are used to draw attention.

The Harry Potter movie series uses some great lighting effects. In the example above Dumbledore is summoning a fiery phoenix. The explosion of light and fire is truly breathtaking, and the viewer’s eye is drawn to the center of the shot instantly as this holds the most light and color. In your graphic design works you should try and use these focuses of light and color to engage your viewer.

Framing:

Framing is an important device used in cinematography. How you frame your subject can add a lot to the shot, as well as giving visual clues about your subject. If a subject is loosely framed then they appear to be overwhelmed by their surroundings, perhaps made to look smaller or less significant. If a subject is tightly framed they are given more visual precedence, and perhaps even made to feel claustrophobic.

The shot above from Iron Man is a classic hero shot. The subject is tightly framed, and at a low angle to appear more powerful/important. The surrounding background doesn’t contain a lot of detail, so the main focus is on the hero, who is also perfectly in focus.

Special Effects:

With advancements in CGI, movies are increasingly using special effects to wow their audiences. By portraying the physically impossible the visuals can be infinitely more interesting than some more standard shots.

Inception is really well known for its stunning visuals and use of CGI. The shot above is what drew many people to go and see the film. It’s against all laws of physics, and for this reason is so intriguing. You should try to mirror this in your digital design work, by pushing the limits of what’s possible.

Typography

Don’t forget that movies often contain some really creative typography, particularly in their title sequences.

Juno was well regarded for it’s soundtrack, yet it also uses some great retro typography. You can really get inspired by some of you favorite typographical examples in movies, and translate these to your digital work.

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Please leave a comment below and join the discussion:

It’s time for our second installment of Thursday Theory, our new weekly post series!

Today I’ll be looking at how to achieve a really effective website navigation, and how to avoid some of the most common pitfalls that website owners encounter. I should be clear that it’s really impossible to have a ‘perfect’ navigation, but we can certainly try! Of course, your navigation will vary depending on your site topic/layout, however, hopefully these ground rules should give you a good foundation to work from.

Include Active/Hover States

This is an incredibly important part of website navigation, yet something overlooked by a lot of people. There are several benefits of including an active/hover state in your navigation:

• The active state will allow the user to instantly know where they are within your website. Combined with breadcrumb navigation (covered later) this should eliminate a lot of usability issues.
• The hover state will let your users know that your menu is in fact comprised of links, rather than just being static text.
• The hover state will also give your menu a more interactive feel, engaging the users. I typically click links with hover states more than those without, primarily because the hover state encourages me to do so!

Looking at the navigation right here at PSD.FanExtra we not only use a hover state on the primary navigation, but also in our drop down menu, to aid usability. And yes… I know we’re not using active states right now, but it’s something I’m working on.

CSSMania uses a great active menu state, so that the user knows exactly which part of the site they are viewing.

Don’t Include Too Many Links

Another common error in website navigation is including too many links in your menu. If the user is bombarded with a huge variety of options it will simply confuse them, and render your links useless.

A good tip is to try and keep your links below 6-7. Any more than this and it may be a good idea to introduce a second tier navigation or drop-down navigation. It’s no excuse to say that you have a lot of content, as even the largest sites in the world can manage to use a minimal navigation menu.

LogoMotive is a great example of a simplistic navigation. The limited number of menu items means that it’s very easy for users to comprehend.

1stWebDesigner is a blog with a lot of content. However they’ve kept their navigation menu down to 7 links, by integrating a category-based drop down menu. Furthermore they’ve integrated attractive icons to make the navigation even easier to understand.

Keep Your Menu Prominent and Clear

There is no point integrating active/hover states and limiting your link numbers if nobody is noticing your menu! You absolutely must ensure that you menu is prominent and legible. This means pick a font face/size that are legible, and ensuring adequate contrast against your background. Also try to have your menu near the top of your page, preferably as part of your header.

BuySellAds proves that you don’t need to use huge typography to have a clear navigation menu. The white text against a bold red background ensures that the primary navigation is really clear and legible.

Garphee uses a side navigation, yet it’s still very effective. Rather than a textual navigation, the text is constructed using images. However, this makes it all the more prominent as the button format really makes each link pop.

Don’t Forget These Essentials!

It’s important not to forget about sub-navigations and other browsing methods. Be sure to include the following on your website:

• Breadcrumb navigation – This is incredibly helpful for letting users jump between various sections of your website as well as knowing where they are within your site’s structure
• Site map navigation – This is useful for search engines, but also for your users if they want an overview of all of your site structure.
• Search options – Even with the best navigation in the world it’s helpful to include a search form. This is the key difference between searching and browsing, and it’s likely that your users will want to do both!

Smashing Magazine may not have the greatest navigation in the world, but they do well to include a navigational menu and search form in the same prominent area.

UXBooth integrate a search form into the same bar as their navigation. This makes navigating their site extremely clear and simple!

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Do you make any of the common mistakes above, and what do you think about the issues raised? Please leave a comment below.

New Post Series: Thursday Theory

As many of you may have seen we’ve really been putting a lot of effort into expanding PSDFAN recently. We’ve been publishing more content than ever, including some really high quality tutorials and articles. We recently got featured on Adobe’s official Photoshop Facebook page, and our traffic has generally been growing and growing. Our popular 30 minute redesigns series is nearing it’s 50th week, and next week we’ll be publishing our 100th Texture Thursday!

Rather than just sit back and enjoy all this progress, I’m really keen to provide as much quality content as we can. That’s why today I’d like to introduce a new weekly post series – Thursday Theory! Whilst roundups and inspiration posts will always be popular, I feel they’ve really overtaken more theoretical, practical articles within the community. Very few blogs take the time to give in depth analysis of prevalent design issues any more, meaning that whilst many readers are ‘consuming’, very few are actually learning more about good design. I really hope that this new weekly series will encourage some discussions amongst our great community, and that you’ll get involved and share your voice!

Thursday Theory: Common Web Design Mistakes People Keep Making

Today, to kick things off, we’ll be looking at common mistakes that people make when it comes to designing their own websites.

This post was inspired by our hugely popular 30 minute redesign series, which apart from being a lot of fun, has really highlighted some common issues in modern design for me. In this article I’ll be looking at some of the most common issues I’ve seen during these weeks redesigning, and teaching you how to avoid them!

No Continuity / Visual Hierarchy

There should be a feeling of continuity and order amongst your websites visual aspects. This means that colors should compliment each other, and fonts should be limited to a few choices. Too much variety means your design will likely fall down by overwhelming the viewer, and feel disorganized and random. Just take a look at the examples below and how adding some continuity can really bring a design together:

Capitol Church of God

Capitol Church of God really lacked continuity. The original site used a variety of fonts and styling, which really made the site feel random. The range of colors is far too extensive, and even the photos used don’t seem to match up that well. Even the content areas don’t appear to fit into any kind of grid system, as content boxes don’t align with each other.

For the redesign I reduced the color palette to a few complimentary colors. The typography is far more cohesive, and the content lines up much better.

Crucial Content Pushed Down The Page

You want your viewer to see your most important content straight away, as this is what should be drawing them into your site. If the content is pushed down to the bottom of the browser screen, or worse – the user is forced to scroll to view it, then you’re simply cutting of potential readers.

Remember – it is not your visitors job to look for your content, it should be presented to them. Why would they spend time scrolling or hunting for content when they likely have dozens of other websites they could be reading?

Dan’s Cartoons

The adverts in the header of Dan’s Cartoons were pushing down their daily cartoon, which given the nature of their website is their most crucial content. The cartoon seems to be bottom of the visual hierarchy in the original design, being pushed below welcome paragraph, logo, text, subscription options and navigation.

In my redesign I tried to reduce the amount of content above the featured cartoon, thus bringing it up the layout and reducing scrolling. I also made the cartoon more prominent by giving it an attractive border and browsing buttons.

Too Much Content Crammed Onto Homepage:

This is one of the most off-putting things you can do for your visitors, yet it’s something I see again and again! The logic is that your content is important, and therefore you want to place as much as it as possible onto your homepage, so that people read it.

The reality is that by doing this, your homepage appears cluttered, disorganized and worst of all overwhelming to your readers. Rather than drawing them further into your website and making them feel comfortable, you’re scaring them off by bombarding them with information.

Sony Photo Pro

Austin Luker’s portfolio used to just be a homepage full of text. He was trying to provide every bit of information he could, and put it on his homepage. To make matters worse, due to the single column layout the lines of text are incredibly wide. Generally you don’t want your paragraphs of text to span across your entire layout, as this is simply too large an area of text to hold your visitors attention.

My redesign tried to show how you don’t always need to use a huge amount of content to portray a point. In this example the idea was ‘a picture is worth a thousand words’. By replacing the huge blocks of text with concise bullet points, and use featured photographs, Austin can showcase his talent instantly, rather than expect visitors to browse down lots of textual content.

Nothing Drawing Users Further Into The Site

Even if your homepage content looks great, you should be prompting your visitors to delve further into your website. It’s simply not good enough to hope that they might explore your navigation. You know what I’m talking about – calls to action!

Calls to action can be incredibly powerful, as you are directly encouraging readers to take action, rather than leaving it entirely up to them. Calls to action can come in many forms, but often the most understated examples, such as ‘learn more’ buttons, special offers, or ‘meet our team’ banners can be hugely effective.

The crucial theory here, is that as users are drawn deeper into your site, it will be harder for them to leave. They will feel somewhat committed to your website, and with every page they read, they gain trust, security and familiarity.

Cachaca Wruck

Cachaca Wruck had literally nothing drawing users further into their website apart from their menu. The only homepage content was an image that didn’t really tell the visitor anything about what the website did.

In an effort to draw users further into the site I integrated a call-to-action button, and an engaging paragraph to encourage users to want to learn more.

Navigation Isn’t Clear

The navigational menu is one of the most important aspects of a successful website. If visitors can’t easily browse your website without a second thought then you will never be successful!

D Lists

D Lists had one of the strangest menus I’ve worked with. The only visible menu link was ‘About’ and it was positioned unconventionally in the top right of the page. Furthermore the typography made it look like a headline, or even part of the header design, rather than a link.

In my redesign I replaced the abstract navigational with a more conventional menu bar, including an active tab to help visitors know where they are within the site. The clear menu bar is far easier to understand than the randomly positioned ‘About’ link.

Nothing Interesting or Unique About the Design

Even if your layout is strong, and you’ve followed all of the guidelines above, if there is nothing engaging about your design, it won’t really interest people. You can do everything right, but visitors will turn off if you don’t visually engage them!

Climb Addict

Climb Addict had some clear layout issues, but for me the main thing I wanted to do was to make the site more interesting. Aside from the slightly grungy logo design, the layout could really apply to any business. When you’re designing your layout you want everything to relate to the subject matter or business model. What would you like your colors to reflect – corporate business, soft and girly, fun and trendy? Everything from colors to typography should be relevant to your websites subject matter.

In my redesign I broke away from the boxy design of the original, and integrated some great rocky textures that instantly related to the rock climbing theme of the site. Combined with some funky typography and additional design quirks and this is one visually stimulating layout!

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Do you make any of the common mistakes above, and what do you think about the issues raised? Please leave a comment below.