Line25

Ideas and Inspiration from the Drawing Board of Creative Web Design

Create a Clean Modern Website Design in Photoshop

Acclaimed Website Builder Design, make & create your own website in minutes. Risk-free trial
homestead.com/website

Creative Photoshop Wkshop Author of "Photoshop Darkroom" Leads weekend workshop 7/187/19
www.digitalfieldguide.com/workshop

Learn Photoshop Elements You Can Master Elements In 2 Hours! See For Yourself-Take a Free Lesson
LearnElementsNow.com/AdobePhotoshop

Web Design - $199 Fully Custom Web design. Our Work is Awesome!
heritageWebDesign.com

Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.

Taking inspiration from various modern website designs, well produce this clean and crisp website layout. Key features include horizontal bands to separate the content into specific areas; a colourful header area introducing the site; a friendly welcome message with examples of work; two-column main layout and a resource filled footer.

A good start with any design is to sketch out the plans on paper, the free reign of the pencil helps flesh out the rough layout with ease.

Planning out a wireframe also helps develop a hierarchy and gives an insight into the best positions for key elements of the design.

Create a new document in Adobe Photoshop, I tend to make the size of the artwork similar to that of a common widescreen monitor to give a good representation of the overall look of the site.

Place guides at a 960px width in the centre of the document and create a basic grid to place the page items against.

Begin with the creation of the header bar. Draw a selection across the full width of the document and fill with white. Double click the layer to open the layer styles and add a Gradient Overlay from grey to white running vertically.

Next, draw the main header area where the featured content will be placed. On a new layer draw a selection, then add a gradient overlay with a selection of two vibrant colours. Also add a subtle inner shadow to add depth to the design.

Subtle touches of texture can really bring a design to life. With the header area selected with a mask press CMD+SHIFT+C to Copy Merged, then paste on a new layer. Go to Filter > Noise > Add Noise to produce a simple texture, then set the blending mode to Multiply and reduce the opacity to suit.

Paste in the company logo, position on screen according to the grid, then add some styling through the layer style options. Add a gradient overlay to match the feature header colours, then create a very soft inner shadow.

Use the Type tool to create the text of the main navigation, set the type in a mid-grey while using a slightly darker version for the active link.

The feature header is a great place to introduce the website, with the vibrant background colour it is given main focus to the user. Use this space to place a snappy intro title in a custom font that matches the company branding.

Continue fleshing out the introductory content, but this time use Arial or Helvetica as the font so that the text can be set in plain old html, without any image replacement techniques.

Position a laptop into the featured area (a range of examples can be found here), this fits in well with the nature of the fictional company, and makes a great focal area to display examples of work on the laptop screen.

Emphasise this focal point with a radial gradient emitting from behind the laptop. This adds that little extra detail that lifts the element from the page.

Underneath the main header, draw another selection and fill with a grey-white gradient.

Split the mid section of the page into two columns with guides in relation to the grid lines. On the left well have a main content panel, whereas the right will hold a thinner sidebar. Use the Type tool to add some dummy content. Alter the sizing and leading to give digestible and easily readable passages of text.

Below this main content area could hold an area to display the latest blog posts. Split the column into another two columns and draw up a selection of example post entries. The title links should stand out to the user as something clickable, so change their colour to give a visual clue.

Use the Rounded Rectangle tool to draw a box in the sidebar. The original colour doesnt matter too much as well be styling it up in the next stage.

Double click the layer and add a range of layer styles, including a grey-white gradient, a thin grey stroke and a soft inner shadow.

Use this sidebar panel to develop a Featured Project section. Elements could include a small screenshot and passage of text.

Draw another rounded rectangle to use as a button, add a couple of layer styles such as a gradient overlay and stroke to style the button to match the overall clean/grey theme.

Create a short, descriptive label for the button prompting the user to continue through the site to view further projects.

Signify the end of the content by drawing a footer area onto the screen. Fill the area with a light grey to differentiate it from the main content area.

Draw a circular mask and fill it with a black to transparent radial gradient. Press CMD+T to transform the selection, squash and stretch the gradient to form a long thin shadow-like graphic.

Position the shadow centrally on the screen, then delete the excess area above the footer. The result is a subtle shadow that lifts the main page, adding a little touch of detail to the design.

The footer area is a great place to hold secondary page elements, one example could be a client login area. Flesh out the design with the Type tool, then draw a couple of input boxes. Style the boxes with a soft inner shadow.

Use the central area of the footer to display a message about the company. Set the text using consistent header and body text font sizes.

Finally, add a point of contact in the lower right. These details will then be handy to the user throughout the site. Give prominence to the most important aspects through size and stronger weights or colour.

The final design fits all the desired elements neatly onto the page, while keeping everything aligned to the base grid. The result is a structured and clean layout with lots of subtle greys to add depth. Colour is then used to highlight feature areas and important content. Stay tuned for a future tutorial where well look at coding up the visual into a complete XHMTL/CSS webpage.

106 Comments

Andrew says:
May 20, 2009 at 6:08 am

I like it! ;-)

Mah Milton says:

May 22, 2009 at 12:04 pm

yes, it will help to create my reviewed penis extender device site.

NewYorkRob says:
May 31, 2009 at 4:37 am

Ahhh. I guess your device site will be very short sighted.

Mie says:
May 25, 2009 at 6:52 am

this is simply amazing!

Codie says:
May 30, 2009 at 3:12 am

Hey, love the tut, but could you break the steps down further, and show more screens, I felt a bit lost as to what to do at times.

French6ko says:
June 2, 2009 at 8:24 am

Thank you so much, the result is really impressive. What i would learn more is about the interaction between the 960 grid and the placement of design elements, which rules from this grid system do we have to respect to keep the design well positionned? Thank you for this nice tut!

paul says:
June 6, 2009 at 9:57 pm

I agree with Codie, for people who are not as familiar with Photoshop, its not easy to follow, especially the Add noise part for the header area

kordit says:
June 7, 2009 at 2:56 pm

nice

AJ says:
June 10, 2009 at 7:18 pm

I really like the wire frame idea. Why didnt I think of that? The transition from sketch to computer seems so arduous! I also need to thank you for the squished shadow effect. I have spent forever trying to figure out how that is done. Mystery solved.

IW says:
June 12, 2009 at 8:12 am

could you please share de .psd file? and sources.. Thank you

kelvinwebdesigner says:
June 13, 2009 at 3:19 pm

Hi Chris, nice tutorial and the site design is amazing. Because im new in this i had a little problems to follow the tutorial the first one, to draw a selection??? i just draw a rectangle because i didnt know how i could do it. second what size i should use for each text. U know since the size of the page is huge im like confuse. Ill be waiting for your answer! thanks

Dave says:
June 13, 2009 at 6:42 pm

Good result. I agree that it needed more detailed steps

kelvinwebdesigner says:
June 14, 2009 at 10:39 am

Please anyone tell me something! which font size should i use for menu,

Older Comments