Website Research

What I want to investigate in this research post is how other websites display such information or perhaps any general sort of ‘listed’ information to the public to ensure I effectively communicate the intended purpose of this website before I get to carried away with the creative process of sticking it all together and making it look good.

Now, in previous research posts and Work in Progress reports I referred to common ‘list’ websites and to the idea that they are actually a really cool way to give information to viewers in small doses, but still deliver quite weighty information. A website I came across in my research was ListVerse.com (http://listverse.com/), a website that compiles random top 10 lists for the viewer to flick through:

ListverseThe thing that is so cool about this website is that you could literally go to any dark corner of the internet on a site like this. You could begin looking at the top 10 Insanely Misguided Radio Competitions, and end up somewhere completely different. Unfortunately this is not something I am looking to do, but its a cool concept. The website is very easy to follow and something I find particularly nice about it is the colour scheme and the fact that it is not the standard harsh white-on-black that we seem to have moved away from (thank goodness). It reminds me a lot of the Windows 8 operating system, nice solid colours, no real detail, just good hearty information presented on a plater – no serif ‘foot-sies’, no silly patterns, just good ol’ repetition and nice colour scheming.

Buzzfeed: http://www.buzzfeed.com/expresident/best-cat-pictures?bffb

buzzfeedNow, if there is a website I really hate the look of, it has to be Buzzfeed. To me, Buzzfeed looks like a smash up of stuff.com and funnyjunk.com, where it is trying to pass over information that is informationally useless in cluttered all over the place way. Too many useless ugly buttons, too many inconsistencies with capitalisation, too many in your face ugly colours and just general bad layout. With BuzzFeed, I wasn’t really sure what half of the buttons even did on the page until I clicked them – its a frustrating website to use and I personally would never use it apart from when someone links a list on Facebook that interests me. I am also not a huge fan of the black on white text, and the neon colours. Yuck… However, BuzzFeed lays out its information in a very clear way and text is kept minimal, it is all about the pictures, which is not really what I am going for but if anything BuzzFeed is a what not to do website.

 

Billboard: http://www.billboard.com/charts/hot-100

billboard

 

I really want to love Billboard but I am so on the fence about it. I think the black on white has actually been pulled off really well here, probably due to the amount of white space. It’s just very confusing to me, I see the blue as an accent colour, therefore it should only be used to highlight important aspects, yet it is everywhere.. The colouration is very confusing but the layout makes a lot of sense. There is so much white space! Ahhhhhh! I just don’t know how I feel about it! I’m also very unsure about the choice of font, as well as the fact that there is one font for the title, and then one font for everything else.. There are no real breaks in the website and no obvious ways of pointing out where to look.. I don’t know Billboard, I just don’t know.

IMDB: http://www.imdb.com/chart/top

IMDB

I really do love IMDB, even though it is not the best looking website it has a really clear and concise way of dealing with information and giving it to the viewer. Although at first glance IMDB doesn’t give off a lot of information, it is clearly giving off the only information the viewer needs, in the idea that the viewer has come to this page to see the top 250 movies of all time, and is being given that information with a little added extras (rating, year and genres). The information is easy to digest and pretty much exactly what I expected to see, I mean if I had of clicked on this link and saw something like Tommy Wiseau’s ‘The Room’ at number one I would have probably clicked off of the page instantly. I guess this is another thing to think about, people will have expectations of what they think deserves to be at number one, and if they see anything that they do not entirely agree with then they will probably stop reading.

Advertisements

Color Research

iOS-7-App-icon-template

Okay so as I said in previous research posts, I want my style to be influenced by IOS 7, but minimal. I also want my color scheme to be influenced by IOS7 but with a lesser (if not no) gradient. I think the icons I create for each of the Applications will be based on what their current icon actually looks like and it will follow a simplified version of what it already is, if that makes sense? Let me show you:

Icon-Evernote

So this is what I am going for, this was just a quick rough draft of what I hope to achieve but you get the idea of it. Basic block colors and little detail. So it is hard to research colors for the genre pages as the icons are all going to have their own colors, unless I was to change them to fit with the genre pages (there is a thought).

Something I also wanted to research in this post was the idea that I need to come up with colors that relate to the genres I am talking about. I wouldn’t make my accent color for my ‘Games’ list blue as blue is more of a ‘Productivity’ or actually more of a ‘Social Networking’ color. So I decided to sit down and come up with what sort of colors (and later, what sort of fonts) would go best for each section. So I have four genre pages, they are:

  1. Productivity
  2. Social Networking
  3. Games and Entertainment
  4. Photo and Video

I want the colors to be unique to each category and not feature twice, so I have to be careful with what I pick. I decided to go with the most obvious ones and work my way down from there.

  1. Social Networking – Blue
  2. Productivity – Orange
  3. Games and Entertainment – Green (or Yellow?)
  4. Photo and Video – Purple

Something like this:

Palet

Style Research

Caroline Boyden (http://lscr.berkeley.edu/advice/web/design) writes:

Many amateur web developers misunderstand the real purpose of visual design. In reality, the job of visual design is to support the information architecture and further the accessibility of the website rather than to wow visitors with graphics and animation. Some key points to remember:

  • Make sure your text is easy to read.

Keep readability in mind when choosing your font, type size, page positioning, and colors! Gray type on a white background looks chic, but is nearly impossible to read, especially in quantity. Choose strong colors for links and visited, to make them stand out as much as possible.

  • Think carefully about graphics.

Do they add value to the site?
Do they support the statement you’re trying to make?

  • Colors matter.

Your color choices should reflect the personality of your program or department, but definitely should not inhibit readability.

  • Don’t place anything on your site that doesn’t serve a purpose!

As cliché as it is to say, keep it simple. It always applies, especially when we are still learning to build websites. Designing is not a new concept to me, it is something I have always enjoyed doing and I feel as if I have a firm grasp on design concepts. However one thing I need to stay aware of is that these webpages are essentially pieces of communication, and therefore must be first and foremost easy to read. Now I’m not about to go all hipster and try to redefine the basic layout principles, but I do have the tendency to put things places in the name of design, not legibility. So, with that in mind I’ve cut myself a little bit of slack, but I know what I have to do is keep it simple. 

simplysogood-style-guide-01I’ve decided to go minimal again for this assignment, but this time I mean it. Only minimalism with some photos. Basically this means that I can only use block colors, no gradients… (Noooo!), but I am committed this time! I also need to pick a pallet and a set of fonts to accompany what I hope to accomplish with my website.

_______2_1xThe thing that made me choose minimalism is this idea of movingbackwards Apple seems to be undertaking in their ios7 design where the interface of iPhones and other Apple devices seems to be a lot more simplistic. Many people speculate it wont be long before Apples interface looks something similar to this photo, where the icons are simplified with no depth but still seem to hover above the background. This is the sort of style I will be going for with my website. With nice bright pastel colors on a solid dark background color.

Another thing I need to explore in this research post is font. If I was to go with a generic statement like ‘Top 10 Applications of 2014’, (not the titles I’m going for, just gives me a nice range of shapes of letters and numbers) here are some of the title/text fonts I am looking at:

 

 

Light & Heavy Header Fonts

FOLKLORE

 

 

 

Capsuula

 

 

 

 

 

 

 

 

 

 

Serif & San-Serif Paragraph Fonts

Aaargh

 

 

 

 

 

 

 

 

Existence Light Cardo

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

No, I haven’t decided and I also haven’t finished looking – I never finish lookcoling for fonts. I won’t decide on a font until I have a layout, style and color scheme that work well together as it will be the font that polishes it all off. I also need to decide on a title as its hard to pick a font when you are unsure of what letters you even need to be looking for.

Layout Research

Okay so we have to create five pages, and obviously these five pages are all going to have slight differences but still have a similar style. So I have decided to break my layout research into two parts to better explain what I am expecting to create and the shape I am wanting my webpages to take. Information organisation/architecture: Information architecture is web-speak for the way we structure the information on our website. Luckily for me my webpage will be simple and straightforward with not too much jargon (hopefully!). According to http://lscr.berkeley.edu/advice/web/design staying mindful of just a few rules of thumb can help create a good information architecture.

  1. Information should be categorized logically, and labels should make sense to visitors, not just to you. Be wary of talking to yourself in language that only your department or function understands. Think about your audience.
  2. Information should be placed where people might logically expect it to be.
  3. Every page should provide something more than mere navigation. Avoid pages that are nothing more than long lists of links with no other content.
  4. Pages should deliver what they promise. For example, a page entitled “Application Form” should bring up an application form, rather than being a generic link to the University’s Undergraduate Admissions department. If you can’t provide an application form, change the name of the link to accurately reflect what it provides.
  5. All pages should contain navigation to enable the user to get back to the starting point

Part 1: The Home Page A good place to start when planning the layout of a homepage is to think about the key information that needs to be presented. According to http://www.rocketspark.co.nz/blog/homepage-layout-ideas-and-content-suggestions/ this might include:

  1. Your logo
  2. One or multiple images or a video
  3. Your main heading (H1)
  4. Some introductory text
  5. Call to action buttons, phone number and/or prompts to buy online

The homepage will be the main feature obviously. It will set the style for all of the pages. The idea I have in my head at the moment is a tile webpage where clicking on a tile will take you to that specific genre for the top 10-20 list. metro_tiles_uikit-future I really like the idea of a tile layout, I think it looks clean and professional. Personally I would like to add a little more flare and not have it so business like. What I really love about this sort of layout is the fact that it makes for a really friendly user experience. It is simple to set up, easy to use and fun to play around with. Obviously I do not want this much clutter on my homepage, but this is the sort of ’tile’ style layout I am looking at. Riley_Cran The tiles will each be colour coded in relation to their genre field (more style, but I guess I’m just thinking out loud) . So what I did was I pulled in a few screenshots of websites to Photoshop and outlined where everything sat on their page and tried to visualise how this would work for me BeerlayoutAn obvious issue here is that I’m obviously not going to have this many tiles (considering I only have 4 webpages and a homepage), but this wasn’t totally irrelevant. It got me thinking about some really cool percentages I could do here. If I could find out exactly what percent of application downloads are game, productivity, social networking and photo and video related, I could base the size of the tiles off of that. It might be a statistic that exists on the internet, it might not. layoutdesign1Based on that, what I then came up with was this. A tiled layout that works more with what I have to portray on my webpage. This is only the layout of the basic blocks of information (logo, four pages and footer) I will need to have on my page, and this probably needs to go in my work in progress not research but I thought I would refer to it here to show my train of thought as this is the direction I am heading in with my homepage layout.   Part 2: The Genre Pages This is going to be a little bit harder to piece together I think. I began researching by just looking at the layouts of list websites that all ready exist such as BuzzFeed ect and started outlining how they place everything. buzzfeedBuzzfeed is a hive of ruthless self promotion, yuck. Anyway, in sectioning off the layout of the website we can see the first three sections are pretty much just navigational bars to get hold the interest of the viewer to ensure they stay on the website in a act of ‘look, you can see this next!’ There there is a view counter (I think?).. Which I didn’t even bother to highlight because it looks stupid. Then to the right we have some more ruthless self promotion in a sort of glorified ‘click this’ panel. Then we finally get to the information on the left, the title “The 100 Most Important Cat Pictures of All Time” (not even capitalised correctly). Then a small byline (OK, this is it), a useless line of information that is so tiny you don’t even feel the need to actually read it. MOVING ON, oh wait no we are not, now we are looking at the ‘share this list’ features, before we have even read the list? UGH! Okay, so NOW we get to see the information we came here for! Finally! morrisfanbuzzfeedThe information is straightforward – list number, picture, description. The description is so small, I guess BuzzFeed knows no one goes to their website for the description but really what it looks like to me is someone just wanted to go home early and coundn’t put the effort in, which is reminicent of the byline statement which more than anything just sounds like it was written by a 13 year old “OMG no wae”. Conclusive point: “BuzzFeed is the benchmark of what not to do with webpage design,” (Drought, 2014). Moving on to a webpage that actually deserves to be live.
ListverseAlthough this website isn’t chronological in the most basic idea, it still makes a lot of sense and doesn’t have about 100 useless buttons to push that are going to take you elsewhere while you really have no idea where elsewhere is. Something I like about this layout is the fact that everything is easily accessible without being in your face blatant. I guess that has something to do with the fact that people have been using list websites for a long time now and we have certain expectations, not only of list websites but of all websites, and where things like logos and navigation menus are going to be. This code is something I have to decipher and something I really have to nail in my layout.

TopAppsLeb_large_1There is also the little issue of how I am actually going to layout my lists. Apple has a very ‘brief’ way of laying out their application store that gives minimal information at a glance, which is basically what I need to do. I mean it would be great if I could make it so that each application you clicked on took you to a page that gave an in depth analysis of the applications but I don’t think that is within my time limitations, but to be honest, I’m not ruling it out. Even a hover ‘thing’? That provides a full description (probably just lorem ipsum) We will see how I go. I do think that this layout idea is the way to go, picture – name, creator, rating, price and what I need to add is which operating systems it is available on, which is going to be a bit of work but hey, whatever. I could even play around with the layout making it vertical instead of horizontal like so:

atebits-apple-inspired-website-designsNow all I have to do is start formulating my layouts.

Content Research

So this isn’t exactly a small undertaking so I thought I would get a head start and get most of the content done as soon as possible. Luckily I have the power of the interwebs to aid me in my research of finding the top 100 cross-platform applications of 2013.

Now the issue that I have already come across is the fact that most ‘Top Application’ list websites seem to only discuss one operating system, usually IOS, sometimes Android, hardly ever Windows. Or they have the top 100 applications for specific genres like ‘Top 100 games’ or ‘Top 100 social networking applications’. So I guess it is up to me to try and sort through everything and get a top 100 list that is as unbiased and as truthful as I can possibly make it.

Before I get into any hard research I need to look at a few questions that will help me shape the content of my website:

Content ultimately is the standard by which your website’s usefulness will be judged. To understand what your content should be, start by asking yourself these questions:

Who is my website for?

This question will define my target audience. My website will be for anyone interested in applications or perhaps for people whom have purchased smart devices but are unsure of what to download in the way of applications. I do not want to define my target audience in a way that limits the audience of the website, but realistically the target age group of my website will probably be somewhere between 15 – 40 year olds. I understand this is a larger group to cater for, this is why I hope to make my style and layout as easy and clean as possible.

What do they want from the website?

Correct content that will follow roughly what they expect with a few surprises. Unless they are new to smart devices most people would have a pretty good idea of what they would expect to see featured on a list such as this. Mostly they are obviously coming here for information on what apps to get if they don’t already and how these applications can work for them.
What do I want from the website?

This is a hard question, obviously I want people to view the website and to talk about it – this means I need to have correct information that is presented clearly and a well polished website overall.

What can I realistically provide and maintain?

This is perhaps the most important point of all. I plan to limit the webpage to the top applications ‘this year so far’ – or something like that so that I wouldn’t have to worry about keeping the website constantly updated if it was a website I was actually running. I guess it is just good to think about these things.

Source:http://lscr.berkeley.edu/advice/web/design

 

Research Website 1
Business Insider, Australia.
http://www.businessinsider.com.au/100-best-apps-for-iphone-and-android-2013-9?op=1#productivity-these-are-the-best-apps-to-help-keep-you-focused-and-get-things-done-1

I found this website very useful. It is frustrating that this website also does the top 100 list via genre but this makes me think perhaps this is the way to go. The only issue is that this could be classes as a cheeky way of getting my 5 pages, which really is not my intention. I could collate the data all onto one page but that is going to be one hell of an information overload. I then thought about having #100-#21 and then on a separate webpage having #20-#1 and doing more of an in depth look at the top 20? Or perhaps doing an in depth look at every 10th application. There really are so many different ways I could display this content to the viewer and this gets me excited about this idea that I’ve got. Anyway, back to.

Research Website 2
News, Australia.
http://www.news.com.au/technology/musthave-apps-for-work-rest-and-play/story-e6frfrnr-1226724344703

Once again, another website that compiles information based on application genre, so ultimately useless unless I decide to categorise my information into five genre sections of top 20’s, which realistically could be the best way to do is as I am assuming most of the top 100 Applications would be games anyway, and would hardly feature much from genres such as productivity or fitness.

Research Website 3
Aptoide.com
http://m.aptoide.com/more/topapps

This website compiles the top applications ‘this week’, ‘this month’ and ‘last year’ but for Android only. It is an interesting source of information displayed in a very horrible and useless way.   Another idea would be to go to iTunes and Google Play and find out exactly how many downloads each application has had and then compile a list from this information, but does this take into consideration rating? Also will this list compile questionable content also? Probably not, but is this fair? It’s a personal preference choice, and I as the website creator would like to keep my content as clean as possible. There is a very obvious amount of information I need to give the reader. I will need to inform them of:

  • Application title and icon
  • Date of release + creator
  • Rating
  • Price
  • Amount of downloads (perhaps)
  • Compatibility (IOS, Android, Windows)
  • Description of application

I have decided to give the information to the viewer in genres, the ones I have picked are:

  1. Productivity + News
  2. Social Networking
  3. Games + Entertainment
  4. Health + Food + Fitness
  5. Photo + Video

The next slice of information needed of this fun-pie is what the top 20 (or 10) applications of each of these genres actually are: Productivity 

  1. Evernote
  2. Gmail
  3. Microsoft Office Mobile
  4. Google Docs
  5. Dropbox
  6. Pages
  7. Paper
  8. Carrot
  9. Clear
  10. Jobsearch

Social Networking

  1. Facebook Messenger
  2. Facebook
  3. Viber
  4. Skype
  5. Whats App
  6. Twitter
  7. Tinder
  8. LinkedIn
  9. Tumblr
  10. AskFM

Games + Entertainment

  1. Youtube
  2. TVNZ
  3. Spotify
  4. Shazam
  5. Sky GO NZ
  6. Soundcloud
  7. IMDB
  8. Plex

 

  1. Candy Crush
  2. 2048
  3. Piano Tiles
  4. Quizup
  5. Fruit Ninja
  6. Badland
  7. Subway Surfer
  8. The Room
  9. Plague Inc
  10. The Walking Dead

Health + Food + Fitness

  1. Nike+ Running
  2. Runkeeper
  3. Moves
  4. Sleepbot
  5. Fixbit
  6. 30 Day Fitness Challenge
  7. 7 Minute Workout
  8. Full Fitness
  9. Fitness for Women
  10. Yoga.com Studio

Photo + Video

  1. Snapchat
  2. Litely
  3. Instagram
  4. Afterlight
  5. Flipagram
  6. Cinamatic
  7. Photo Editor
  8. Union
  9. PicLab HD
  10. Camera+

(Not all of these actually work in New Zealand, which means there are a few that I might take out simply for the fact that it doesn’t relate, I also want to perhaps swap one of these (perhaps fitness) out with shopping or ‘lifestyle’ because it is actually quite interesting) Lifestyle

  1. Tinder
  2. Trademe
  3. AMIassits
  4. NZsale
  5. GrabOne
  6. eBay
  7. Seek
  8. ASOS
  9. Hot or Not
  10. Watch Over Me

Conclusive points from research:  My best bet has now become to create a top applications website but categorised into genres. As long as I style my pages according to the select genre but still keeping a theme this shouldn’t be too hard to deal with. This also means I am not clogging up pages with information in the idea that too many words make people click away. So, nice pictures, small descriptions and easy to follow layouts will be my best bet. If I am to research the amount of downloads for all of these applications I could easily rank them in non-genre order also, I can decide on this at a later date. Now what I need to do is figure out how I want to display this information to the viewer..
Something I am worried about is the copyright issue of using the official icons, even though I am going to change them to fit my website colour scheme, the logos will be there, this is something I will have to ask Matt about 🙂