Simple Interface Header Design

Purpose of this workshop

  • Demonstrating principles of interface design 
  • Creating and using layouts in Photoshop
  • Creating and using combined images in a Photoshop image

Create a Simple business interface 

Create a header design for at least 2 of the following websites. Size 960 x 300 Pixels:

Business Bond

Hosted Solutions

Business Catalyst

Bulldog Investment

Creative Wealth Management

Honest Air Group

Prestigabiz

Profitpros

Quality Event Planner

Option possibilities:

  • Minimalistic design should also have impact:
  • Use of large type
  • Use of large image backgrounds
  • Use one colour only but make the usage bold and maybe bright/even fluorescent
  • Use Photosop techniques

Resources:

Excellent general all-round inspiration site

http://inspirationti.me/websites/huge-type/

Minimalist Web Design – General tips

http://pelfusion.com/design/the-fundamentals-of-minimalist-web-design/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Pelfusioncom+%28PelFusion.com%29

Minimal Websites General

http://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/

Minimal Bright Colours: 

http://www.inspiredm.com/2009/08/21/webdesign-trend-hunting-27-bright-websites-using-popping-colors/

Large Type websites:

http://www.webdesigndev.com/inspiration/25-websites-that-use-huge-typography

 A Header For An Events Company…

this uses ‘bebas neue’ font which was suggested as a good font to create impact and the ‘stamped’ like effect using a drop shadow of a very few pixels

Here I placed a white drop shadow around the large text of only one pixel at 90 degrees.

I then added a gradient layer and a filter layer of soft grain.

Here I changed the filter layer to a clumped grain, making the image softer and the text stand out a bit more.

Now to add some navigation…

I created a button with the rounded oblong tool…

Then gave it a drop shadow at 90 degrees of 1 pixel.

Next I added an inner glow and a clumped grain to make it more 3D.

The next time I do a design like this I will make it more minimal and less textured, which will add to the clarity of the graphic.  Although, I think that the stamped like effect on the large text does work.

Both of these site designs (below) are clean and clear allowing a lot of ‘white space’ so that the text is able to ‘speak for itself’.

The buttons and gradients really stand out on this page (above).

A lot of work has gone into making the page look clean and simple.

Previous Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: