Client - wireframes

Ahead of meeting my client on Monday 18th, I've laid down some wireframes that provide a suitable array to display my client's information.

It is likely that the homepage will take one and then the inner pages another, but there is no reason why a continuous layout cannot be used throughout.

PRP - first artifact

On completion of my PRP document, I had identified two possible artifacts that I could setup and produce.

The first of these was to make a modern, desktop website, which utilises all the popular CSS design features that are now popular, and then see how this renders on a touch screen mobile device. From this, I should be able to learn through mistakes what does and doesn't translate from desktop design to mobile.

--

To begin then, I decided to look at some of the best sites made in 2009. From this, I could find some of the recurring popular design features.

One site that seemed to sum up 2009 CSS was businesscardninjas.com.

In a word, I love the individual aspects that this site manages to draw together.

Firstly, the logo is a great example of semantic design. It is a business card! It uses a nice custom typeface that reiterates the ninja aspect of the company name. Also, it employs the glossy web 2.0 aesthetic that is popular. The layering of this above and below the main content div works well, adding more detail to the site.

Second, the colours are bright and vibrant. The blue contrasts perfectly with the orange, without being garish at all. Furthermore, it is subtle, but gradient effects are used in the blue to create a more pleasant effect on the eye.

Numerous images are used on the homepage, the leading one being quite large, covering the breadth of the site. Atop this is even larger type, in the background blue colour, which really stands out and you notice the textual content.

The sister sites that this site shares are made available in another popular CSS design - a chunky top navigation bar which operates a sort of tab system - the current site being the open tab.

Again, a very subtle gradient effect is used alongside soft grey type which creates a really contemporary look.

The footer is really large on this site too, yet it seems to have shunned all the internal site links and copyright information you now normally see.

A three column layout is introduced also here, with bright, inviting colours used to draw the eye, with large blue headings, which in a few words sum up the piece very simply.

Lastly, another popular design choice for gallery type items is Lightbox. This plugin puts a darkened canvas on top of the currentwebpage and the image sits atop this.

--

These items I will now try and recreate in my own web design, which will then be analysed on touch screen devices.

@

Live client - Foot Power website analysis

Another foot health inspired website I have found in Foot Power, which covers for the Brighton area.

The first thing you notice is the mid grey background. This doesn't really do anything for the site, and a coloured choice would probably give a fresher feeling to the site.

Another thing that I noticed instantly was the use of block capitals and Times New Roman. It looks more like something that you would get from a Word document, not a website.

Furthermore, I think it can help putting a photograph on, so that the identity of the practitioner isn't as daunting to people who invite them into their homes. However, I think there is a fine line in getting a personal photo right. This one is on every page, which I question.It can look amateur and not put over the right message if the photograph isn't good. My recommendation would be to get a proper photo taken and then utilise it on an About Me page.

Again, it can be seen that personal photographs, this time of feet, can have quite an off-putting effect. Feet at the best of times can be something quite difficult to stomach so seeing these here, although perfectly acceptable within their context, can give an unwanted feel to the page. Again, if you are to do it, do it with proper professional photographs, and limit the goriness.

Another notable thing that can be seen in the last screenshot is the addition of random buttons, placed to the bottom left of the page. These are not instantly noticeable and do not appear to be a considered placement.

--

If there is one thing I like this site for, it's the categorizing of the content and I will suggest this to my client. The navigation options are clear and understandable, although admittedly could do with a little better ordering: about me and where I am seem to logically fit better next to each other rather than apart.

What is odd is that the pictures used are actually quite pleasant, yet they don't always add to the site. This door image is one example. OK, you can see that the practitioner has a nice house (this perhaps being the main function, for reassurance to the customer that they aren't going to be visiting a dirty, run down building) but I don't think you need this. It seems a little unprofessional. A clean, aesthetically pleasing site, that is well formed and considered in its content should be able to put over the quality of the practitioner.

--

As with other sites I have reviewed, I found a page that lists in a Word doc type, copy and paste job, on foot problems.

This is too much text, admittedly it might be good content wise, and headings have been used to divide up the content, but I think it could do with more breaking up, highlights, larger headings, perhaps even graphics used.

--

The Product page is a worthy reference point, as my client Footworks intends to put up a few items that can be purchased, possibly through an eBay shop applet.

The most obvious thing you see on this page is the pink, and so it could be ascribed that it works in drawing your attention, but there is no continuity with this design choice, it has not been used elsewhere on the site and so I believe this to be a case of the practitioner simply pasting it in from Word again.

--

Overall, photographs can work well and add to a site what text cannot, and so this confirms the main recommendation I will make, which has been gained from this site: take care with the visual quality of photographs, make sure they are professional and suitable i their content.

@

Brr it's cold, but looks cool

This satellite image is cool. Literally. It looks like something out of Planet Earth except its us in UK.

@

Live Client - logo development

Communications have been going back and forth and modifications are being made to the logo designs I put forward.

The burnt orange colour was selected by Sue, different from the regular medical green. It was asked whether the foot print graphics used in the green logo could be transferred across, ora foot added to the original orange so to be able to provide more visual indication of the company.

This has now been done and the decision becomes even tougher. I really like the Niland typeface used in the first logo, but then again like the simplicity of orange with just the Trashhand font and integrated footprint graphics replacing the Os.

Perhaps overkill, but the client asked for a merged version of the two and I have sent this along for final decisions to be made. This will have a knock on effect for business cards, letterheaded paper, and of course the website design, so she would like a few days to decide.

@

Extra curricular

With the bad snow today I have been unable to get to my client. Instead we have been communicating via email, and have arranged to meet this time next week.

To fill the void, I have returned to an extra curricular website project I've got on the go. Crave Promotions contacted me after doing their website and asked if I would be able to do a bit of extra work for them, this time being graphics.

From a rough doodle I was asked to create a digital copy.

The first attempt I made was plain black and white.

The biggest problem I thought I was going to encounter were the swirls, but on trying out the transform properties in Photoshop: skew, distort, warp it has made life easier. Also, the Adobe Creative Suite lets you transfer items across so I made use of the smooth line tool in Flash.

Adding a starry background and using Jimmy Neutron as inspiration, I really like the finished thing. It glitters as stars would and has a nice span of the colour.

@

Live Client - Heelings Foot Care website analysis

Another site that bucks the trend and leaves old web design behind is Heelings Foot Care.

Firstly, it appears that an array of terms have been used online to create a witty title for foot health practitioners. This though seems to be as far as they go. They then don't reference it in their visual imagery - perhaps because they don't have the capabilities to?

This contemporary web design stands out a mile compared with the other sites I've seen.

What's interesting is that the whole site is done in Flash, yet it is only this banner at the start that wipes on. This could be easily remedied - just having the header as a Flash banner and the rest CSS would have be manageable.

Being totally Flash obviously has repercussions. For the designer at least, it would have made an easy job, the layout would have been really simple to implement and get to render across the browsers. However, for search engines, the text that helps feed them would be non existent.

What is also interesting is that Heelings hasn't gone for a website but instead a webcard - a one page site with all the information housed there.

This isn't instantly recognisable, as the services at the bottom I expected to be able to click and explore further. Utilising the one page effectively therefore would be a priority. However, the grouping of content is a little odd. For instance, the practitioners photograph doesn't come alongside his "Quick Word' introduction.

Instead, it sits aside services.

The heading banner features a nice photograph of a foot being massaged, yet the strap line does nothing more than state 'Welcome to the Heelings Foot Care Website'. I feel this space could have been better utilised. A logo or brief intro would have been more effective - the first thing that people read or see must capture their attention. Nonetheless, the site is fortunate in having a contemporary design, which uses the bright splash of blue to provide a focal point, emphasised by the Flash wipe effect.

Where you would expect the navigation links, instead, perhaps quite ingeniously, the practitioners contact details have been placed. Any ordinary user might still expect to click here and explore other pages, so this might cause some confusion.

One good thing about the site that to get it all onto one page means that it doesn't overdo the information. Instead it has been honed, and made to the point.

Spotted dividers work well in breaking up areas on the page. Notably, the text in the image proves a little too light for ease of reading.

A little more white space would help break the information up even more, particularly for longer paragraphs.

--

In all, I've learnt quite a bit from this web page. Sensible grouping of content is important. Placing content in regular places also maintains a consistency that is shared across the web. Also, it is important to break up information, either through graphical dividers, or white space and paragraph breaks to make the information seem more manageable. Lastly, grab the user's attention in the top section of the page - this is the first thing they see and could be all they see if it doesn't prove inviting enough.

@