Portfolio sites

I spent a great deal of time last year researching Portfolio sites when putting my own together www.onebigegg.com.

I found that the hardest part was the wording for advertising my services.  In the end I settled on :

A well designed website is now a fundamental starting point for any brand or business.
At One Big Egg, we’ll work with you to fully understand your business and customers, then design and build you a modern, stylish website that is eye-catching and highly functional to transform your online presence.
Whether it's a redesign of your existing site that you require, or a site built from scratch, One Big Egg can a provide fast and cost effective service.
We also offer graphic design services - business cards, posters, leaflets, printed DVD / CD's and more.
If you have a project you'd like to kickstart - please contact us to discuss - we would love to hear from you.

Having viewed numerous other sites for inspiration, I decided to follow a common trend by breaking down my services into three categories “Small / Medium / Large” – though I’m taking a punt with “Large” at the moment given that I’ve not yet actually developed an e-commerce site!

I have decided to offer Responsive as a standard across all three packages as I do believe that all sites should now be designed to look good and be functional across all devices given that such a large portion of web consumers are now viewing sites on handheld devices.

I have also spent time this week redesigning my business cards for One Big Egg, and have started work on developing a design-oriented CV (I had not actually thought of creating a CV specifically for the design side of my career – to date I have just made slight amendments to the opening passage of my finance accounts-based CV.

I frequently view websites of local and other specific web design agencies to see what vacancies they have.  Ideally, I am looking to relocate back to Swindon so have been concentrating my search there.  Once my CV is ready, I plan to contact as many design agencies in Swindon, and ask them which recruitment sites / agencies they advertise their vacancies with, and at the same time show them my CV with the hope of opening a dialogue with them and sell my skills…..

I also plan to focus my job search on Bristol as this city is commutable from Swindon and has a reputation of being a digital hub,


RedStar Foods: Considerations and further development

Once the framework of the actual site was in place, I next needed to produce some images of the products.

I created some labels in Photoshop, incorporating the new logo.  Initially, I printed these labels out and attached them to previously unlabelled jars of home-made chutney and photographed them (see screen shot below):


I soon realized that a better solution was required for the following reasons:

a)      The visual impact of the site will be from the repetition on clear, crisp and consistent product images, and it was going to be difficult to create identical positioning and light conditions each time a new product is to be photographed

b)      Unable to have regular, free access to a good quality colour printer

c)       Standard of cutting and gluing of labels looks unprofessional when photographed

d)       Limited supply of chutneys!  And many of the products (mango chutney, picallili etc) non existent

I therefore decided to concentrate on taking a standardised good quality image of an unlabelled jar that would be my base template, then work out a system for making the labels ‘fit’ the jars and look authentic (in Photoshop).

Also, I will play around with filters and colour levels in Photoshop to see if I can make the unlabelled jar of chutney also look like convincing tomato sauce, picallili, mango chutney etc.

This will give me much greater flexibility and scope for adding labelled products to the site.  And as so often seems to be the case (I’ve learned during this course…) imagery manipulated in photoshop often looks more authentic than the real thing!

Site Architecture:

Landing page = Categories (with landing overlay Manifesto?)

Category pages = contain Products

Product Page?  Or overlays for product info?


Links page

Contact page

Suggestions page

Menu items displayed on every page:

About (termed “Manifesto”)


Links (termed “Comrades”)

Suggestions (termed “Join The Struggle”)

Social Media (icons)


Each category page to have a header indicating the current category – this could be typewritten, and a transform-delay function used to switch from display-none to display:block for each letter, giving the effect of the letters being produced by a type-writer.

Side ‘Ribbon’ slides in from right, letters are typed onto ribbon.

Each Product Tile to contain:

Image of product

Name of product

Product Info (ingredients, taste, use etc)

Context (details of media story being parodied, dates, links etc)

Quantity field and Add to Basket button

Product Info and Context could be pop-up overlays when selected, so user remains on category page.  This would have the benefit of keeping the user on the category page rather than expecting them to go back to, but would this be ineffective with regards to SEO though?  Would it be better to have Product Info and Context open separate pages so that these can be loaded with keywords and descriptions specific to the media story being parodied?  Either way, when the product image is hovered over, a brief explanation of the title is shown over the top of the image.

Floating basket indicator ‘always on top’

Copy in your MP? facility on your order – form of protest.

Image Formats

There are many digital image formats available for use, and it a designer’s job to decide on the format that is best suited for the project at hand.

Only certain formats are suitable for the web – those that sufficiently compress and optimize the image so that they aren’t too big in terms of file size.  Resolution, meta-data, colour richness and are all optimized as there is no point in having image quality that exceeds the display limitations of computer monitors.

In the past few years, with the introduction of widespread broadband use for most users, it has become less important to consider download speeds when deciding on suitable image file sizes.  However, this concern has been replaced with the need to consider downloads speeds when designing with mobile users in mind.

JPEG’s (Joint Photographic Expert Group) use a ‘lossy’ form of compression.  They discard data that is less important to human perception – most people are unable to see any difference between an original and a compressed image.  After compression, a 13MB image will be reduced to about 1.5MB, and is therefore much more suitable for use on the web. Most digital cameras save images as JPEGs, and users can determine the balance between level of compression and maintenance of accuracy.  Overcompression can cause ‘artifacts’ (visible square shadows).  JPEG’s suffer from generation degredaion when repeatedly  JPEG’s are not suitable for images that contain text (for example, banner images with text) – GIF or PNG should be used instead in these cases.





GIF (Graphics Interchange Format) were developed for Compuserve pre-web.  They are made up of 256 colours and can have transparent colour defined – whichever colour is set as the background becomes the transparent colour.

GIF’s are often used to create animations.  A series of images can be stored in the same file, with information embedded into the file to determine the interval between images.  Animated images of this nature can be considered old fashioned though.

GIFs work best with images with relatively small number of colors and large areas of the same colour.  They are often not the best choice for photographic images as these often have more than 256 colours in them.

There was a great controvesy a number of years ago when the owners of the algorithm tried to impose a licence fee on commercial software using GIF’s, which ultimately led the creation and widespread use of PNG’s




PNG’s (Portable Network Graphics) were created by open source advocates looking to avoid infringement of the controversial patent on GIF’s.  They combine the best of JPEGs and GIFs in that they feature lossless compression, and dynamic colour palette (not limited to 256).  They benefit from a more sophisticated form of transparency than GIF, where each pixel can be stored as an alpha (transparency level) value, from completely transparent to completely opaque.  However, IE7 does not support PNG’s transparency, though there are hacks available that will fix this (http://www.twinhelix.com/css/iepngfix). Also, there is a popular argument that as designers we really shouldn’t be wasting our time on the dying breed of users with older versions of IE.


TIFFs (Tagged Image FIle) were originally created as an atempt to get desktop scanner vendors of the mid eighties to agree on a common scanned image file format.  Compression is optional, and layers, alpha transparency and other special photoshop features can be preserved.  This format is rarely used in web design projects as it is not widely supported by web browsers, and the file sizes are very big. TIFFs are best used for print design and desktop publishing.  In fact, printers will often specifically request TIFF files.

<< TIFF files cannot be uploaded to WordPress, hence no image of a TIFF is shown here. >>



PICTs were developed by Apple in 1984 and are now rarely used.

<< Photoshop cannot save an image as PICT format. >>



BMP’s are Microsoft’s standard image format.  They are usually very big files with little compression.  They are usually too large to use on the web and are best avoided for web design projects.

<< BMP files cannot be uploaded to WordPress, hence no image of a BMP is shown here. >>


EPS files (Encapsulated PostScript) are used for vector-based images in Adobe Illustrator.

An EPS file can contain text as well as graphics. It also usually contains a bit map version of the image for simpler viewing rather than the vector instructions to draw the image.

<< EPS files cannot be uploaded to WordPress, hence no image of a EPS is shown here. >>