Client - Footworks - user testing

Footworks is 98% complete and so before signing off the product you can check out the final site here:

footworksbysue.co.uk

Whilst you're at it, fill in this quick questionnaire and let me know what modifications you would like implementing.

@

PRP - artifact #6 - chinese horoscope development

Original:

Feedback suggested that people liked the intricate background but that the content above wasn't easy to look at - jarring occurred. So, I tried altering the background to see if anything else would prove less distracting.

It appears not!

To help combat this I have altered the button text to white, added more shadow to the boxes and reapplied the white layer with opacity on it, whilst sourcing a really nice picture.

It has an ornate wallpapery feel about it, and usability wise, people have desktop background with app links atop them so it is feasible after some modification. JUST TOO CLASHING!!

@

PRP - artifact #6 - another design

I gained inspiration for this design after finding an iPhone app called Flickit.

Within the app itself it continues the rounded corner buttons look. Slightly different from what we use in desktop websites, the film reel slides left to right. It acts as an input required slideshow.

I decided to consider this design also for artifact 6.

This first mock up incorporates quite a few of the lessons I have learnt about mobile design.

1. Buttons should all be large

2. List menus work

3. Button menus work

Henceforth, I decided to put all these into one package. As an addition, I tried the status bar field at the top as well. I think similar pieces of information, such as twitter, would be sensibly placed up here where people see other data should as the phone's signal, time, battery life etc.

I proceeded to add colour and experimented with green. Originally bamboo was contained as a texture but soon replace in mindful of requiring even more data to download.

Personally it just didn't feel right. Green is for nature, and therefore didn't feel as appropriate as could be for horoscopes.

In its place I implemented the colourings of a client site I have designed and implemented: The Energy Specialist. Indeed, this content focuses around feng shui, Chinese Horoscope etc and gave me the inspiration for this app's topic.

I much prefer this styling. It is less garish, more sophisticated. The cappuccino beiges and pale greys blend nicely and are more in keeping with the idea of chinese horoscopes - metallics holding something of the mystical quality associated with astrological predictions aka horoscopes.

One change I will work on though is getting the text to stand out a little more and contrast. Gold upon darker beige, or white upon beige isn't providing contrast enough as is necessary for devices that are used and viewed in variable light conditions. Increased drop shadows should help in this instance.

Notably the images used are square and not rounded corners, which is something more often associated with iPhone. I wanted to try and create a neutral device design.

@

Artifact #6 - Chinese horoscope web app - design ideas

Having worked with a client before on Chinese Astrology, I thought I could develop something similar along those lines for the mobile web too.

Incorporating earlier designs which were a bit more unique in their presentation, I have mocked up the following two ideas in Photoshop.

One is quite modern in its styling - blacks, shiny metals and gold.

This design wouldn't look out of place on the iPhone due to the colours it uses. I think it may be a little too cliche and tacky though. I prefer sophistication.

Button wise, these should stand out due to the shiny edge that has been applied. However, the glossy effect is not present and so they don't instantly impart touchable button.

-----------------------

Meanwhile, the other design is a bit more traditional in that the idea was inspired by a Chinese watercolour.

Red and white are not typical colours you would assocate with Chinese for a theme but I like this diversity.

It still needs developing a bit more, the red buttons seem a bit overpowering and non distinguished from the heading. However, the glossy shade applied to the buttons makes them seem more touchable and this is good for usability.

I learnt last time that by applying a design that is specific to one device, ie using the iPhone app design on an Android, it felt odd. Psychologically people would think it off kilter. This design is custom and unique so is not associable with any OS.

------------------

Notably the buttons on the homescreen are all quite large. This is intentional. Also learnt previously was that the size of buttons could decrease as you progress inside the site.

@

client - Footworks user feedback suggestions

One important lesson learnt through user feedback has been that they couldn't find their way back to the homepage once they had clicked into the site.

More familiar users of the web would typically identify the logo as housing this link, and indeed, this was how I initially coded it for Footworks by Sue.

However, taking the comments on board, I decided to better illustrate the capabilities of the logo.

However the first person to use this modified version believed 'home' to be part of the company branding/naming. In short, it wasn't an effective solution.

Fortunately the follow up solution was very easy to implement. The navigation options in the site work because they are all laid out in an easy to follow format. With a spare place under the information column I added a 'homepage' link.

Now when people want to get back to the site's first landing page, they will typically search around the other existing options that they know to work and find this additional one.

And such to say, the homepage link issue hasn't been mentioned again.

@

Some useful jQuery plugins...

Want a sliding photo gallery? Growing and shrinking icons? Tabbed divs? Image-free buttons?



http://webdesignledger.com/tools/14-fresh-and-useful-jquery-plugins

More and more I'm starting to think its goodbye time for Flash. Apple certainly think so.

@

PRP - artifact #5 - Opera Mini 5 render

Unfortunately the Opera Mini render on their site uses a smaller than usual resolution device. Touch screen nowadays sport a resolution of at least 320px (thanks in part to requiring a suitably sized screen to accommodate finger pushes).

Like Nokia, the results were patchy and conflicted with the JQTouch plugin.

Watch the Opera Mini 5 run through.

CSS3 was missed completely. The acknowledgement of button touch was overruled by the browser's own styling, it didn't render at all the red overlay specified by :active in the CSS.

More importantly, it didn't allow the user to navigate to any of the sections. This was no doubt again a conflict between JQTouch and the browser regarding anchored sections.

------------

In all, poor and not very hopeful when thinking about coding an aesthetically pleasing, quick loading, cross-browser site.

@

Puny PNG

Found this little tool after watching BBC Click.

Similar to a compression tool I blogged about previously, Puny PNG shrinks image size and accepts a few of the common web image formats, JPG, PNG, GIF.

The claim is it swallows up to 40% of the memory size without hindering the quality. Useful as Photoshop sometimes only goes so far.

PUNYPNG

@

PRP - artifact #5 - Delicious Dahl on Nokia S60 platform

On this occasion it appeared that the screen reader was interfering a little with the S60 platform. After visiting so many pages the user input thereafter just wasn't actioned. When thinking about it, this could be due to limitations with the SDK or the OS, perhaps implementing the limit of how much data can be stored locally/cached on the handset.

View the Nokia S60 platform run through here.

As can be seen, the styling extends off from the original design as I created it for 320px wide. The Nokia is actually 360px wide!

Rounded corners worked somewhat on the homepage, but were quite patchy in their rendering. The background gradients on the main menu list also didn't execute. After clicking from the home screen, the rounded corners on inner pages simply didn't show at all, clear cut rectangles instead.

Again, this goes to show that cross-compatability (if that is what you're after) needs to have a few back ups available.

@

PRP - bemoko - cross-compatability on mobile platforms

I found this in webdesigner mag. The premise looks good - adding the bemoko library, you code in XHTML and CSS the design you want. What it then does is allow graceful degradation when accessed on lesser equipped devices.

Great in respect to my last artifact which demonstrated the need for cross-compatability in devices.

Shall put it to test and see how it goes.

@

PRP - artifact #5 - Delicious Dahl on Android

Although JQTouch and Delicious Dahl were created primarily with the iPhone in mind, I thought it would be worthwhile to just check the web app on other devices.

Enter Android.

For some reason the emulator on Mac doesn't display all of the animations. On my HTC Hero they indeed work, albeit a bit stuttery - the processor speed is not as capable as iPhone's.

I was pleasantly surprised that the layout and CSS3 functioned on Android - rounded boxes, gradients all get a tick. Nonetheless I am aware of what doesn't.

However, touch events did not trigger - specifically the active states for the buttons. On iPhone when the button is tapped an :active class is activated displaying a red background colour to show the button has been pushed. Here on Android, nothing.

The consequence of this active styling failing is that the user isn't aware their input has been recognised, the web app appears to be unresponsive and so they push the button again restarting the process from scratch meaning extra waiting time overall. Frustration and agitation is not wanted.

This all occurs due to the way JQTouch targets iPhone specific touch states in the coding. The workaround would be to simply write some extra fall back code in the CSS for other handsets. Lesson learnt.

Another element that differs from the iPhone is that the browser menu bar isn't pushed up off the screen. Again it is a case of JQTouch targeting the specific code in Mobile Safari. It'd be good if this plugin library could be extended in the future to work with the other smartphone OSs.

@

PRP - artifact #5 - The Delicious Miss Dahl iPhone app

Artifact 5 is done and I'm pleased with the progress I've made with JQTouch. Watch a video run through of the app here.

Alternatively, If you have an iPhone or iPod Touch you can point it at tinyurl.com/deliciousdahl too see it for real. For the optimum experience, add it to the homescreen and load it like an app. Full screen is available then.

Lessons learnt:

Use % for widths and heights means that it'll scale in landscape. As I opted in some places for px it meant the screen messed up a little in horizontal. Nevertheless, to counter this problem I learnt about .landscape class that JQTouch provides. (This is what people see if they look at the site on a laptop/desktop browser - their screen is landscape so they get the warning message).

Use CSS3 to lighten the load... gradients and drop shadows being notable techniques now achievable. BUT, remember that some phones don't work with this so provide a fallback i.e. a prerendered graphic.

Try to be original - although the iPhone is reknowned for good design, after making it to be emulate an iPhone's native styling (colour schemes etc are different) I want to push the boat out and do different design... perfect opportunity for artifact 6.

@

Designing for the iPad

Although my research has involved looking at mobile devices, I meant this to be ones that go in your pocket, and you call people on.

However, with the introduction of the snazzy iPad, it seems that web design may have a new resurgence. Although apps are hugely popular on the iPhone, surfing the net is one of the iPad's key selling points. Fortunately, it isn't going to be too difficult a job to achieve. For one, Mobile Safari is pro HTML5 and CSS3. For two, it isn't Internet Explorer!!

http://www.8164.org/designing-for-the-ipad/

This article is good for introducing the key concepts for designing on the new touch screen slate.

For one, we have gotten increasingly used to people's screen resolutions increasing. Although a lot larger than the iPhone's 320x460, the iPad has a portrait aspect of 768x1024 (not including browser chrome).

The device is meant to be workable in any orientation though so it would be wise to consider using more fluid layouts, or limiting the master div to 768px. Again, compared to the 1000 pixels we're able to work with nowadays, it is a step down, but its still workable.

@

CSS missing a tag? image-align?

In the middle of making my portfolio I needed to justify a row of images that will make up the gallery.

Three images in a row. The left aligning to the left boundary, the right image aligning to the right and then the middle image to be centered with equal spacing in between.

For text, you simply use text-align: justify in the CSS, however applying this to images obviously doesn't work.

I thought I could try and trick it by placing the imgs in a p tag. Fail again.

With a lack of CSS to make up for the problem, I have had to result to a round about hack, the solution being mentioned here.

@

PRP - artifact#5 - a good cooking app

I've decided to make a cooking app (although it will be quite basic as I don't really have the cooking resources to make one!)

This decision was made after the great success of Jamie Oliver's effort.

Firstly, I praise this app for being different in it's design. It doesn't follow the iPhone way of thinking (well for the main body anyway).

The background throughout it this fixed rustic wooden floor. Elsewhere, modern web design has been employed - the jagged edge of the paper, along with heading tags which loop behind the background. These headings work well - the contrast in colour allows you to easily section off the content in your head and also easy reading of the text.

Furthermore, the custom font really makes a difference. The logo stands out well on the brown wooden planks and is a little atypical for an app, altogether. This difference is good.

The use of non-linear alignment also is interesting. Most things nowadays tend to be uniform, perhaps grid-like. The menus here are blocky and left aligned, meanwhile, the content on a paper graphic is positioned to the right of the screen.

It is really on here in the app that you'd be able to get away with so many rich images, graphical components and videos. Alternatively, to download this on the fly for example, in the mobile browser, would prove quite a wait and so indicates a wise choice for my upcoming artifact - preload graphical components in an iPhone inspired app.

The images really make a good impression and have been put to good use. They stand out and of course help illustrate the meals beautifully, being highly persuasive. The use of semantic visuals, such as the shopping list on notepad paper and in a cartoony font works well. Notably though, the app buttons a top this (in the black bar) could go unnoticed to some users. If you are to go all out with a unique visual design, then it would probably be wise to do this consistently... just as they do in the third image, with menu tabs pointing down. Again, this unique design is nice, and you notice this.

Looking at this app from a standpoint, the amount of buttons to push does feel a little daunting. You have the top menu bar, then the pointed tabs, there could sometimes be a menu list, in addition to the regular iPhone app-like buttons at the bottom to, which allow you to visit different sections in the app. This is something that is important to remember. Don't scare the user by providing too much at the same time. Perhaps try to be inventive - provide links behind reveal tabs, or pop down menus activated by one button.

The use of videos is a great idea. It makes use of the iPhone's great screen and also proves another benefit to aiding the user in cooking. I like how the video is slotted in without any special design, it simply flows with the rest of the content. Importantly, the use of the play icon, is noticeable and a universally recognisable symbol.

The same goes for using triangles at the end of the menu list - it enables the user to recognise this button will take them somewhere. Furthermore, the use of an image in the menu list allows you to see what is behind the link. Ultimately this just builds up a greater sense of an understandable design.

-------------

Overall, the uniqueness of this design makes it an enticing and effective piece. The realistic rustic visuals work well, surprising really on what is a shiny, snazzy gadget. Whereas some sites/apps use a couple of realistic graphics, this one makes them more of a feature piece. Again, different, and so noticeable and commendable.

Important lessons have been learnt for artifact 5 (content-wise) and also artifact 6 (design wise) - the ensemble result of all this research.

@

Inspiration for my portfolio re-design

Fuel Brand

Although not the best for immediate UI, this site draws attention through its initial sparsity. The way it spans the entire screen gives it quite a strong presence and I like the use of quite basic hues.

The site could be criticised for not being formed in a more typical website way - a positive or a negative?

-----------

Rareview

I really like this site for a number of reasons.

#1 being the glossy box that holds the key text. This in itself is quite straight forward and to the point. This glossy box look has been made popular, and familiar to the public by Sky's use of similar graphics.

#2 The flowing rainbow colouring also has a nice soothing effect on the eye and limits any chance of the site feeling dead.

#3 I like the chunky but simple navigation bar at the top. It holds its own without being too distracting on the rest of the design.

In fact I had a look at the inside pages and particular liked the impact this purpley (turning to pink) hue had. It really stood out on the page and felt different - thinking about it, how many purple sites can you recall?

-----------

Tick Tock

This one is very graphic design oriented, but the large text has impact. That page upon which it sits is the actual wrapper div and holds all content within, scrolling above the fixed background. The colour palette would be a little limiting for a portfolio that needs to impress, but big type works for me....

-----------

FOUR24

Of all the sites, this one I liked the most. The colours is warm and welcoming, being quite uplifting at the same time. The gradient people probably wouldn't identify but as with the las recommendation, I think the gradient helps define the positive characteristic of this site. It draws your eye to the center and lights up the important content.

Furthermore, the type is large and draws the eye, being flanked by additional contemporary typefaces. Subtle illustrations add more character to this visual piece, such as the flame within the O. More importantly, if you care to look at what the site is about you would never associate the two.

---------

Jon Wallace Design

Again, I like this site for being 100% width and having clearly defined sections, that have lovely gradient and drop shadow effects to subtly please the eye.

---------

Adworks

Lastly, in comparison with the other finds, this one could feel a little uninteresting, no doubt due to the heavy greys in use. However I think it holds good ideas for demonstrating work. The five icons, once clicked (although hovering and slideshow could achieve the same effect) allow you to quickly demonstrate your capabilities, with the important visual proof then displaying center of the screen. At the same time, it allows you to neatly present your homepage whilst also categorizing for efficiency.

A person visiting a portfolio site will probably be encouraged to spend some time there if they see a range of the work, not instead of hiding it behind a "portfolio" link.

----------

These sites all offer useful pointers for my redesign. Importance lies in drawing attention through colour and type and sizing, but then also the work needs to maintain this. Expect follow up designs soon!

@

PRP - artifact #5 - first attempt at JQTouch

After a lot of playing around and reading up on the subject, I have made good progress in getting started with JQTouch.

Admittedly it was frustrating at first, yet thats the case for most new bits of technology that you try out.

Despite the package coming with a few pre-made CSS stylesheet, I decided it worthwhile to learn how to put a design myself and so made one from scratch myself. I can potentially now use this stylesheet in the future, for client work or commercial work.

It's got some nice new CSS in there:

Gradients - TICK

DROP SHADOWS - TICK

FIRST-CHILD and LAST-CHILD - TICK

ROUNDED CORNERS - TICK

These last two in particular proved a revelation. It means that through CSS I can do this:

And any menu options in between will ignore the rounded corners that I have applied to the first and last child in the menu list. It's geeky, but stuff like this I love!!

-----------

The dummy version that I have been playing around at uses the slide to the left animation that occurs frequently on the iPhone. And all thanks to JQTouch it works in any decent mobile browser!!

So those of you with iPhones or ipod Touch's, check out my first dummy run of using jQTouch. It'll not show you much but it works at least:

ashleyelton.co.uk/artifact5

Onwards and upwards... Now to making my own design.

@

Photoshop CS5 - yes please, it does magic

The desert road scene and panaramic cloud in the second half of the video in particular caught my attention.

How does the computer know how to do that? And so well?

Any dodgy crops now can be a thing of the past. This thing can make content from more or less nothing!!

@