How to design a simple and professional layout? We’ll do it together in a few simple steps
Update: We have released for free YIW Minimal, a XHTML/CSS template based on this psd layout. Download it for free!
In a past article we looked at some truly enticing websites, all linked by the common thread of simple, clean, and minimalistic styling. Their distinctive features? Highly reduced graphics, good typeset, very limited use of color, and a marked preference for white, grey, black.
Seeing as I find this style very appealing, today we’re going to draw a portfolio layout with Photoshop, concentrating on margin, alignment, and typeset details, and reducing the non-essential colors and graphic embellishments as much as possible.
At the end of the article, you’ll find the source file to download: you’re free to personalize it and use it in your projects. If you’re just starting out, I suggest you follow this simple tutorial step-by-step and draw the layout along with me.
The basics
Let’s start by opening a new file, size 1680 x 1050 with a white background. We’ll place a set of guides 360px from the edges so that the center section we’ll be working in is 960px wide.
Let’s open the 960 grid system framework, which you can download from this website; in this case we’ll use the 12 column template. For instructions on how to use this framework, I suggest you read our article.
We’ll insert the template in our file and position it in the central section of the page, leaving exactly a 10px margin on both sides. Lock the group (by clicking on the lock icon) so the columns can’t accidentally be moved.
We’ll leave one column empty on the left side (and for visual coherence we’ll leave one empty on the right side, too) and let’s insert the logo. Thanks to the grid, we can position each element in our layout with great precision, respecting the various margins and alignments.
Next to the logo we’ll insert the navigation bar, assuming that our website will be comprised of five pages: home page, about, portfolio, blog, contact.
Since we’ll be limiting ourselves to only one font in this theme, we’ll use georgia for the navigation bar, as it’s already present in the slogan under the logo. This font will be used for all sections of the page, in order to make the layout as harmonious as possible.
To graphically enrich the navigation bar, we’ll draw a small effect for hover and active. With the rectangle tool we’ll create a box around the link and with the custom shape tool we’ll add a small triangle to create a lovely balloon.
We’ll choose black for active and grey (#e4e4e4) for hover.
We’ll add a grey line at the top and with the same color we’ll draw a central section with a height of 360px. In this section we’ll place our latest projects, displayed using a slider effect.
Always being careful to correctly use the grid, we’ll insert the image of a notebook computer, inside of which we’ll put a small screenshot of one of our projects. We’ll leave a bit of lateral space so we can add arrows for paging through our projects.
Next to the notebook we’ll add a description of the project, adding two buttons that enable us to see the work in detail or, if the project is a website build, to visit the site.
On the sides we’ll add a button (a rectangle with two <<) that, by clicking on it, will let us see the most recent works added to this central section.
Let’s copy the button, create a mirror image and insert the copy on the right side, taking care to vertically align the two rectangles.
We’re now done with the top section.
Now it’s time to decide what we’d like to put underneath the top section: in this case we chose to display the latest messages from twitter, to add contact information and dedicate another section for any testimonials.
Letting the columns help, we’ll place guides so that we have three identical sections, each 160px wide.
In the first section we’ll add the latest messages from twitter. To make it a bit more engaging we’ll add contrast to the black title with a bit of color, in this case orange (#f56b06) The usernames, on the other hand, will be grey (#757673).
In the second section we’ve decided to show some testimonial comments. We’ll left-align the titles and text, and with a horizontal guide make sure that the section titles are aligned.
In the third and final section, we’ll add our phone number and a link so the user can contact us by e-mail. To add a bit more graphical interest to this section we’ll insert two icons.
Here’s what our layout looks like now:
Our homepage is almost done! We’ll add the footer below the three sections: we’ll draw a grey line and below it add our information, center-aligned.
Our portfolio homepage is ready: simple, clean, professional. In just a few steps we’ve drawn a truly lovely and intuitive template, with clear and easily personalized content.
So what do you think about this style? Do you like simplistic web design or do you prefer to go crazy with brushes, textures, and other graphic effects? What’s your favorite style (doodles, vintage, grunge..)? Let your voice be heard!
Versione: 1.0
Pubblicato: 04 January 2010
Dimensione: 501.74 kB
Download: YIW Minimal
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
13 comments
Trackback e pingback
-
YIW Minimal: a free & clean template for a simple yet professional website | Your Inspiration Web
[...] few weeks ago we looked at how to design a minimalist layout, both professional and aesthetically pleasing. YIW Minimal ... -
20+ Free Portfolio Templates, Themes And PSDs :: Graficznie
[...] It has an about, portfolio and a contact page (and a contact form with validation). The template also has ...
hoping that this is the first comment… Great job, my friends!
Good luck, I think you will do great things!
Keep up the great (italian) work!
Thanks for the support, piervix. There is a great pleasure to find you here too!
Great tut, great design thank you
I love the idea and the simplicity of the site. great work. But i think the instructions need a revision. for example, where it says three section of 160 px it actually should be 300px according to your PSD document attached to this article. hope this could help.
thank you and good luck
I love the idea and the simplicity of the site. great work. But i think the instructions need a revision. for example, where it says three section of 160 px it actually should be 300px according to your PSD document attached to this article. hope this could help.
thank you and good luck.
Hi Zak, welcome to YIW and thanks for your feedback. Yes, i’ve wrong to made the images, i’m going to replace it very soon. Thanks so much.
How can I modify the twitter section. It seems it does not work in my site.
Hi and thanks for the great template.
How do you get to modify the height of the slidiing box?
Thanks very much!
I love this template but can’t figure out how to make the 360 px high grey box in the middle of the page adjust to the height of the content in that area. I have some pages that need more than 360, right now the grey is getting cut off at 360 and it doesn’t look good. Please help!
Personally I love simple websites, although the more complicated stuff can be appealing to when done right.
Hi Sarah, you are very good designer
May I ask a stupid question?
Ok, I will ask – how do you convert the psd layout to wordpress website?