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



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


Excellent general all-round inspiration site

Minimalist Web Design – General tips

Minimal Websites General

Minimal Bright Colours:

Large Type websites:

 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: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: