Designing to Guide - Web Design: April 2016

Friday, 22 April 2016

W6S2: Submission - Important Notes!

My prototype has been made entirely in html and css, so I have not submitted any InVision files. My coded article pages are, of course, included in this coded prototype.
My ‘index’ file is called “homepage.html”, please start your journey into my prototype here.
You will have to ‘Inspect’ my website to look at the mobile version.
I have included the files of the font’s I have used off of my computer incase you do not have them, so that you can view the prototype in the way it was intended.

Thanks!

W6S2: Homework - Final Website Prototype

W6S2: Submission - Rationale

I chose to respond to the open brief instead of the Dominian Post Redesign because I didn’t want to be limited by the site’s exisiting tone and target audience. I wanted to create a new news website that called to teenagers and young adults as I feel there is a real need to re-establish interest in news that is presented in more intellectual and truthful ways than social media platforms like Facebook, where the majority of youths recieve information. In my opinion the prominent news websites such as Stuff in New Zealand and The New York Times in the USA present information too hectically. I understand that they are trying to present a lot of information and potential user journeys as soon as the user enters their site to grab atttention and encourage the user to remain. But personally, I am overwhelmed by sites such as these and am likely to leave as soon as I enter if I feel too bombarded by an overload of information. I believe that a lot of young people feel the same way as me so I wanted to create a pared back website that is more user-friendly; light and welcoming. This is why I have chosen a simple style that relates to my ‘scoop’ theme through colour and minimalistic illustrations rather than photographs or intense graphics. I want the article headlines to speak for themselves in order to grab attention so I placed them in well padded grids to present them to the users in such a way that they aren’t overwhelmed and can easily select an article that interests them. Through my project have started thinking about how young people can re-invigorate a passion for news.

W6S2: Submission - Sitemap

W6S2: Submission - User Journey Report

W6S2: Submission - UX Specifications For One Journey

W6S2: Submission - UI Specifications Template

W6S2: Submission - Six User Journeys

Thursday, 21 April 2016

W6S1: Homework - Additional Ideas For Website

During coding my website I realised that there were some aspects that would be hard/take too much time to code that weren't necessary for my prototype to function and show the user journeys, so I didn't worry about coding them.

When the user clicks 'Print' a print box would pop up connecting to the user's available printers.
Instead of just containing one photograph, the image at the top of the article pages would be a carousel of multiple images and videos (if there were videos for that story). There would be dots under the left-hand side of the image carousel (opposite the image credit caption) that would let users know how much content there was to flick through and how far through they were (the dots would all be light grey except the dot indicating which image the user was on which would be dark grey).
The sort-by button would actually sort the content in that section!
The search function would actually be useable and would take users to a list of articles that contained their key word in the heading. The articles would be presented with the most recent first.
When a user clicks 'Sign Up' they would be taken to a page where they would get to choose up to three places and ten interests. They would also pick a username. To pick their interests the user would enter up to ten key words (each key "word" could be up to three words), such as 'All Blacks', 'Horse Racing', 'Art' etc. Articles that contained these key words would then be shown under headings in the user's 'Interests' section. To pick their places the user would be able to select a country in the world off of a world map, they would then be taken to a closer view of that country where they could click a province/state, the user could then choose a place within this state that was available as an option to choose e.g. World - New Zealand - Southland - Invercargill. The user would be able to do this up to three times and each place could be entirely unrelated.
Under 'Details' in the account section, users would be able to change the information they put in while signing up. They would be able to add or remove places and interests, and they would be able to change/update their username, email address, etc.
When the user clicks the 'Like' heart it would change from an outline to a filled in heart to indicate it has been clicked - the user 'Likes' this article.
When the user clicks the plus symbol to add an article to their list a box would pop up asking which of their lists the user would like to add this article to, or if the user would like to create a new list to add the article to.
When the user clicks the headphone symbol on an article page they would be played a pre-recorded audio file of someone (presumably a person 'The Scoop' would hire for the purpose of recording themselves reading out articles) reading through the content of the article.

W6S1: Homework - Final Website Development

I looked at changing the background colour of the individual article boxes, but I felt that it wasn't bold enough and opted to have a coloured background instead. I think that the coloured background version really pushes the articles forward and forms layers.

Making the entry - 'splash' - page more bright and inviting

For my account page I actually prefer the opposite colour application to what I've been using in the rest of my website. I feel that the completely coloured background is too heavy; I prefer the lightness of the opposite one. I also think the the considered application of colour in the top version draws the users attention to their account details.

W6S1: Resources - Article Content From Teachers

We had to chose and apply the information from two out of the three articles that the teachers supplied us with to our coded article page template. Surprisingly one of the articles they supplied us with I already had a version of in my website as part of two of my user journeys, so I merely had to update the information about the article and swap the body copy for their version. The other article I chose to produce was one I recognised as I had used the image and the headline in my 'National' section - so once I made the article page I could handily link it into my website straight away.

(I used the Earthquake and Vet School articles)

W6S1: Homework - Developing Article Thumbnails

https://dribbble.com/shots/1549923-PhotoLytics-Dashboard-UI

https://nz.pinterest.com

I like the idea that you can see how many likes something has before you enter it. I also think that I need a pop up when the user clicks on the plus ('Add To List' icon) so that they can chose which list to pin it to - therefore they are able to have as many lists as they want, like Pinterest