Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
30th August 2009

Create high-impact portfolio pages

THE WEB PROVIDES THE PERFECT OPPORTUNITY TO SHOWCASE YOUR TALENTS, PROVIDING GLOBAL 24/7 ACCESS

Create high-impact portfolio pages
THE WEB PROVIDES THE PERFECT OPPORTUNITY TO SHOWCASE YOUR TALENTS, PROVIDING GLOBAL 24/7 ACCESS. HERE WE SHOW YOU HOW TO CREATE A SIMPLE HIGHIMPACT ONLINE PORTFOLIO WITH CSS

WEB DESIGNERS NEED to get their work seen and a high-impact portfolio page is ideal for showcasing your talents. Web design is very much about the aesthetic but it is also about standards. Both elements need to be taken into careful consideration when creating any kind of online portfolio.
Before delving into the design, consideration should be given to what information is to appear in the portfolio and how it should be presented. The obvious elements are a
header/logo promoting the portfolio and screenshots and text of a designer’s work. The current trend for portfolio pages is to keep the text to a minimum and use images to create the impact. How the elements are laid out will also influence the viewer. A popular concept is to adopt the style often seen in blogs, with repeating elements appearing in a single stack. This gives immediate impact to the item on show and focuses the viewer’s attention and this is the technique we have chosen to focus on for this tutorial.

Author: Steven Jenkins | Originally appeared in Issue 157
Download Tutorial Files

01 Determine dimensions
Before delving into the details of the code needed to create the portfolio layout, a few decisions need to be made. First, the dimensions of any screenshots or images need to be determined. Assuming that the layout is to be a two-column affair with an approximate width of 1,000 pixels, 700 pixels would make an ideal width. Of course, this is open to interpretation and can be modified to suit specific requirements. A good guideline is approximately 75 per cent of the page width for a two-column layout and 50 per cent for a three-column layout. With the width set the next step is to decide whether or not to determine a uniform height. This will give a portfolio consistent viewing, but choosing a random height may best suit the image.

02 Create header
To start the creation process open the image editor of choice. For this example we have chosen to use Photoshop. The header can contain whatever elements you choose, but as a guideline it shouldn’t be too content heavy. We are going to create a header that first, matches the overall width of page. The background is going to be white and will include a logo, or similar graphical element, and as the page is specific to your portfolio include your name and contact details. There is no point in hiding obvious details, unless you want to appear mysterious, but this negates the point of the page. Finally, as with any images created for the portfolio, strike a balance between image size and quality. There is no point in creating an image that takes an age to download. Potential visitors, customers and employers will be gone if they have to wait for a large image to download.

03 Create basic CSS
Create high-impact portfolio pages
For the purpose of this tutorial we are going to create a simple two-column layout. The layout will consist of a header, left column (75% wide), a right column (25% wide) and a footer all inside a wrapper. Note this can be easily modified to switch the column placement (see step 5) . To get started head to Dreamweaver and create a new file (File>New>HTML>None). Now add the wrapper tag, Insert>Layout Objects>Div Tag. Now click New CSS Style, choose the Advanced Selector Type, give it a name, ie #wrapper, Define in (new Style Sheet File) and press OK. Name the style sheet and press Save to view the CSS Rule Definition window. Select the Box category and add the desired Width:, ie 1,000 pixels. Now click the Same for all checkbox under Margin and set Right and Left to auto and press Apply and OK and OK again to add the new tag. This will place the wrapper, or effectively the page, in a central position whatever the resolution of the monitor the page is being viewed on.

04 Header tag
Create high-impact portfolio pages
The next step is to add in the header div tag to place the header image. Using the Split view, select the text (Content for id “wrapper” Goes Here) within the div tags and delete. With the cursor between the wrapper div tag go to the Insert menu and create a new div tag as shown previously. Name the tag #header and make the width 1,000 pixels and add a height. This will be determined by the dimensions of the header image, eg if the image is 150 pixels high the header tag should also be 150 pixels in height. Alternatively, as the tag is going to be contained within the wrapper the width can be set to 100%. With the header tag in place, head to the Insert menu to add the previously created header image. Now save the page and hit F12 to preview the page.

05 Columns
Create high-impact portfolio pages
The portfolio is set to contain two columns. To create the left column, using the Split view, place the cursor on a new line after the closing wrapper tag. Now create a new div tag, Insert>Layout Objects>Div Tag, and name it leftCol, or something similar, and head to the Box category. Set the width to 75%, the height to auto and select left from the Float dropdown list. Now press Apply and OK and OK again to add the new div tag. Now follow the same procedure to add the right column, we have named the tag #sidebar. However, this time set the width to 25% and the Float to the right. The width of both columns can be easily adjusted by simply changing the current width, eg 75% to 80%. Remember, when using percentages as the unit of measurement, all should add to 100 per cent or less. The width for both columns can be set to a total of 95 per cent, if desired, eg leftCol 75%, sidebar 20%. This would leave a five per cent gap between the columns effectively creating a margin or padding without the need to add via the CSS. This step creates a right-sided sidebar. To swap the main column and the sidebar simply change the float position on each tag, eg left becomes right and right becomes left.

06 Footer
To complete the basic building blocks of the portfolio page a footer is going to be put in place. Using the Split view, place the cursor on a new line after the closing sidebar div tag. Now go to the Insert menu and create a new div tag and this time name it footer. Set the width to 100% to ensure that the tag fully occupies the wrapper tag. The footer will need to be floated to the left. Without floating the footer to the left it will change position depending on the content in the columns.

07 Comment code
Create high-impact portfolio pages
Before populating the div tags created so far, it is a good idea to comment the tags to help identify when the page is populated. This is extremely useful for identifying the closing tags of a tag set. This helps to avoid confusion later on, should any new elements need to be put into place. Using the Split, or Code, view, place the cursor at the end of the closing header tag, </div>. Now go to the Insert menu and select Comment, this will add the necessary syntax to create a comment. Now add a relevant and descriptive comment, eg closing #header tag. Repeat this process for all the div tags created so far.

08 Prepare the portfolio
Create high-impact portfolio pages
The elements of the portfolio are to appear in a single stack of image and text. There are several options for adding the content to the main column. We have chosen to create a new div tag to contain the contents of a single instance of a portfolio item. This gives us more control over margins, padding and so on and also allows for the inclusion of a border to create a separator without adding an image. Place the cursor between the opening and closing LeftCol tags, head to the Insert menu, create a new div tag and give it a relevant and easily identifiable name, ie #portfolio. Make the width 700 pixels and set the height to auto. We have added a 15-pixel top margin to create spacing between each portfolio item and a 15-pixel left margin to line up the tag with the header. Again, these are open to interpretation. To separate the different elements we have also added a one pixel dashed bottom border. Again this is open to interpretation, choose a different border width, style, colour and so on. Now select and copy the portfolio tags, place the cursor on a new line and paste in the portfolio div tag as many times as needed. Five is a reasonable number, but if more is needed add as desired. Around ten should be the max otherwise the impact of the portfolio will become diluted.

09 Start creating
Create high-impact portfolio pages
The basis of the portfolio is now in place and each instance of the portfolio div tag is now ready to be populated. Place the cursor between the opening and closing tags of the portfolio tag, head to the Insert menu and add the image for the first instance of the portfolio. Remember to add the Alternative text and press OK to insert. To compliment the portfolio image the title of the work is to appear above the image and a brief description of the work done on the project underneath. Insert the cursor immediately after the opening portfolio tag and type in the appropriate title. Now place the cursor immediately before the closing div tag and type in the desired description.

10 Title style
Create high-impact portfolio pages
The text added in the previous step is currently lacking style and positioning. To style the text create a new class via Text>CSS Styles>New, select Class, give it a name, ie titletext and define in the currently attached css file. Under the Type category select the desired font, size, style and colour and press Apply and OK. Now select the title text and select the newly created style from the Style drop-down list. To create spacing and placement of the title add a set of paragraph tags <p></p> either side of title text. Now save the page and preview in the browser (F12).

11 Description
Create high-impact portfolio pages
The accompanying description needs to be styled, which can be achieved in a number of ways. First, create a class with the necessary font, style and so on, select the text and apply the new style. Alternatively, open the body tag via the CSS panel and create a base font style. Again, to create spacing and placement add a set of paragraph tags around the description text. This is the first portfolio element finished, now repeat the previous steps to create all the desired elements that are to appear in the portfolio, ie images and text. Now save the page and preview in the browser.

12 Biography
Create high-impact portfolio pages
The main element of the portfolio is now in place, so it is time to start populating the sidebar. The first element to add is a short biography. To start creating place the cursor between the sidebar tags and add the text. Include a title to give the text more impact. Pressing the return key will add the necessary paragraph tags to separate the title and text. The next step is to style the title and text. Create a separate class for the title and make sure that it offers more impact than the text. For example, it can be a larger font size, made bold and a different colour. If necessary create a new class for the body of the text. Now select and apply. Introduce an image, and make sure it is a good one of yourself, to give more credibility and personality to the portfolio.

13 Portfolio PDF
Create high-impact portfolio pages
Now create a new line and add a set of paragraph tags manually if Dreamweaver doesn’t do the job. Now add the title text and body text as shown in the previous step. Visitors may love your portfolio page, but they won’t always be at a computer. Create a PDF of the finished page and include a link to download the PDF. This can be added at a later date if you do not have any conversion software. Wait until your page is up online and go to http:// www.htm2pdf.co.uk. This is a service that will convert a webpage into a PDF, free of charge, which can be downloaded directly from the website. If you cannot wait until your portfolio page is up online there is an option to convert raw HTML. To finish this section, style the title and text as before and add a download link to the PDF image.

14 Finishing touches
Create high-impact portfolio pages
Now create a new line and add a set of paragraph tags manually if Dreamweaver doesn’t do the job. Now add the title text and body text as shown in the previous step. Visitors may love your portfolio page, but they won’t always be at a computer. Create a PDF of the finished page and include a link to download the PDF. This can be added at a later date if you do not have any conversion software. Wait until your page is up online and go to http:// www.htm2pdf.co.uk. This is a service that will convert a webpage into a PDF, free of charge, which can be downloaded directly from the website. If you cannot wait until your portfolio page is up online there is an option to convert raw HTML. To finish this section, style the title and text as before and add a download link to the PDF image.

Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://ivandelajara.es Ivan de la Jara

      bad title

    • http://www.spraydesign.co.uk Ermal

      Nice article, very informative, i also have an online portfolio more or less like your article suggests. It might be a good idea also to offer your entire portfolio in a PDF Format, so people can download it and view the designs better.

    • http://www.crearedesign.co.uk Victoria Web

      I think portfolio websites can be some of the most creative and influential websites designs. It showcases you, and you as a designer, your talent and creative flair. There are no restrictions like if you were designing for a client or to a brief.

    • http://hugopalomares.com Hugo

      well, i dont know how usedful this article was, because all they did was explaining how to do a portfolio technically. I would prefer reading about good ways to do it, or how to do better SEO, or so.

      For example, as an add to this article, i would recommend doing your portfolios in a CMS, i choose wordpress. If you are good using CSS and are familiar with wp tags, you can make yourself a working and eye appealing portfolio with the convinience that if you ever want to update it, its as simple as posting a new article.

      I found myself so many times with html or flash portfolios that once they are finished i never update them because it of it being really time consuming. If you want to see an example, visit my online portfolio http://hugopalomares.com

      I hope this tip helps some of you. Overall, good article.

    • Sunil

      author tryiesto say a lot but he miss the roots

    • http://www.horsebox.in Anto fernando

      Hugo u r correct