Lee Munroe » trends

Web Design Trends: Designing Out Of The Box

Lee — Tue, 07 Apr 2009 09:00:49 +0000

This is a creative trend catching on. It’s very simple to do but adds an extra element of character and uniqueness to a design.

Take a look at how to implement this ‘out of the box’ technique and a list of creative websites that are using it.

Setup

First setup your page and graphic. I’m using this graphic.

The HTML for my page is like so:

And the CSS looks like this:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Here’s a preview of what we have so far:

Positioning is relative

When we position the logo we want the positioning to be relative to the container, therefore make the position relative:

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

Position it outside the box

Now all you have to do is position your logo. Place it horizontally so the tag sticks out of the container.

#logo{
position:absolute;
left:-15px;
}

Now we have our logo sitting outside the box. Easy!

15 creative designs using the ‘out of the box’ technique

Matt Mullenweg

Feel free to share your thoughts on this and other emerging trends.

Web Design Trends: Stars and Aurora Effect

Lee — Tue, 10 Feb 2009 08:18:45 +0000

Arguably this trend was made popular after the release of Apple Leopard OSX and it’s groovy auroral/starry branding. Adding this simple effect to your background or header can make a very plain dark web design come to life.

Check out this list of 20 websites using these effects plus a few helpful tutorials.

1. 45royale

2. Skylar Anderson

3. Dale Anthony

4. Elite by Design

5. Fernando Sergio

6. Dorian Castro

7. 365 Days of Astronomy

8. Studio 7 Designs

9. Exceptional

10. Abduzeedo

11. Oakes Design

12. Brian Wilkins

13. Kitfolio

14. Rawkes

15. Evan Eckard

16. You Love Us

17. RJ Designz

18. Revyver Labs

19. Mail Chimp

20. Tennessee Winter

Tutorials

Web Design Trends: Cityscapes, Landscapes and Seascapes

Lee — Tue, 06 Jan 2009 07:00:22 +0000

A popular trend over the past year or two is using landscapes, cityscapes and seascapes in a design. Often placed in a website’s footer, they’re a great way to show off your creativity and as a web designer gives you a chance to test out your Illustrator skills.

A few tips for designing your ‘scape’

1. Get some stock photography

You can get lots of downloadable vector graphics and photos from iStockphoto.

2. Check out Flickr

Flickr has loads of Creative Commons photos available for use.

3. Take your own photos

Get out around your town/city and take a few photos of noticeable buildings.

4. Sketch your own ideas

Jot down your own hills and buildings on paper.

5. Finally, get tracing and cutting in Illustrator and Photoshop

Now you have your inspiration you can start tracing in illustrator and trying different Photoshop effects on your buildings to come up with the perfect amazing scape.

Check out the showcase below for inspiration from the best.

Showcase of cityscapes

1. Andy Sowards

2. Disability Heroes

3. Flayks

4. Gotta Get To FOWA

5. Carrot Creative

6. Sawyer Hollenshead

7. TJ Mapes

8. Bainbridge Studios

9. NY Moon

10. DrupalCon

Showcase of landscapes

11. The Mattinator

12. Kulturbanause

13. Hicks Design

14. Viget Inspire

15. Rissington Podcast

16. Adit Shukla

17. Vimeo

18. Koller Media

19. TwitterFone

20. Project Vino

Showcase of seascapes

21. Dizzain

22. Tomas Pojeta

23. We Are Not Freelancers

24. Frisk Design

25. David Torondel

26. Design Disease

27. Volll

28. Get Me Fast

29. Stylized Web

30. DivVoted

Call To Action Buttons

Lee — Mon, 15 Dec 2008 12:06:01 +0000

Call to action buttons are the buttons that you, as a web designer, want all your users to click on when they land on your page. Usually they’ll be a link to a download, signup or sale.

Seth Godin (The Big Red Fez) calls them bananas and your users are the monkeys. The objective is for the monkey to find the banana in less than 3 seconds (before they give up and leave). “Force yourself to design each and every page with one and only one primary objective. That’s the banana. Make it big. Make it blue (or red). Make it obvious.”

This post discusses how to design the perfect ‘call to action’ button and showcases 30 examples of good call to action button designs.

How to design the perfect call to action button

Force yourself to design each and every page with one and only one primary objective. - Seth Godin

Your call to action button needs to be obvious and jump out at the user. Here’s 5 characteristics of a good call to action button.

1. Colour

The colour should stand out from the rest of the page, and is therefore usually a brighter, contrasting colour.

2. Location

It should be located where the user would expect to find it easily. Above the fold, beside a product, in the header, top right navigation; it should be obvious and not hard to find.

3. Language

The language you use to communicate with your user is important. It should be short, to the point (no waffling) and should start with an action verb like signup, download, create, try etc.

And give the user a reason to click on your call to action button, ‘free‘ being the number one incentive.

4. Size matters

To make it obvious that it’s your most important button and that you want users to click on it, make it bigger than any other button and give the user as much area as possible to click on.

5. Room to breathe

Your button shouldn’t be overcrowded with other elements. It needs sufficient margins so it can be distinguished and the text needs enough padding so it’s easy to read.

Showcase of good examples of call to action buttons

1. Things

2. WordPress e-Commerce

3. Skype

4. PB Wiki

5. Exceptional

6. PicsEngine

7. InCase

8. GoodBarry

9. Plan HQ

10. TypePad

11. Mozilla Firefox

12. 37 Signals

13. Hambo Design

14. Cake PHP

15. Traffik

16. Boag World

17. Donor Tools

18. Luke Larsen

19. Square Space

20. Wu Foo

21. Barack Obama

22. Freshbooks

23. Crazy Egg

24. Web Notes

25. Campaign Monitor

26. Light CMS

27. Litmus

28. Stumble Upon

29. Remember The Milk

30. Ekklesia 360

Web Design Trends: Sunbursts and Sun Rays

Lee — Tue, 09 Dec 2008 09:00:34 +0000

Sunbursts are a very popular design trend within web and graphic design. A sunburst represents sun rays (or beams) exploding from a source point. They’re a Web 2.0 trend but they tend to work well with other graphical elements.

This post looks at how to create your own sunbursts, using existing Photoshop shapes and brushes and I’ve showcased 15 beautiful websites that include the sunburst effect in some shape or form.