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.


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


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.



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


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


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


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


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


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.


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



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


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.


Search Results


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.


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.



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


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.


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.


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.


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


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.


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.



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.


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.



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.



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


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 the 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 the 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.


Search Results

IMDB’s search bar lists Titles, Names, Keywords and Companies in order to break down the search result for the user to clearly understand what he/ she is looking for. In case 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.


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 the user to gauge whether the film is liked by the general public overall.



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 actor’s real names are followed by their character names and a small thumbnail image of what they look like in real life.


Additional Information

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


In conclusion, IMDB provides sufficient information regarding cinematography, actors and the production of films. The website’s 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.


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


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.



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.


Search Results

The search bar reveals all related items to the specific product including merchandise. Filter options can be applied to break down the search results and pinpoint the customers chosen product. The product’s 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.



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.

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



  • 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?




  • 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?



  • 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?



  • 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


Task 2

Create pixel accurate design prototypes in Photoshop/ Illustrator consisting of all the pages that will feature on your website. This will contain all the graphical elements you require to make your site, including any branding you wish to design for yourself. It must also illustrate any interactive features and UX patterns.

  • Design sheets consisting of screen grabs of the site under development. Show the alternate options and designs. Include useful & descriptive annotations about the UX/UI compliance and wireframing, how the site will work and software tools used. Justify your selections.
  • A finished visual identity system worked into your Photoshop produced web design.
  • A final Photoshop prototype .psd file consisting of all the pages and graphics you need to create your site and supporting .jpgs of the final piece.

Alternative Design

  • I downloaded images of mountains to display as the banner.


  • I then imported one of the mountain images into photoshop and edited it using adjustment layers. I altered the Brightness, Contrast, Saturation. I incorporated a white brush at the top of the page to create a “Light” effect. Lastly, I typed “Josh Dore Portfolio Website” to describe wha my website was about.


  • I used Adobe Muse to import various images to create the foundation for the website. Using YouTube tutorials, I then designed the portfolio website using a responsive width so that the whole page scales when the browser scales.

Screen Shot 2018-03-01 at 11.21.55

  • After I created the Homepage, I then started to develop the Gallery using different shapes and altering the opacity to 50%, the circles represent “Adding an Image”.

Screen Shot 2018-03-01 at 11.22.22


Final Design




















Screen Shot 2018-02-08 at 11.33.35


Screen Shot 2018-02-28 at 09.52.33


Screen Shot 2018-02-28 at 09.53.02


Screen Shot 2018-02-28 at 12.27.22


Screen Shot 2018-02-28 at 12.27.40


Task 3

Create the fully-functioning website which backend uses HTML and CSS to be uploaded to your own server or a local server. You are required to demonstrate a number of competencies with the two key markup languages used in your final web design. Your final site must be based on all your previous development work but does not need to have all the functionality you may have planned.

During the design process consider what a portfolio site is for and who is likely to view it, paying attention to DOA requirements, and develop your design appropriately. The whole design process must be recorded throughout with annotations and screenshots where appropriate. When the project is complete write a short evaluation of your process and your final outcome, highlighting the issues that have affected your design decisions.

  • A folder of web prepared images for use on your website. ✓
  • A final website with files demonstrating showing HTML and CSS through the use of web browser. ✓
  • Minimum of 4 linking web pages. ✓
  • A page that contains text, images and hyperlinks. ✓
  • All pages navigable from each other. ✓
  • At least 2 external links. ✓
  • At least one bulleted or numbered list of at least 2 items. ✓
  • Sensible content that is not crude, offensive or defamatory. ✓
  • All images must be your own work. ✓
  • Your site needs to be consisted in style using master pages. ✓
  • Website uploaded onto a Local web server and visible on the internet using a standard browser. ✓
  • Evaluation of the design process and final outcome including peer feedback. ✓


Evaluation of the design process and final outcome including peer feedback.


The Nintendo website heavily influenced my final outcome as it displayed a simple yet effective layout and design. The colours and tones of Red, Grey, White and Black contrasted each other whilst the square boxes helped align each image and text which increased the overall viewing experience. I incorporated this technique into my design to develop a fun and simplistic effect which evoked happiness and contentment. Additionally, as my website represented a Game Design Portfolio, it was necessary that I delivered a unique and entertaining design.

In the beginning, I created a black and white design with mountains; it didn’t justify the overall description of my website “Games Design Portfolio”. I needed to enhance the viewing aspect so that anyone would recognise and link my “Games Design Portfolio” website as professional and fun whilst remaining simplistic and easily navigable.

I’m extremely pleased with the final outcome, I designed all the icons, text, images, logo and layout within Adobe Illustrator which I then transferred to Adobe Muse so that I could add hyperlinks and a moving gallery on the homepage. If I had more time, I would’ve included more images in the gallery section with a brief description of “How I developed this particular design”.

The techniques I used were adequate for my solution as the final outcome is professional whilst remaining simplistic. Furthermore, I would’ve liked to of understood HTML 5 so that I could develop the interior code to a higher industry standard, for example adding videos, animations and sound etc.

In conclusion, the flat design of my “Games Portfolio Website” is simplistic whilst remaining professional. The vibrant colour Red juxtaposes the monotonous tones of Grey and Black, helping each section stand out. Moreover, the icons and negative space produce a clean environment thus; delivering an easily navigable user interface which evokes contentment and an overall enhanced user experience.