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.
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!
Pubblicato: 04 January 2010
Dimensione: 501.74 kB
Download: YIW Minimal
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »