Personal Portfolio: Design and construction
Structure
After looking at several portfolio websites I noticed that a lot of them shared a common structure, as follows:
- Home or welcome page – with most recent work and/or blogs
- Portfolio page – with links to individual project pages
- About page – with personal information
- Contact page – with contact details or contact forms
- Blog page – for blogs
I decided to adopt this structure for my portfolio site as I thought that it would be a familiar to most users and fulfill my requirements. Once I decided the structure of the website, I began thinking about the actual layout and design.
Layout Design
During my research there had been two websites that had particularly appealed to me : anderbose.com and purpleraincloud.com I especially liked the modular design and colours/textures used by Anderbose. I tried to create my initial layouts using a variety of industry software packages including Photoshop, InDesign and Illustrator. I found that Illustrator was the easiest to use for creating the rough layouts because it allowed me to set the document width in pixels and I was able to position elements on the screen easier than in Photoshop because it did not place every new element in a new layer. I experimented with a couple of colour schemes and layouts:
After much deliberation I decided to work with the cream on black modular design and began to think about how this could be converted into a wordpress theme.
Developing the WordPress theme.
One of the reasons why I chose my hosting provider was the fact that an automatic install of WordPress could be done via the CPanel thus saving the tricky requirement for creating various database folders.
Meanwhile, I had purchased the book WordPress 2.7 Complete by April Hodge Silver and Hasin Hayder, published in May 2009 by Packt Publishing hoping that it would help me build the theme from scratch. However, I felt that the book did not go into enough detail on how to do this because it assumed that the user already knew about html and css. Consequently, I turned to the web for help on on to create a WordPress theme. Fortunately for me I found an excellent tutorial on www.wpdesigner.com which went through the code required to create a complete theme in baby-steps and really explained the purpose of each piece of code. I can highly recommend this tutorial if anyone is thinking about creating a theme from the beginning.
Once I had created all the PHP files required to make the theme work, I began to experiment with the style sheet to see what effects I could achieve. Using basic CSS I was eventually able to replicate a layout very similar to my initial layout by applying a 1pixel border to each div. However, this did not look as stylish as I had hoped and I began to research how to create rounded-corners.
Rounded-corners
It would seem that I had un-intentionally chosen a design that I would be unable to recreate using CSS alone. I discovered that it is not possible to create rounded corners using CSS. Yet they were everywhere, so it must be possible! ? After trying a couple of rounded-corners tutorials, which involved positioning an image of a ’rounded-corner’ 
at the edge of each div, I gave up deciding that it was too complicated. That was until I read about slicing layouts and positioning them as background images in the html code.
Web-Slicing
After learning how to slice my layouts for the web, I realised that I could enhance my original design and add some different visual elements. To add depth to the design I developed a smoke background effect in Photoshop using various techniques. I then placed elements from my original modular layout on top of the smoke background and applied an inner glow to each ‘box’ to add another dimension to the design. I was really pleased with the effect that this produced.
I then ‘sliced’ the design according to size of my header, container and footer so that the images would seamlessly slot together. The slices were produced in Photoshop because I was able to optimize each slice ready for the web. It would have been possible to produce the slices in Illustrator, however it could not handle the raster effects that I had applied to my design so I decided to stick with Photoshop to make the slices. I then uploaded the images and wrote the HTML to position them within my layout. Initially the text did not line up with the elements, but I was able to overcome this by adjusting the padding for each div. I had the greatest difficulty trying to align the navigation links with the buttons slices. Eventually due to time constraints I gave this up as a bad job and thought that I would be to return to this later, so I left the links without any button image.
The final home-page design sliced and live on the web. I applied a different slice to the portfolio container without the banner element so that there was more room for my work.
However, I was unable to make the slices work correctly with the blog page, because of the sidebar and container divs being aligned vertically. Thus, I decided to revert to the CSS borders temporarily for this page hoping that a solution would present itself later.
At this stage in the process I was reasonably happy with the layout, so my attention turned to how best to add my portfolio content.
Portfolio Gallery Plug-In
Although it is possible to easily add and position images within WordPress pages I wanted to make it easy for my audience to enlarge my images and scroll through my work. Rather than spend time developing a gallery I decided to use a WordPress plugin. After researching what was available I installed the nextgengallery version1.5.2 gallery developed by Alex Rabe. The plugin was easy to install and its interface was very user-friendly. Initially I had the idea of creating two ‘albums’, one for print design and one for interactive design. I began uploading images into my first ‘gallery’ for the Beside the Seaside Stamp designs.
I then placed the album tag into the portfolio page. I was amazed at how easy this process was and I created my second gallery for the Seasonal Cat Postcard designs. The only thing I was concerned about at this stage was how large the font-size was for each gallery label. I tried to edit the CSS for the gallery and nothing seemed to work.
Each thumbnail linked to a separate page that I was able to apply the portfolio page stylesheet to. After tweaking the padding I was happy with the layout of each gallery page and I was especially impressed with the image rotator that appeared after clicking on the first thumbnail. This enlarged the images and allowed users to scroll through my work. I was also able to add a description to each piece of work.
Things were going well until I decided to upgrade the plugin! After upgrading the plugin strange things happened to the gallery layout. The gallery labels became enormous and a border was applied around each gallery. Quite frankly it looked ugly and I was distraught! I tried to fix the problem by editing the CSS but nothing seemed to work. Thus, I had to re-think my design! Luckily the individual gallery pages seemed unaffected by the upgrade, so I thought that I might be able to overcome the problem by creating my own thumbnails and links from the portfolio page to each of the gallery pages.
I created a new layout for the portfolio page to overcome the problems with the NextGen album view. I created my own thumbnails with rounded borders and linked each image to the relevant gallery page. By the time that I had completed this for each of my galleries I was a lot happier with the portfolio layout than I had been before – so the upgrade had a positive outcome in the end.
Browser testing
Throughout the construction process I kept testing my website in different browsers like Firefox and Internet Explorer. My browser of choice is Safari and there were no problems with the layout in this browser. Firefox added an additional ‘link’ border to each of my thumbnails in the Portfolio page. As I do not know how to fix this I have decided to live with it for now until I can find a fix. However, Internet Explorer made my layout look amateurish – enlarging my font and adding extra space between my content. I tried removing the space between tags but this did little to improve the situation.
Contact Form
Rather than add my personal e-mail address to the website and risk receiving lots of spam I decided to use a contact form. Fortunately WordPress has lots of plugins for adding contact forms. I installed the contactform7 plugin by Takayuki Miyoshi. However when I placed the contact form tag on my contact page the size of the form was too large to fit in my existing background. This combined with the Internet Explorer browser issues reinforced my decision to create a background that would stretch with the content.
Elastic Background Images
When learning about slicing images I had read about creating layouts that stretch to fit the content. Initially I thought that this would be too complicated to achieve so I went with the fixed height option. But I realised that I could not overcome the spacing issues unless I did something about the height of the background image. Knowing that I would have to re-slice the layout I decided to evaluate the existing layout and I decided to make some changes. I decided to remove the banner box and replace it with something more meaningful that would communicate the purpose of the site.
To create this design I created the text (Gill sans bold) in Illustrator and applied an inner glow with a slight blue tint so that it would match the smokey background. I then placed the text into Photoshop as a smart object layer. I created the text in Illustrator because I did not want it to appear rasterized. I sliced the header so that I included the top of the box below. To match the new header I added blue to the inner glow on the box frame.
To create the elastic box effect I then made a 1pixel high slice which I then applied the following CSS: background:#000 url(‘images/newpixelwidth.jpg’) repeat; This allowed the 1pixel wide slice to be repeated in the container div to fill the gap between the header and the footer. 
The Footer slice included the bottom of the box.
The contact page now fitted the contact form. This technique was also applied to the blog page which was also vastly improved. Finally I adjusted the colour of the font used throughout the website from white #ffffff to a light grey #c2c2c2 so that it complimented the smokey blue theme and reduced the glare against the dark background.
Portfolio Content
The images for the portfolio were all made using the screen capture facility on my mac which automatically saves the images as .png files and I then uploaded directly into WordPress. The Ugli Buni sketches were scanned in and then captured on screen to save time optimizing for the web. Unfortunately I was unable to add an example of the Flash content to the web site because WordPress would not allow me to load the large file sizes. As a temporary measure I have loaded screen shots of the presentations until I can resolve this problem. I may have to set up a sub-directory of my website and load the Flash content there and not in WordPress. Given the time constraints for the project I have made the decision to investigate this later.
