1. Photo frame
This first one failed largely due to the frame I think. It's a nice idea trying to frame the photographers work within one, but I found it limited valuable screen space. If worked on a little, for instance, trying to get an ornate frame etc then this could go somewhere. However, the haphazard layout of the content didn't really help.
2. Big icon/buttons
Keeping the white theme used on the original, but adding subtle grey gradients, I thought that images were important, being quite an obvious design choice. Furthermore by doubling the way people can understand each link (you have text and the image) it makes for hopefully easier usability, in a sturdy grid structure, advancing on the last design's drawbacks.
Unfortunately though, it still felt a little lacking, a little flat. This partly is due to the nature of his job. Obviously you want professionalism, conservatism, not bright and brash colours for a quality wedding photographer.
3. Showcase the photographs taken
I instantly like the direction this goes in. It's not usual for mobile web, namely due to images like this not displaying correctly on the multitude of devices out there. However, what was established early on in my research was that touch screen phones all tend to have a reasonable sized screen to accommodate fingers. In turn, being touch screens they are modern with fairly reasonable resolutions - typically 480x320.
This one ended up looking a bit too theatrical, with the red curtains. But it put me on a good track. The contrast achieved with white on black will certainly lend itself to legibility, but at this stage the links didn't look too much like buttons.
I rotated the logo to increase space, and decided to try links in the top of the page - where the user will tend to me looking first, and most importantly, changed the picture. It again pulls the eye in and stands out through contrasting with the black menu. The transparency may need to be a bit increased though, as I want the picture to shine, not just the menu.
I included the arrows after each link, a popular convention, to demonstrate that they will take you somewhere when clicked on. This is a little technique picked up to aid cognitive understanding.
Having run out of space for the contact details, I decided to go with a message icon. Being aware of the detrimental effects ambiguous icons/images can have, I believe that the envelope should be pretty informative should the user be looking to write a message, or obtain the email address. Obviously, this will be proved/disproved in user testing.
For some variation I tried another photo and believe I have hit the right note. It incorporates beautifully the classiness one would expect of a wedding photographer, complemented by the non-standard typeface. How to implement this custom typeface will be an important lesson learnt.
This design links in well with the desktop site - a minimal white affair. Furthermore, the buttons are all well spaced, should be easily tappable and also easy to comprehend, having provided only the staple mobile content necessary. It may look a little too pasty in comparison with the previous iteration, but I believe that using gold as the third colour in my palette will work nicely, adding that touch of quality and class.
--------
So far so good. I have good hopes in accomplishing what I set out to do for this artifact - promote design as a valuable commodity in mobile websites.
Now to build it.
@
No comments:
Post a Comment