‘Top List’ is a feature list-based website, bringing readers informative lists in an ‘at-a-glance’ way.
‘Top List’ wanted to define themselves as an viable alternative to its messier counterparts Buzzfeed.com and other list based websites. The client wanted a simple yet sophisticated website design that would appeal to its target audience in both look and usability/functionality. The client has asked that the information be given to the viewer in bite-size portions and that the focus should lay in eye catching images and that the overall design of the website should not take away from the images portrayed on the website.
The client has also asked that their website is based off of their logo.
For this to work, the website must be heavy handed with thick borders and contrasted fonts with heavily sectioned portions of information so that the reader can differentiate between what sections they are looking at.
The Target Audience
The website is targeted at people whom use sites such as Buzzfeed and Facebook. The hope for Top List is that it would become a known source of list-based topics on social networking. Therefore, the target audience is widely anyone who uses Facebook – narrower, 14 to 34 years of age, particularly women. This target audience does not bring about any usability limitations as it is so broad. The website will be basic, and usability will depend on appeal generated by style and content.
The site has been branded in a very specific way. The sites layout is more straightforward and less cluttered than other list-based websites to maximise usability and appeal. The website is styled with only two fonts, a light san serif font and a heavier cursive, serif counterpart to balance each other out. The fonts are often backed by a thick black banner shape, this is repeated through the whole website to create a sense of unity between the webpages, but to also add to the ‘contrasted’ appeal of the website. The website uses thick ‘weighted’ borders throughout its entirety as another form of tying together the websites overall design. The website is also made of an ‘off-white’/beige colour, contrasted with a much darker counterpart ‘almost’ black. This is very different to the standard bring, almost-neon ‘interest generating’ colours normally associated with list based websites. The clients website has kept away from such colours as an attempt to stand out as well as appear to appeal to a more ‘sophisticated’ audience.
Brenn, M. (n.d.). Budapest. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/aigle_dore/8130461936/in/photolist-djcFWu-djcHTx-djcHNi-dosD44-djcHQP-djcJcZ-dosAV4-dosJH5-dosK5d-djcG1A-dosDTt-dosBEx-dosE4H-3QsUBG-dosBmM-djcJ3i-dosMvh-dosKFo-dosBzM-dosJLA-djcJ76-dosDeD-idiMi7-dosMMo-xaKhe-5WsZWS-8fqtSy-ne
Brenn, M. (2011, March 10). Rome. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/aigle_dore/5481288261/in/photolist-8Yx1PF-8sPThK-9mn332-5eRhwN-e7M5Qx-7cSb1j-5eLRAK-9DE7Sn-5eRdQA-ee4Pqm-dX3pfa-gxKEJV-edY8X6-5eRhi9-5eRid5-dFK7Vx-bZ2vcS-8KsL9i-kFTMex-861rbE-8YVbRy-gPVeu1-9mq7C3-amq7nN-fBUc8V-gxGmX9-euuZX-6Z
Bruneke, M. (2014, January 21). mystery man. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/93852381@N08/12066570465/in/photolist-uU4BA-e2psYa-bSjsAi-5mseya-6Y7nup-johk1n-bsVy1g-2wf3x5-7at1vt-3ftCoJ-61kJEg-6wsao-k4UCmP-g4d3hC-4tiBJ8-fp63wn-6U3Myp-diPXPQ-61kJDv-95XVLe-gPcEH-n5nx4H-coadFo-j4rWHb-6tsDhH-dARB6Y-6eU5Uy-5
Efx, V. (2008, November 19). Furby.Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/vox_efx/3043682336
Photography. (2014, June 4). Trading stocks on a computer. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/101332430@N03/9681097378/in/photolist-fKu9Y3-6fmpu1-4iNNn5-LmwLk-5uTdu3-8GyC7d-6Hir3z-4pXePq-atujdm-y3jK-5myRok-aD3qS5-5CvT2b-6KShDQ-89NEv7-eeVhCf-dRc9NR-bBgSvi-5XEL3A-9ZA2Jx-9czfc7-9iPxQL-7M6Jvx-xKQMn-729b4-jNznTt-c19Fuo-29d
Pal, A. (2013, August 29). iPhone Photography. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/ashtonpal/9624479689
Pavlosky, O. (n.d.). Home. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/olenkaolja/1156694752
Revilla, R. (2009, November 10). Teenage Mutant Baby Turtle. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/rafastarix/4094202426/in/photolist-7eMRK1-dsWMwB-6vw4uC-99nr9S-fkcA9e-nhrwzd-ntDt2T-ftzmhy-agfszm-6Ap7Dd-f7V6W-mutdJj-nyWQPu-dsWYch-daRjsV-dsrNx2-6f5m4C-dQUAsj-8nQC6D-edF4dA-nyWPNS-66wjN3-59NHJd-cDuZLs-aPkVqT-ddN3ir-e6MULj-e6
Schmidt, M. (2014, January 10). ‘Dita’ Gown . Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/51579195@N02/8539902776/in/photolist-e1Dez3-5y22Eq-jZebkb-95hFtg-7KczMG-j6phyC-aiJwLB-fzcYbq-bn4dCe-95k9Ry-dWAB8j-dHaFzA-edSjhL-edSjro-iRa9NY-8eTTwq-7UmvrX-edSjd1-edSjdY-85Asza-dhEnFg-jZ8RGP-95kLmd-edSjeQ-edSjbE-j6hdhV-LDdyo-
Unknown, A. (n.d.). Working. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/v-neck/5712https://www.flickr.com/photos/a1ex/3316800986010773
Unknown, A. (2012, February 19). Hiroshima City. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/freedomiiphotography/6203111667/in/photolist-as9yZa-dQmXH4-drS9D-9NcPYb-b7TCV2-hFAK3t-h8FX3R-jxHGNz-bWaTyN-rKbAM-c6o7ad-4aBY2-hoUzcc-6fjzqc-bv32cX-dLqpUe-dyD2F2-vZufX-a2gsdU-fmQazK-7W6HUJ-fGwBwm-aiPHZs-dRHg3L-8m6HNR-jzkXhs-e5
Unknown, M. (n.d.). Facebook. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/melenita/9386166498
Draw a Stickman: Episode 2. (n.d.). Draw a Stickman. Retrieved May 19, 2014, from http://www.drawastickman.com
Pewdiepie. (n.d.). Happy Wheels.YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/tNwFexjnbyM
RoosterTeeth. (n.d.). Rage Quit Happy Wheels. YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/GsSya4K95jk
Smoosh. (n.d.). Smoosh Plays Happy Wheels. YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/4H_oB3VArBg
TAKE ME. (n.d.). The Useless Web. Retrieved May 19, 2014, from http://www.theuselessweb.com
Totaljerkface.com – Home Of Happy Wheels – Happy Wheels. (n.d.).Totaljerkface.com – Home Of Happy Wheels – Happy Wheels. Retrieved May 19, 2014, from http://www.totaljerkface.com/happy_wheels.tjf