Website Final Design


For my final website outcome, I am quite proud of as I successfully created a website using the colours red and dark grey. The design itself is quite minimalistic however it does have a certain unique style to its. for the final design the thing I would change would be the responsiveness of the website as a whole.

I wish I had set up a better gallery function as well as having a slideshow function for the mobile version of the website that would have better functionality for that device. Aesthetically the website looks very nice and unique however it would have been better if I used very specific images to create a more creative design.

The contact page was very basic and bland however it does have a quite straightforward design that does keep the user focused on what is needed to be focused on which is the artwork.






Task 2: Design Prototypes for Websites

This is an initial design I have created for my website using photoshop, this my idea of what I want it to look like however, I may change it as I continue to design the website.

the coloured panels are actually not part of the design however they indicate where images will be placed of my own work.

Screen Shot 2018-01-22 at 14.14.59Screen Shot 2018-01-22 at 14.15.29Screen Shot 2018-01-22 at 14.15.59Screen Shot 2018-01-22 at 14.16.11

Colour Palates

Screen Shot 2018-01-25 at 17.20.05Screen Shot 2018-01-25 at 17.21.43Screen Shot 2018-01-25 at 17.19.50


Task 1 – Web Design Research

Screen Shot 2018-01-03 at 12.09.49Screen Shot 2018-01-03 at 12.13.33

I like the simplistic look of this page looks especially the layout and how it uses a white background to focus on the art pieces keeping the focus on the art pieces.

The homepage is quite nice as it gives the view a broad understanding of what they are going to find on this page this makes the page more relatable to the viewer and identifies the artist/creator.

However, this website good qualities make it kind of bland and very empty not using any of the negative space which isn’t a bad thing, however, this isn’t something I am looking for in a website.

Screen Shot 2018-01-03 at 12.09.56Screen Shot 2018-01-03 at 12.13.02

This website has very beautifully designed home page and gallery as when an image is selected it opens up the picture and makes it big and also give it an appropriate background colour which makes it better to see and visually brings out the piece as a whole.

The homepage also brings up a very cluttered look with no negative space being used and all the images which create this illusion that the user has so much work to view. however, it doesn’t make it worse as the clash of colours creates this aesthetically pleasing homepage which is a piece of art in itself.

The interface is also very smooth and easy to assessable which creates a brilliant UX.

Screen Shot 2018-01-03 at 12.12.27Screen Shot 2018-01-03 at 12.12.37

This website has a bit of a mixture of the first two websites as it uses both a cluttered look and negative space to create this organized look which helps the viewer look at there work but not overwhelm the viewer.

The black background also brings out the pieces of art as they are quite vibrant and help the page be blinding as for the with the background creating this radiating light that could make the viewer uncomfortable.

The layout is also very organized. once opening an image into it gallery mode it is also categorised for example we see the image of kylo ren, however, we can see Chewbacca underneath of it which shows that its set to the view can look at similar topic images/work.

Screen Shot 2018-01-03 at 12.10.01

This isn’t really a website more of a design of a home page for a user of art station which is a social media site. However, I really liked the layout of this homepage as it has five pieces of work that show off the creators style and a bit of his range of what type of work he creates this also helps the viewer understand that there is some kind of illustrator of some kind. If each image could be clicked on and view in a gallery mode like the others it would create a great UX.

If each image could be clicked on and view in a gallery mode like the others it would create a great UX.

Screen Shot 2018-01-03 at 12.10.16Screen Shot 2018-01-03 at 12.10.34

This game designers website is quite basic and keeps its simplistic look to make is thumbnails stand out more and create a kind of similar style to the first two websites I talked about.

However, this website homepage has a slideshow feature that basically creates this automatic show of some of this artists images and works which is very smooth to navigate and enjoyable to use to gain quick access to his work.

the colour white is still quite bland and very basic however on the homepage it works quite well as there is the big panel of the slideshow feature and the white helps bring that out.

Screen Shot 2018-01-03 at 12.10.13Screen Shot 2018-01-03 at 12.10.58

I like how this website uses giant pictures to show what their skills can achieve and create and also publicizing it. there uses of navigation and sliders also create a very modern website and make it better for a lot of more serious to navigate but most importantly everyone can use and still feel happy about the UX.

The colours used very smartly placed to nicely collide with the image and not ruin the site’s look and appeal.


Web-Brower – Functions

Web browsing function consists of rendering HTML which is the code used to design web pages and every time a web page loads up it has to process the HTML which includes text, links and references to images and other items such as cascading style sheets and javascript functions.



HTML – Hypertext Markup Language a standardized system for tagging text files to achieve font, colour, graphics, and hyperlink effects on World Wide Web pages.

CSS – Cascading style sheet is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict.

Javascript – A object-based programming language used to create interactive effects within web browsers

AJAX – is a set web development techniques that which use web technologies

JQuery– JQuery is a fast javascript library that is used to simplify event handling such as HTML client-side scripting and any animations and interaction on a web page.

Bootstrap- Bootstrap refers to the development of faster environments, for example, a very basic text editor and an assembler program.

Database – a database is a set of data held in a computer, for example, SQL Server and MySQL which allow multiple users to work with data at the same time creating advanced security for access to the data.

Client- a desktop computer or workstation that is capable of obtaining information and applications from a server.

Web-server- web server is a computer system that processes requests via HTTP which is the basic network protocol used to distribute info on the world wide web.

FTP- The File Transfer Protocol is the standard network protocol used for the transfer of computer files between a client and server on a computer network.

PHP- is a server-side scripting language designed for web development but also used as a general-purpose programming language.

SQL- Structured Query Language is a domain specific language used in programming and designed for managing data held in a relational database management system, or for stream processing in a relational data stream management system (RDSMS).

MySQL- MySQL is a powerful open source database server built based on a relational database management system (RDBMS) and is capable of handling a large concurrent database connection. is an open-source server-side web application framework designed for web development to produce dynamic web pages.

Agular- is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

Parts of a Web-Page

  • Header/ Banner
  • Logo
  • Slider
  • Navigation
  • Gallery
  • Thumbnails
  • Lightbox
  • Footer
  • Images
  • Videos
  • Links
  • Text 
  • Soundtrack/Effects
  • Loader(loading bar)
  • Social media

Iframe – An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website

Images were taken from;

Create a free website or blog at

Up ↑