How To Build Your Own Single Page Portfolio Website
A great looking portfolio site is crucial for any designer to instantly present their work to potential clients or employers. A simple, single page site can do this effectively by displaying three key features of large header with short introduction, examples of your work and methods of contact all in one, extremely browsable page. Let's take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.
Last month, I had the pleasure of writing an article for internationally renown NET Magazine, also known as Practical Web Design in the US. The article titled Create Your Own Single Page Portfolio Site with XHTML/CSS and jQuery appeared in issue 188. The folks over at NET magazine have kindly allowed the article to be republished here on Blog.SpoonGraphics for those who might have missed it. I highly recommend checking out the new issues of NET magazine, and to catch them on Twitter for some handy web design tips and tecniques.
Your online portfolio is your place to introduce yourself to the world and showcase your work and skillset. Once upon a time the traditional leather slipcase was the standard form of showing employers and clients what you can do, nowadays a personal website is your main selling point. Sure, you could use websites such as Flickr, DeviantArt or similar to produce a quick and easy collection of work, but we're wanting to look professional here, and nothing beats your own hand crafted site sitting pretty under your personalised .com domain name.
What we're looking to achieve, is to build a simple website that compiles the important information of who you are, what you do, examples of your work and methods of contact. These are the key points anyone looking to hire a designer will need. The site also needs to look nice, but not to be too in-your-face that it takes the limelight from the examples of your work, so we'll build a clean, structured layout with subtle details. Finally, we also want the site to keep the attention of the viewer, if your website is part of a bunch of job applications we don't want to allow the viewer to lose interest clicking through page after page. Limiting the site to a single page helps display all the information quickly and effectively.
Let's get started with the Photoshop mockup, then move onto the nitty gritty of coding up with XHTML/CSS, and finish off with some fancy features using an awesome jQuery plugin.
Prepare The Document
Start work by opening Adobe Photoshop, create a new document at 1680×1050px. Draw in guides to highlight a 960px wide area to accommodate 1024×768 resolution monitors. We don't want any major page elements straying beyond this point. Also draw out a basic grid to align the page elements to, giving a nice, structured appearance.
Add Some Texture
Fill the document with a soft beige colour, then go to Filter > Noise > Add Noise. Enter 3% and check the Monochromatic option. Paste in a concrete texture from Bittbox.com. Fade out the edges with a layer mask and soft brush, then change to the Overlay blending mode at 40% opacity.
Introduce Yourself
Using the grid as a guide, type out your name and a brief introduction of your services in your favourite typeface. Add a very soft Drop Shadow and change the blending mode to Overlay. Emphasise the visual hierarchy by making the name stand out with a larger size and stronger appearance.
Present The Goods
Pick out a small selection of your work and crop them down to thumbnails at 400×180px. Add a 10px stroke at 10% opacity to blend them into the design. Pay particular attention to their alignment to each other, making sure the horizontal and vertical gap between each image is the same.
Methods of Contact
After the viewer has browsed your selection of work, they may want to get in touch or connect. List out your email alongside your main social networks, such as Twitter and Facebook. Use the doodle icons from a previous post here on Blog.SpoonGraphics.co.uk to spice up the links. Add a Color Overlay to blend these into the site colour scheme.
The Overall Concept
Here we have our graphical concept for our website, laid out exactly how we plan it to look. There's a subtle texture to the design to add some visual interest, a basic colour scheme based around our branding, a selection of our work and a list of methods of contact. Time to take a well deserved break.
Export the Background
Our concept uses the large area of stone texture as part of the design, toggle the visibility of all the other layers and copy a large section of the graphic. Save for Web and tweak the compression to find a happy medium between file size and image quality.
Export the Page Elements
Continue cutting up the document and exporting the individual files. Due to the cool typeface and effects used on the text, we'll have to export these as images also. However you could always sacrifice small design features in favour of web safe font styling, or even technologies such as SiFR.
Optimise Using Sprites
When it comes to exporting the icons, we can combine these files into a single sprite graphic. Copy each icon in turn and stack them on top of each other in a new document, then Save for Web. This reduces what would have been 7 image requests into 1, for a speedier page load.
Write Up the XHTML
Start work writing up the XHTML in a coding application of your choice. Pay attention to using the most natural HTML tags for each page element, such as H1 tag for the largest title, H2 for the smaller headings and UL for the lists of portfolio images and methods of contact.
Style it Up with CSS
With the relevant HTML tags in place, CSS styling can be added to change the appearance of the code. Begin with a reset to remove any browser specific or default styling. The repeating texture can be attached to the BODY, while the larger background can be used along with a page-wrap DIV.
Lay Out the Page Structure
Style the container div with a specific width and add margin: 0 auto; to align the div centrally on the page. The headings can also be styled using the background-image property. Don't forget to shift the default text off-screen using -9999px. This is a commonly used CSS image replacement technique.
Float The Thumbnails
By default an unordered list will display vertically with ugly bullet points, but the good old UL can be extremely versatile with the help of CSS. Float the portfolio thumbnails to the left to lay them out side by side, then add some padding and margin to space them out just like the concept.
Put the Sprite Into Action
The image sprite we produced earlier can be implemented with CSS. Style the #footer ul li a with any generic options such as margin, padding, color and font-size, as well as adding the contact-icons.jpg background-image and setting to no-repeat. Then for each individual anchor class, target the appropriate icon using the background-position rule.
Spicing Up With jQuery
By default the image links for the portfolio will simply open in the browser, but that's boring! With the use of some awesome, ready made plugins along with the jQuery framework we can easily add some great looking effects. Download the jQuery Lightbox package from Leandrovieira.com.
Copy The Files
The jQuery lightbox downloads as a complete example, pick out the files we need and copy them to your own project folder. We need jquery.js, jquery.lightbox-0.5.js, jquery.lightbox-0.5.css and the 5 image files. Link up the Javascript and CSS files in the HEAD of your HTML document. Then, write the jQuery script to target the portfolio links.
The Completed Website
With the jQuery functionality in place our website should be looking spot on. We have a simple one page site, with short introductory sentence, a collection of work examples that launch with a stunning animated effect and a range of contact portals. Our website is complete, or is it?…
Browser Testing
It's crucial to check our site in a range of everyday browsers. Our valid code might look great in Firefox, Safari, Chrome and Opera but Internet Explorer can sometimes display rather strange issues. IE7 seems fine, but IE6 is showing the typical 'stepdown' bug on the footer links. Display: inline to the LI soon sorts that!
Time to Launch
With the peace of mind of a correctly displaying site in various resolutions and browsers we can go ahead and place our freshly baked website live for the world to see. Check out the working demo, including a fully commented copy of the stylesheet.
No comments:
Post a Comment