15 of 25 redesigns from scratch
TRANSCRIPT
-
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.
-
8/8/2019 15 of 25 Redesigns From Scratch
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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/8/2019 15 of 25 Redesigns From Scratch
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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
Original web site Redesign
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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 -
8/8/2019 15 of 25 Redesigns From Scratch
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