Task 1

  • Research 6 existing websites, noting good and bad design, as well as identifying features you wish to include in your own site and the common locations of key features found on websites.
  • Explain Web browser functions and how they’ve changed with browser development e.g plugins, cookies, FTP, JavaScript, etc.
  • Create the initial designs for a Portfolio website that will showcase your work and visually represent you (as a set of fully annotated wireframe website designs of the pages of your website on paper). Include rejected ideas and concepts. This work should be completed initially in your sketchbook.
  • Presentation of website wire-frame concept to peer-group. Record of feedback from peers.
  • Create a wordpress.com account for use throughout the year as an online portfolio and place to record research.

Research

Kendra Haste 

Website: http://www.kendrahaste.co.uk/

Homepage Background

If the user clicks on the link to Kendra Haste’s website, they’re immediately shown a beautifully sculptured mesh bear standing still in a sunset field. The colours are vibrant which enhances the visual elements of the sculpture thus capturing the user.

Screen Shot 2018-01-04 at 12.56.04.png

Newsletter Credentials 

After a period of time; the user is shown a pop-up box containing information asking the user to input their credentials. The subtitle states to “Subscribe” to the newsletter with the necessary fields to be filled out. In order for the user to keep searching on Kendra Haste’s website, they can either, 1) Subscribe to the newsletter by entering their credentials, 2) Click off the box allowing it to disappear and thus giving the freedom to search again. Pop-up boxes can be frustrating as they appear unknowingly, this could deter the user away from the website, especially if they’ve just clicked on the link on the web browser. However, it can prompt the user to “Subscribe” to the newsletter allowing monthly/ or weekly emails to be sent which some people may enjoy.

Screen Shot 2018-01-03 at 11.33.15

About

The about page displays a few paragraphs of personal information and life experiences. The four Sub-categories; About, Statement, Biography and Bibliography present further information for the user if they were interested in “Kendra Hastes” work and/ or journey. Additionally, these are presented clearly below the main navigation bar for ease of access.

Personally, I enjoy the layout and simplicity of design, however, the typeface is too small and blends with the white background, it’s illegible. At times it forces the user to re-read the previous text. Kendra Hastes demographic are older due to her profession being sculpturing, with this in mind, it would be harder for people to enjoy her biography.

Screen Shot 2018-01-03 at 11.33.57

Sculpture Photographs

Kendra Haste’s sculptures have been arranged in a grid format to show a numerous amount within a smaller space.

Screen Shot 2018-01-03 at 11.34.11

If the user clicks onto a photographed sculpture, they’re redirected to an enlarged version with a brief description of when the sculpture was made, the name of the sculpture and whether the sculpture is for sale. Below the information is a selection of images also in a grid format called “Further Images” to help reveal relevant designs that she has created. Furthermore, additional information; All, Previous, Next and the number of total sculptures on that page, are presented at the top right of the photograph.

Kendra_Haste_Enlarged_Sculpture_01

Drawings

Similar to the sculptures, Kendra Haste has presented her drawings of animals within the same grid format. The majority of the images were created from charcoal on paper which contrasts the background. Additionally, if the user clicks onto the photograph, they’re redirected to an enlarged version with a brief description.

Screen Shot 2018-01-03 at 11.34.22

Exhibitions

The exhibitions page portrays a list of events in which Kendra Haste has sent her sculptures too, it details the name of the event, date, location and another brief description outlining the theme of the event.

Screen Shot 2018-01-03 at 11.34.34

News

The news tab is self-explanatory, it details recent information about Kendra Haste and her work with specific names, dates and locations of where her sculptures have been sold or sent to. The news page also presents an image of Kendra Haste at work on one of her sculptures, I like this feature as it shows her hard work and the process of how she gets to the finished product.

Screen Shot 2018-01-03 at 11.34.42

Videos

This page contains five videos that are displayed in an individual format. Each video details her role in delivering a sculpture to a given location.

Screen Shot 2018-01-03 at 11.34.55

Store

The store provides two columns of artwork from which the user can select and purchase. Brief information is presented to the right of the thumbnail image, if the user is interested with a piece, he/ she can “Read More” which redirects the user to a page with an enlarged version of the artwork and more information.

Screen Shot 2018-01-03 at 11.35.05

Contact

Lastly, Kendra Haste’s contact information has been provided so that people can either Call, Email or write a letter depending on their chosen method.

Screen Shot 2018-01-03 at 11.35.26

In conclusion, Kendra Haste’s website is professional and it describes concisely the work she produces. Necessary information has been neatly organised into sub-categories, in which the user can effortlessly travel to using the navigation bar. However, the only criticism is that the typeface and colour choice is too small and blends in with the background, this decreases the effectiveness of the message she is trying to convey and overall, ruins the experience and enjoyment that the user would’ve had if they could read the information more fluently.


Amazon

Website: https://www.amazon.co.uk/gp/cart/view.html/ref=nav_cart

Homepage

Amazon_Homepage_01

Amazons homepage features a slideshow of advertisements offering special deals and new items; if the image is clicked, the user is redirected to the specific location of the “offer” or “new item”. The far left depicts the user’s recent purchases alongside their username and profile picture, this allows the user to access their basket more efficiently without wasting time by navigating through various tabs and windows. Furthermore, Prime, Fresh, Video, Music, Alexa etc. are presented in rectangular boxes with the title, a coloured bar and a brief description of the service.

Navigation Bar

Navigation_Bar_01

The navigation bar is situated at the top of the web page, it displays the search-bar, “30-Day Free Trial”, Your Account, Try Prime, Your Lists, Basket etc. If the user starts typing, he/ she will be shown a prompted auto-fill to help aid the process of searching for items, this is useful as it speeds up the time that user browses the website whilst creating a friendly user experience. “0” represents the number of items the user has added to their basket, this can be seen in the top right of the screen within the navigation bar; when clicked, it redirects the user to their basket where they can preview their desired orders.

Amazon_Searchbar_Autofill_Feature_01.jpg

Search Results

Search_Results_01

Each search result is displayed in a grid format, the Product Name, Description, Price and Rating sits below a thumbnail image of the product. To the left of the screen, a rectangular bar displays the filter options. The user can prioritise the results that show by altering the filter options, this would allow for quicker and effective browsing whilst providing a friendly user experience.

Amazon_Product_01

If the user clicks on the thumbnail or name they’re redirected to further information regarding the product.  A set of small images are displayed alongside a blown-up image; when hovering over the photo, an enhanced version will appear; the title, description, rating, stock, delivery date etc. are all shown next to this.

Whilst scrolling down, the user can read reviews, FAQ’s, and related products which users have bought together or based on recent search history.

Amazon_FAQ_01Amazon_Reviews_01

Amazon_Related_Products_01

Additionally, a large yellow button stating “Add to Basket” can be located clearly on the right of the page, this automatically adds the product and the number on the basket icon increases.

In conclusion, the site functions efficiently allowing the user to effortlessly flow between tabs and windows. Offers, Special Deals, Adverts and other boxes regarding product information are concise, revealing its name, thumbnail image and a brief description providing sufficient material for the user to determine whether they’re intrigued. Each link redirects the user to the desired destination with additional information. The navigation bar enables the user to travel across web pages quickly increasing productivity whilst browsing Amazons web service. However, new customers may become overwhelmed with all the information provided and thus leading to a decrease in customers. Overall, I enjoy browsing the website and its vast accessibility.


PlayStation Store

Website: https://store.playstation.com/en-gb/home/games

Homepage

Playstation Stores homepage is sprinkled with animations and interactive screens, ranging from sliding ads to static link pictures. The homepage is also bright and full of colours which attract the user. Bold Lettering is also used in the “January Sale” alongside a brief message for further information. Additionally, users can scroll down to interact with the website; “Find your perfect game” is just one of many features throughout the site.

PS_Store_HomepagePS_Choose_Game

Search Result

If the user searches for a particular product, they’re redirected to the desired page filled with bold information to read, watch or listen. Silent videos are presented as the banner with the game’s title spread across the image. Again, if the user scrolls down, the parallax background moves up adding depth to the page whilst more information about the product is revealed; Release Date, Publisher, Genre and Developer.

PS_Search_ResultPS_Store_Game_Description

In conclusion, the site performs fluently. Tabs, links and pages are accessed instantaneously allowing the user to quickly search for products. Playstations colour scheme is shown in the main navigation bar, it lights blue with the selected tab. Additionally, brief information develops an overall insight for the user to understand what certain items entail.


YouTube

Website: https://www.youtube.com/

Homepage

YouTube’s homepage is formatted to present videos on a grid, each row represents similar videos. The user can use the arrows at the end of each row to reveal more videos. The title, number of views and channel name is shown beneath the video thumbnail. If the user hovers over a thumbnail video, they’re shown a short 3 second preview clip. I like these features as you can understand important information immediately without clicking and being redirected to another page which takes time.

YouTube_Homepage

Side Panel

If the user clicks the “Hamburger” symbol, they’re shown a side panel conveying a number of tabs; Home, Trending, History and Best of Youtube. This can help the user to find the channel they like or travel to places faster. Furthermore, if the user hovers over each tab, the main colour scheme of YouTube is shown as an overlay.

YouTube_Side_Panel

Trending

The trending page offers the user insight into what’s popular within the day and/ or week, the top being “#1”. Additionally, the videos are displayed on a grid, however, they’re portrayed as columns instead of rows to differentiate the Homepage from the Trending page.

YouTube_Trending_Page

Watch History

If the user selects “History” from the side panel, they’re redirected to a page with all their most recent “Watched” videos displayed first. Accessing this data can be helpful if the user wants to rewatch a video they liked or are currently in the middle of watching.

YouTube_Watch_History

Channel

The channel page features an avatar on top of a banner in which the administrator of that page can change. Their channel name is presented below this in bold alongside a small YouTube button with a tick inside to inform the user whether the channel is verified or not. Moreover, a subscribe button is displayed towards the right side of the page, highlighted in red, with the number of subscribers, if the user likes the content the channel produces, they can subscribe which will notify them of their next upload. Additionally, a channel trailer, popular videos, recent videos, related channels are shown on the main homepage. If the user decides to find out more, they can use a smaller navigation bar provided by that particular channel; Home, Videos, Playlists, Community, Discussion and About are displayed here.

YouTube_Channel_Page


IMDB

Website: http://www.imdb.com/

Homepage

IMDB’s homepage displays a navigation bar at the top of the page like most websites. The user can create an account, search for films or actors, see news or community etc. Recent films are featured below the navigation bar, they have a preview “Play” button for user to watch a short trailer, this is helpful as it’s easy to access without the need for a search bar. Films Opening This Week In The UK, Now Playing (UK Box Office) and UK Coming Soon, are listed down the right hand side of the page available for users to browse. A small bookmark icon is located in front of the film allowing the user to add it to their “Watchlist” if they use IMDB regularly.

IMDB_Homepage

Search Results

IMDB’s search bar lists Titles, Names, Keywords and Companies in order to breakdown the search result for the user to clearly understand what he/ she is looking for. Incase the user has forgotten the name of a particular film or actor, they’re immediately shown all results under the letters they’ve inputted alongside dates, whether its a TV series, Producers, Number of Seasons etc.

IMDB_Search_Results

Film Description

“Avengers: Infinity War (2018)” is displayed clearly above the film poster and trailer. The titles font, size and colour contrast is legible. It also reveals key information, for example, Date, Tags, First Release Date/ Location. Below the poster and trailer is a brief description of the film. Directors, Writers and Stars are concisely shown in rows with links to their profiles. A small graph icon of the “popularity” with the statistic is revealed beneath the stars, allowing ther user to gauge whether the film is liked by the general public overall.

IMDB_Film_Description

Cast

Credited Cast, sorted by IMDB STARmeter. A list of all the Cast present in the production of the film is shown here. Users have the ability to access their profiles by clicking on their name. The actors real names are followed by their character names and a small thumbnail image of what they look like in real life.

IMDB_Cast

Additional Information

The additional information section highlights Storyline, Details, Company Credits, Technical Specs and Trivia. It reveals an overview of the films process and production allowing the user to acknowledge in depth details and understand how the film was made.

IMDB_Additional_Information

In conclusion, IMDB provides sufficient information regarding cinematography, actors and the production of films. The websites homepage features various Tabs, Thumbnails, Trailers and Trivia for users to read an enjoy without searching endlessly to find the details they desire. Although IMDB can be overwhelming to new users as it displays a lot of information, however, with time it becomes easier to navigate and search for results using different functions that work efficiently to provide the best possible answer.


GAME

Website: https://www.game.co.uk/

Homepage

GAMES Homepage displays adverts which periodically transition to feature new products. Various brightly coloured adverts with bold white text are used to attract the viewer to new deals and offers for games, consoles and miscellaneous items. The pictures are aligned and neatly organised to help the viewer browse quickly. Some adverts portray “PayPal” ensuring a safe purchase alongside the price and description of the product. The background is grey which could help night browsers as a harsh white light would be distracting and could deter the customer away.

GAME_Homepage

PS4

The navigation bar features Playstation, XBOX, Nintendo, PC, Pre-Orders, Tech, Pre-Owned, Deals and News all the necessary requirements for every console/ PC player. The user is redirected to the desired page featuring similar ads to the homepage, however, they’re tailored for the chosen console. Additionally, adverts include the title, thumbnail image, price which are boldly shown in alignment.

GAME_PS4

Search Results

The search bar reveals all related items to the specific product including merchandise. Filter options can be applied to breakdown the search results and pin point the customers chosen product. The products image is shown on-top of the packaging (PS4 – Blue, XBOX – Green) another indication as to what device the game corresponds to. The Title, Console Name, Price, Pre-Owned are listed beneath the image.

GAME_Search_Results

Product

An enlarged version of the product and packaging is portrayed on the left hand side of the page similar to other websites prior. “Add to Basket” is written in bold sans white on-top of a vibrant purple which corresponds to the companies colour scheme. If the user scrolls down, they’re met with frequently bought together items which could potentially increase sales of different items and products throughout the website.
GAME_Product


Explain Web browser functions and HOW they’ve changed with browser development e.g Plugins, Cookies, FTP, JavaScript.

Plugins

Definition

  • In computing, a plug-in (or plugin, add-in, addin, add-on, addon, or extension) is a software component that adds a specific feature to an existing computer program. When a program supports plugins, it enables customisation.

How has this changed with browser development?

 

Cookies

Definition

  • Cookie. A small text file (up to 4KB) created by a website that is stored in the user’s computer either temporarily for that session only or permanently on the hard disk (persistent cookie). Cookies provide a way for the website to recognize you and keep track of your preferences.

How has this changed with browser development?

FTP

Definition

  • The File Transfer Protocol (FTP) is the standard network protocol used for the transfer of computer files between a client and server on a computer network. FTP is built on a client-server model architecture and uses separate control and data connections between the client and the server.

How has this changed with browser development?

JavaScript

Definition

  • An object-oriented computer programming language commonly used to create interactive effects within web browsers.

How has this changed with browser development?


Initial Designs: Portfolio Website

Wireframe Moodboard

Portfolio_Website_Wireframe_Moodboard_01


Task 2

Advertisements