15 of 25 Redesigns From Scratch

8/8/2019 15 of 25 Redesigns From Scratch

1/16

15/25Redesignsfrom ScratchUK web design consultancy Scratchmedia is redesigning thehome pages of 25 web sites for a design book to be

published later in 2007.

This is a preview of 14 of the first designs. Several moreare in production now.


2/16

1) Sunhome.bizSun Home Communities owns and manages 7 Mobile Home and RV Resort communities throughout the beautiful state of Arizona.Therefore, the site needs to be easily usable by older people.

See http://www.webdesignfromscratch.com/screenshots/50r/sunhome.png

Original web site Redesign

Theres nothingin the middle of

the screen, andno focal pointfor the page.

The page lacks astrong identity orbranding of its own,telling you whereyou are.

The page

background and newlogo evoke hotsunny days

Big, clear tabsshould be easy foreveryone to readand click on!

Arranging photos in

a more freeformPolaroid-like stylegives a holidayfeeling

Other key navigationitems are highlightedin these callouts.

A big bold headerindicates the start of

the main content.

Top navigationbar looks like atoolbar .White text onblue is not easy

to read,particularly ifyou have weakvision.
http://www.webdesignfromscratch.com/screenshots/50r/sunhome.pnghttp://www.webdesignfromscratch.com/screenshots/50r/sunhome.png


3/16

2) Mediavolunteer.org

This is a great web application, using the power of a network of volunteers worldwide to develop and maintain an up-to-date databaseof media contacts for use by organisations involved in positive change.

See http://www.webdesignfromscratch.com/screenshots/50r/mediavolunteer.png


It is not very clear where to start look ing on thepage.

The blue box is quite recessive (opposite of attractive).

The buff-coloured callout seems more attractive, but is in asecondary position (further from page origin at top-left).

The lower sections are easier to look at, on pale backgroundswith icons to draw the eye, but their position on the pagesuggests low-priority. The viewer needs help to read thispage.

Main content suffersfrom a lack oftonal contrast.This is tiring foreveryone to read,and may make thecontentinaccessible topeople with impairedvision.

The colour scheme ismuch lighter, givingan optimistic feel,which is also easieron the eyes forlong periods of use.

Colourful headingsand screenshots helpmake the tasks feeleasy to do.

Body text isaccessible black-on-

white.Pale background helps you focus onthe content

Intensebackgroundcolour draws theeye away from maincontent areas. Themass of blue is alsoquite depressing.

Simple layout iseasy to read. Just

start scanning at thetop!
http://www.webdesignfromscratch.com/screenshots/50r/mediavolunteer.pnghttp://www.webdesignfromscratch.com/screenshots/50r/mediavolunteer.png


4/16

3) Moraware.comMoraware.com make and sell specialised software for people who make work surfaces (for kitchens etc.). As a small company in a tightsegment, their web site needs to qualify them and their product as credible, feasible and low-risk.

See http://www.webdesignfromscratch.com/screenshots/50r/moraware.png


Intro text says whatthe product does,but not what the

benefits are. Peoplebuy benefits, notfunctionality.

The colours are

toned-down , whichgives a sense of lackof life / vibrancy /dynamism.

Its good to see adecent base text

size, but theres to omuch large text.Big text works bestwhen it stands outfrom a smaller size.

Suggested blue &green combo(unfortunately notdoable)

Suggested blue &green combo

(unfortunately notdoable)

Recommendedbranding thesoftware itself,separately to thecompany brand.

Bold text in copyhighlights benefits.

Fake software boxmakes the productseem more real .

Blue & mustard dontmake a happy

colourcombination
http://www.webdesignfromscratch.com/screenshots/50r/moraware.pnghttp://www.webdesignfromscratch.com/screenshots/50r/moraware.png


5/16

4) Fink project

Fink.sourceforge.net is a not-for-profit project that converts a wide range of open-source UNIX software to Mac OSX and Darwin. Theweb site is very text-heavy, so the priorities are to make the text easily readable and as interesting as possible.

See http://www.webdesignfromscratch.com/screenshots/50r/fink.png


Lines on logoare extremelybusy

Significant lack oftonal contrast on the

navigation. Yellow(70% brilliance) on

grey (93% brilliance)gives only 23%contrast.

3-column layoutdoesnt show which

of the 2 maincontent columns

is most important.Today, many websites are cuttingdown on columns.

Solid top sectionsays clearly This isthe top of the page

Applied a simple,stronger logotype.

Charles Darwinportrait features as asite mascot.

Empty topsection doesntcap the top ofthe page, or

separate theidentity &navigation

from the maincontent area

Single-columnlayout, clear

headings and asolid introductoryblockmake readingand scanning easier.

Language selectornav isnt relevant toevery page, so hasbeen relegated fromtop of the page topartway down theside column.
http://www.webdesignfromscratch.com/screenshots/50r/fink.pnghttp://www.webdesignfromscratch.com/screenshots/50r/fink.png


6/16

5) I Hate Clowns.com

I Hate Clowns is a quirky personal site by Rodney Blackwell, which gives a voice to people who fear, or just dislike, clowns The sitefeatures lots of activities, and earns revenue through selling clothing and other merchandise.

See http://www.webdesignfromscratch.com/screenshots/50r/ihateclowns.png


The pagebackground is

highly decorative intense, colourfuland busy, whichdraws the eye awayfrom content.

It is quite hard to focus on themain content. The text size isregular, the main heading is normal-size, and its surrounded by moreattractive intense, contrasting

elements.

There are several unnecessary featureson all pages, like login & forgot password

Simpler logo standsbold and clearlyowns everythingelse on the page.

Bright colour isused more sparinglyto draw attention tothe main contentarea.

Simpler tabs withclear text labels in

black on white.

Content is arrangedin 3 columns, each

with a clean headerand using whitespace to separate thecontent, rather thanboxes. Main column iswider than thesupporting content.

Bold page header

tells you where tostart looking.
http://www.webdesignfromscratch.com/screenshots/50r/ihateclowns.pnghttp://www.webdesignfromscratch.com/screenshots/50r/ihateclowns.png


7/16

6) IP Newsflash.com

IP Newsflash is a specialised information site, aggregating a range of information on Intellectual Property. This is another text-heavysite, where the focus is on readability and ease-of-use, plus a bit of re-branding.

See http://www.webdesignfromscratch.com/screenshots/50r/ipnewsflash.png


Doesnt fit ina 1024-wide

window, soneeds amore flexiblelayout.

Minor screen featureslike login are toned-down (will becomehigher contrast whenfocused)

Simpler, flexible 2-

column main layoutand larger headingsaid scanning.

Mainnavigation list

is very longand tiring toscan.

All sections lookthe same, with

small headings inwhite on a darkblue bar. Thismakes it hard tolocate items ofinterest.

Section headings aremore clearly definedwith larger text andbackground images.

Secondary content(donations and

featured book) aremoved out of themain content areainto the nav column.
http://www.webdesignfromscratch.com/screenshots/50r/ipnewsflash.pnghttp://www.webdesignfromscratch.com/screenshots/50r/ipnewsflash.png


8/16

7) Active Allowance.com

Active Allowance is a simple web program that helps parents teach children the benefits of helping with household chores. The originalsite is functionally excellent, but the marketing front-end was over-wordy and failed to sell the benefits quickly.

See http://www.webdesignfromscratch.com/screenshots/50r/activeallowance.png

Original web site RedesignThe site is relativelyaccessible to thefirst-time visitor,with a clear identityand conventional

layout. However, ithas been designedto be read, notscanned.

Navigation is similarcolour to pagebackground, whichmakes it recede .Lack of contrast

reducesaccessibility.

There is simply to omuch text used toget the messageacross. Theinformationalmarketing end of thesite comprises 10pages.

Main navigation issimplified into 4bold, clear,colourful tabs. Anattractive flashdraws attention tothe call to action.

Weve used stockphotography that

adds dynamismand brightness,creating a sense ofoptimism.

Callouts throw insnippets ofinformation to helpcreate the sense of abeneficial and easy-to-use application.

Text has been edited down to the core ofthe message. Emboldening highlights key

words. More info links at the bottom ofthe page retain the flow.
http://www.webdesignfromscratch.com/screenshots/50r/activeallowance.pnghttp://www.webdesignfromscratch.com/screenshots/50r/activeallowance.png


9/16

8) Web Talent.com

Web Talent.com has been helping put aspiring models and actors in touch with scouts and clients since 1997. The site was lookingoutdated and needed a fresh new look that showed the members in a more appealing light.

See http://www.webdesignfromscratch.com/screenshots/50r/webtalent.png


The site logo is veryweak. It sits well

inside the centralpanel, where itdoesnt visuallydominate the page.

Intense dark blueand black are

overbearing,drowning out thecontent.

Its very important tosee real memberspictures. However,these arent verywell presented (lookquite cheap).

Created a newcombination logo,with a clean font andcamera image.

Put a quick searchform on the home

page, to help allvisitors assess thescope of the talentdatabase.

Thin central columnis plain anduninteresting.

Features a selectedtalent photo inlarger format onthe home page. Thisdesign allows aregular square HTMLimage to appear in amore interestinglayout.

Page intro section uses large,colourful header and briefintroductory paragraph.
http://www.webdesignfromscratch.com/screenshots/50r/webtalent.pnghttp://www.webdesignfromscratch.com/screenshots/50r/webtalent.png


10/16

9) BehindThe.net

BehindThe.net is a Netherlands-based company that makes an excellent software product called Org Chart Live, which lets companiesmodel organisational structure and other data in a shared environment.

See http://www.webdesignfromscratch.com/screenshots/50r/behindthenet.jpg


Wrong position forthe logo. If youre

not going to put thelogo in the top-leftof the screen, it hasto shout I am thelogo!

Heres a smallgraphic that showswhat BtN does.

The company makesbusiness software,but the home pageis dominated by animage that suggestsengineering or oil.

Logo simplified andmoved to conventionaltop-left

We made themeaningful content

image dominant,showing the software inuse on a PC and PDA.

The overall layout is clean and open, and 2

columns is a good number, but its hard to workwith 2 equal-width columns. Equal-widthcolumns are harder to interpret. Which is the maincontent column, and which contains other stuff?

OrgChartLive is positionedas the top-priority

element, and has beenbranded with its owndistinctive style.Weve kept the clean 2-

column layout, butresized them todifferentiate maincontent fromadditional content.

Theres no mentionof the companyssingle softwareproduct on this page.
http://www.webdesignfromscratch.com/screenshots/50r/behindthenet.jpghttp://www.webdesignfromscratch.com/screenshots/50r/behindthenet.jpg


11/16

10) Loving Arms Learning Center

Loving Arms provides child care and preschool in Kansas. The site contains quite a lot of content.See http://www.webdesignfromscratch.com/screenshots/50r/lovingarms.jpg

Original web site RedesignThe logo is quiteeffective, but is muchbigger than it needs tobe.

9 navigation options feel

a little too much to takein .

The purple background is

too intense, and itshard to read black textagainst it, due toinsufficient tonal contrast.

Kept therecognisable logo,still at a good size.

Moved to a

horizontally-arranged mainnavigation, with

fewer options and acontext-sensitive 2nd-level nav.

Its not a good idea torepeat the site logo,especially at a large size.This confuses themeaning of the page.

New photographyshows a young childenjoying work in a

warm, comfortableenvironment. Thisimage describespositivecharacteristics ofthe centre.

Simplified layout uses just 2

columns and employs white spaceinstead of boxes & lines todifferentiate areas of content.

The photography is quite weak, showing

the outside of the building, but notproviding any information on whatLALC does, or what sets it apart.
http://www.webdesignfromscratch.com/screenshots/50r/lovingarms.jpghttp://www.webdesignfromscratch.com/screenshots/50r/lovingarms.jpg


12/16

11) Boldchat.com

Boldchat make one of the leading live chat products that let web site owners communicate with their visitors in real time. Its great forincreasing the conversion rate, for support, and many other uses. The challenge is to communicate the broad benefits in a small space.

See http://www.webdesignfromscratch.com/screenshots/50r/boldchat.png


Theres a lot of usefulinformation in a smallspace on the originalhome page.However, its notclear how the boxesrelate to each

other withoutreading all the text.

The content image isemotive but doesnt

relate to thebenefits of theproduct (in sales,marketing & support).

New strap line is a positivecall to action.

We devised this mechanic toindicate the breadth of usesfor the product.JavaScript would display

several sample interactions,demonstrating the scopefor optimising users

experience across a widerange of sectors andscenarios.

4 specific, focused calloutboxes highlight productfeatures, supported withappealing graphics.

Introductory line: Want to thrill yourcustomers? Simply engage may suggest

that the customer doesnt already

engage with their customers, which isinappropriate.

White text onyellow isnt

readable

enough.

2 large panels pitch the

different advantages to the 2biggest segments : smalland large business.
http://www.webdesignfromscratch.com/screenshots/50r/boldchat.pnghttp://www.webdesignfromscratch.com/screenshots/50r/boldchat.png


13/16

12) TraceTracker.com

Trace Tracker have developed amazing new technology for capturing data onto a global traceability network database, which letsmembers track the movement of products & foodstuffs throughout the entire l ifecycle, from raw materials to the consumer.

See http://www.webdesignfromscratch.com/screenshots/50r/tracetracker.jpg


The page is to osegmented . All

content sits inbordered boxes,nothing is on thepage canvas, sonothing looks likeit really belongsto the page.

Visually, there is alack of strongcontrast, helpingguide the eye to

important featuresor information.

The logo is nowmore prominentagainst a whitebackground.

2 columns aresimpler than three.

Headings help youscan the content.

All text is muchthe same size, soits hard to scanthe page and

learn quicklywhats there.

We designed thisrich graphic torepresent visuallythe GTNet andhow it supports vitaldata capture atevery step ofproduct lifecycle.
http://www.webdesignfromscratch.com/screenshots/50r/tracetracker.jpghttp://www.webdesignfromscratch.com/screenshots/50r/tracetracker.jpghttp://www.webdesignfromscratch.com/screenshots/50r/tracetracker.jpg


14/16

13) Bokahotell.se

Bokahotell provides hotel and conference booking services for the Scandinavian countries.

See http://www.webdesignfromscratch.com/screenshots/50r/bokahotell.jpg

Original web site RedesignLogo is to osimplistic , andlacks the sense ofquality needed toinstil confidence inthe visitor.

Faded photographyand cross-fadingeffects are a bit outof date andcheapen the site.

The grid layout is

compact, but a littleconfusing, as youcant tell whichpicture goes withwhich blockoftext.

New logo is very

similar, but subtle3D effects make itfeel higher-qualityand more solid.

Simple 2-column

layout (again) makes

the page simple tounderstand on firstview.

Dark blue background is

too deep and draws theeye away from content.

Soft graphics areused to drawattention tospecific features.

Photographspositioned at anangle break thestrict grid layout and

lend dynamism tothe page.
http://www.webdesignfromscratch.com/screenshots/50r/bokahotell.jpghttp://www.webdesignfromscratch.com/screenshots/50r/bokahotell.jpg


15/16

14) Visionproject.se

Visionera is a Swedish company that makes a project management/bug tracking system called Vision Project.

See http://www.webdesignfromscratch.com/screenshots/50r/visionera.jpg

Original web site RedesignSuffers from theproblem of puttingtoo much in boxes.In visual language,content in a box is a

callout like aguest speaker, no treally part of thepage.

The home pagelacks a startingpoint. The initialcontent is boxed-out, which suggestsits not nativecontent, and you areleft wondering

whether to start atthe large graphiclower down.

Highlighting the

current item in themain navigation tellsus at a glance wherewe are.

Elements at the topof the page feelcramped too close

together, while thelower section israther empty.

Because the subjectof the site is a

software product,weve highlighted itusing a screenshotand bold headingin this banner area.

Greater use oforange as acounterpoint tothe corporate blue

colour. Blue isprofessional andcool, but too cool onits own.
http://www.webdesignfromscratch.com/screenshots/50r/visionera.jpghttp://www.webdesignfromscratch.com/screenshots/50r/visionera.jpg


16/16

15) Nosuni.com

Nosuni is a Spanish-language social network that focuses on the University social segment.

See http://www.webdesignfromscratch.com/screenshots/50r/nosuni.png

Original web site (profile page) RedesignNavigation is inan awkwardposition overon the right-hand side.

This block contains the user nameand picture. The user is the logicalelement that describes/owns

everything on the page, but theblock doesnt span the whole pagewidth, and because its boxed-in, itseems to be ofequal importancewith the rest of the page content.

Key navigation ismade much more

prominent ,positioned at the topof the screen anddistinguished withrich icons.

The Name block,

which owns thepage, is full-width and coloured.Sub-navigation tabsrepresent theoptions that are all

part of the usersprofile.

This important

information isright-aligned,which makes itshy away from

the viewersattention.

Two equal-width

columns sufferfrom theproblem of beinglogically equal.Which is themain content?Where should Ilook first?

Colour is used as a

ke y to identifyheadings (orange &brown) and datalabels (grey), which

aids legibility.
http://www.webdesignfromscratch.com/screenshots/50r/nosuni.pnghttp://www.webdesignfromscratch.com/screenshots/50r/nosuni.png

Documents

15 of 25 Redesigns From Scratch