Never forgot...

We should all be aware of the faux pas within web design, but for those it doesn't come too easily to, check out this site. Dubbed the worst site in the world, it certainly features prime examples of things not to do. The scrolling marquee just sets off the warning lights for a website soaked in styles of yesteryear.

A nausea invoking laugh in the least.



http://www.angelfire.com/super/badwebs/

Image compression tool - smush.it

Although broadband speeds are increasing and the Government proposes 2MBPS for everyone, it doesn't do any harm to compact the files that you want people to see online.

A great tool available for image compression is smush.it. You install it, direct it to your site's images either by uploading or providing URLS and it outputs your smaller images in a zip telling you how much data has been saved.

In fact, a great article in .net issue 192 offers advice and incite into the whole topic of web compression and features smush.it.

@

Hover effect

In a time when we want more minimal design but then also more information, it's difficult to find a way to manage both. Fortunately, there is at least one solution.

I like this, and think some of my peers (Jackie and Sarah already thought up the idea and employed it on their Goldfactory design) are really on the ball. - Adds another layer to usability but also desirability of the design.

@

Browsershots.org - for IE6 testing

The problem with Windows is that once you update to a newer version of IE, you cannot them officially return and install a previous format.

Enter browsershots.org which has been going for a while, but allows you to test your site in all it's "glory" or most likely not, in IE6, 7, 8, plus Chrome, Firefox, Opea, on Mac, on Linux. Really there are loads of options.




Furthermore, you can define the size width of the intended user, along with whether Flash should be switched on, scripts too.

Bestwood now displays perfectly in all the major browsers.

IE6 (with PNG fix and double margin float rectified)

IE7

Opera

Firefox

Chrome

@

Font folder - Mac & PC

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

This site I came across after having always wondered

whether a certain font on PC is also on MAC.

It lists in a simple way what is included. Still, shan't be a problem once CSS3 comes along.

@

Mining - Flash interactive timeline

The website is getting close to completion now. I've made my interactive piece - the Bestwood timeline which hopefully will provide a more interesting point of information for younger viewers.

On this occasion it was the aesthetics that I had trouble with more than the actual Flash coding.

Using the Cadbury World experience as my inspiration (a great vibrant piece that will surely attract younger viewers) I tried out some layouts for the timeline.

This first one was a little too rigid. It appears a little dull.

This second one has more visual interest due to the bendy nature of the lines however I feared it may be too over the top?

I arrived at a compromise between the two, it has the curvy lines, but then I tiled it too with a slate wall image. At this stage, I still wasn't entirely satisfied however. It seemed to be a little bland.

I went into Photoshop and added smudges, and dirty marks so that the coal mine theme was more evident.

When it came to the Flash motion, I wanted to make it roll over, roll out and have jazzy effects popping up. I thought a good tie in with the rest of the site would be to use a glow effect in the colours that the Bestwood site uses. This was all achievable through setting up functions that detected when the mouse hovered and also whether a rewind action was in use.

Something of importance was making the text legible. We intend to repeat the information below this Flash piece for those who do not have the Flash plug-in and so I decided to go for a slightly jazzier font too. After several attempts at various sizes I decided upon Market Deco. It has a classy look but also a dated feel, again fitting in with the mining theme.

To sum up, I feel the mining piece has gone well. I particularly like the animations that appear - they are snappy, contrast against the white background and should attract the user's attention. The text information is short and to the point and the icons help visualise the information. A younger user should find this a more pleasant way of finding out information.

@

Mining - header colour scheme

Following suggestion in the feedback, earthy colours were suggested for the headers rather than the strong colours created before.



Luckily, my previous blog commented on a BBC timeline that used the colour spectrum. We really like a span within this and so adopted the colours for our own use.







We find these compliment each other well, whilst following the earthy requirement. Plus, the main reason is that they enable thematic coloured sections.

All that needs to be changed is the frame for each page, so they are the same as their header.

@

Mining site - client feedback

In response to our updated designs, we provided our client with a feedback form, which helps direct their attention to matters of importance.

This proved a good formula as our client responded quickly with responses that were focused and direct to what we need to know.

The changes can be easily implemented and means we can progress to the building of the site in CSS. Target goals focus on accessibility availability.

@

Mining - design development

In response to our client feedback, I have since addressed a number of design elements that they thought could look better if altered.

The main one was to do with the font. The Nottingham City Council use Arial as their default typeface, and so we were told to do similar, so that this site would aid in the consistency across the board with the Council's branding.

Admittedly I did regret this as I have come to dislike stock fonts, such as Arial or Times New Roman, however it isn't the worst font and there is the bonus that it will appear and function on all machines, whereas Rockwell, although looking more modern, and mining like, could have posed problems.

The next area for development was in regards to the borders for images. The initial design I went with what I felt is a modern trend for chunky frames and no shadows, instead, being flat on the page. Our client felt this wasn't the sleek look that youngsters like or appreciate, so narrower, but also emphasised courtesy of drop shadows was requested. This has been implemented and I don't mind the change.

It does look sleeker, or more compact and the shadow boosts the images off the page. This is helped by making the detail text smaller, and not so dominant on the page, but the headings reduced only slightly, so to remain large and visible.

Noticably also, it was requested that curved edges were nicer, instead of the boxy look. I was limited in what I could achieve through Photoshop in regards to the stroke around the pictures, however, I did curve the white box background. It is a small change but I believe it makes a difference.

As in the last post, we mentioned the use of thematic colour. I have tested this out, with varying degrees of success.

I think of them all, my least favourite is the  purple. The borders around the images had to be changed a few times as often they appeared too feminine and clashed with the whole mining theme. Furthermore, we are catering for a mixed audience. 

I can't really see any that stand out as definites. The green I have becomes used to and so may be why the changes I am not rooting for. With Nottingham Council being green in their branding, I think we should continue this look. It ties in well and holds nicely in the design. 

These designs will be submitted to the client following our own image capture session. Hopefully the decisions will be approved - green and refined.

@

Mining - Site map (content ideas)

The colourings highlight how we thought we could colour code each of the sections of the site. This thematic colouring helps a user in acknowledging where they are in a site, colour being a discreet but effective option. 

Update: Following a meeting with the client, it was made aware that the colours shouldn't be too blary or off putting. Instead, complimentary colours would be nice.

Fortunately too, the Council's official site uses this sort of design principle, with green being the key colour but then as seen below, an orangey colour for a different category. 

 

@

Mining - web layouts

For variation between the pages, we thought it beneficial to create multiple potential layouts.


We knew that large images were a good selling point for a site, after conducting research. Furthermore, web text functions best in manageable bite size chunks, so distinct blocks would be a good idea to pursue.

This first one is the look created for the homepage, and proved successful after being chosen by the client. It features a key design trend for 2009 - three column layouts, so we felt it has some credibility in terms of design.

(These will look better when filled with content, as here they seem a little obscure.)

Personal preference goes for established looks that are used commonly elsewhere online (this being the last one.)

Obviously the important factor is client preference. It will be important to reinforce the need for eye catching images and bite size chunks of text.

@

Mining - Interactive Ideas

As the younger generation is being considered for the mining website, it is important to try and appeal to their level. We translated this to mean interactive pieces/games rather than having lines and lines of text that they won't attempt to understand or believe useful.

Below are the examples we came up with:

1. Mining depth gauge - 

 

The user is allowed to set the depth to which the pully goes into the ground. After choosing a depth, an animation plays of the wheel moving and the pully going down into the ground.

 Example inputs would include:

§  15cm – which returns a worm on the end of the line

§  1.5m – a skeleton

§  10m – clay

§  Xm – coal

 2. Interactive map on the history of coal

A swirly “map” represents the timeline of coal. Along this line are several intervals which are interactive. On hovering over with the mouse, the user is presented with extra information. An input is required so to allow the maze to progress with colour, or information. An example input would be to water the seed which turns into the tree that will die, decompose and eventually end up as coal.

 3.    Cogs puzzle

 

 The user is presented with various pieces of machinery, i.e. cogs. They are required to put the parts together. On achieving this, they push a button and the cogs become animated, then playing a video related to Bestwood or coal mining process.

 4.       Equip the miner

 

Using a click and drag setup, the user can pick from several “correct” but also “incorrect “ items to dress up the miner with. On sending him down the mine, an animation plays and if any incorrect items have been chosen, it will show the resulting trouble. Example items would include, a helmet with lamp for correct, whilst flip-flops would be incorrect.

5.       Charcoal rubbing

 

The user has to pick from a selection of rocks/utensils and then rub it against a palette. This will reveal images/messages that they have to decipher. Questions will follow to check whether they have understood the information.

@

Mining - Catering for younger tastes

Bearing in mind that the younger generation are being targeted as a key market to encourage through the Bestwood website, games/interaction is imporant to get right.

The pieces will have to have an information/educational background to them and the mining theme fortunately offers a few ideas.

I located this website which was touted as being good for informational interactivity.

http://www.molecularium.com/kidsite.html

The site achieves a kid-friendly status by using bright colours, setting the content against a starry night sky adding a mystical quality, furthemore it presents it's information in the form of a TV. This sets it in on the right track to being of interest to youngsters.

The site is easily navigated through four large button found on the right hand side of the page. The sections are easy to understand too, notable entries being downloads and video.

The downloads section I think it a good example of what youngsters will expect online nowadays. The content is reasonably simplistic to implement too, wallpapers, audio samples being noticeable. These still have an educational imprint so it constantly serve the site's point.

The video section again uses the starry night sky to act as a perfect backdrop to house the video. It is easily legible, and maintains the space theme. However, it mentions at the start that the video is best viewed at the space-dome and this small size video serves as a teaser/advertisement that will encourage users to want to visit the site.

I think this site succeeds through being familiar in it's presentation - the TV is easily recognisable. The content is brief and not surplus to requirements, navigated through four main buttons. The content itself recognises modern day trends of downloading music, along with offering a teaser of a sample exhibition on display at the venue. This will definitely encourage users to want to visit and experience the real thing.

These are a few important things that should be beared in mind when developing our interactive pieces. Using this example, we can learn from experience.

@

Mining - first "client" meeting

When tackling a client project, one of the fundamentals is creating/maintaing sound connections with your contact. 

After being told not to go directly to the council, but instead Deborah Tuck, yesterday we had our first brief meeting.

To begin fully with designs/direction a brief brief was provided and the main problem highlighted was trying to attract younger people to the mining site. Deb hinted at interactive pieces/games. However, the most fundamental point is that the Council are not aware that we are making this tender, so when it is presented, it will be as an unofficial suggestion. Whilst this frees us from strict guidelines and signing off procedures within the Council, permitting a chance for creativity, on the contrary, it can prove too open and therefore could develop into something that is totally away from what would be sought. 

Straight away, this meant one thing. The concept of using a tradition/aged newspaper look would be out of the window in light of the suggestion of appealing to youngsters. They appreciate fresh looks, modern design. Nothing that appears too boring or dull.

Foruntately, as we each are producing two designs, I had completed the newspaper one, but then transitioned to making a nice, modern (large background!) looking one. 

The typeface here is really effective. Named Carnvalee Freakshow it adopts a solid black look, using nice curvature to stop it from appearing too blocky. I like the flicks, for example on the bottom of the stem of the F, it gives it a more detailed look. The font works well in the grand scheme of things, being highly legible courtesy of it's strong black body. 

Either way, I believe the second to the be the better of the designs, as it looks distinct, uses key colour elements and would be easier in terms of copyright etc, when considering photographic images and typefaces. See Kirsty's blog for her verdict of this design. (We are analysing, evaluating each other's designs to offer a more critical point of view.)

I purposefully included a footer with a lot of information, and will increase this when the pages become more apparent. This is a technique that is being promoted at Webdesignerwall. Rather than incorporating a full site map, an expanded footer with the links there is used widely now as on scrolling to the bottom of the page, the user will hopefully spot another page and be encouraged to view that, rather than exit.

Next up, idea generation is required for the interactive pieces. 

@

Mining - design site analysis #2

Springtime in Tennessee

I picked this site as it has good and bad points which should be acknowledged.

Firstly, the site goes with a direct theme, and sticks to it. The large flowery handdrawn illustration proves a strong eye-catching focal point. It's use of colour - pinks, yellows, green all contend for your attention. However, to a large extent, the flowery illustrations prove distracting, and jarr with the main content. Your eye finds that it cannot rest.

It is the hand drawn illustrations that give this site it's character. My favourite bit is the dynamic date display, which is represented in a pencil like typeface. This look is often referenced throughout the site, for instance in the title, headings and link borders.

The pastel colours here are nice, in fact you probably could list at least 6 colours on the page. Whilst this makes for a vibrant site, it also makes it jumbled and too much.

Interestingly, I couldn't ascertain straight away where the staple navigation options were. On scrolling to the bottom of the page, I found a list that resembled what I expected. 

Going back up the page, the links are presented in a vertical list but in the middle of the page. This is unsual and like me, could hinder a user's understanding of the site.

The site breaks down it's information in different manners. The most successful I feel is the video options on the Media page. Surrounded with a light blue wavy border, it appears aesthetically pleasing and rests OK on the eye.

Compare this to the right hand article links, which uses a combination of orange or pink crayon borders. This creates quite a childish look and the conflicting colours make for a confusing appearance. 

Information on the whole is positioned in varying places and so seems to appear a little disarrayed. A good website succeeds through letting the user access information quickly and in the most stress-free, uncomplicated manner. This site challenges somewhat.

If I were to alter the Tennessee site, it would be to go for a simpler colour palette, along with toning down the strength of the large background image. Furthermore, I would adopt a unified layout with more whitespace so that on clicking through the pages, information in it's location, is easy to distinguish. The best bit of the site however is the hand-drawn pencil typography and this I would make this the defining feature.

@