Browser Design Sketches & Development


Layout-  Placement/positioning.

Space- Making sure there is enough space on the page so that the webpage does not become crowded

Colour- using 3 complementary colours.

Text-typography/fonts 2-3 Font types, as not all browsers can display all fonts so it keeps a backup font.

Images- Size of image, dynamic/responsive- making sure the image is still viewable on multiple devices.

Links– Hyperlink – External/Internal, where are the links running to ? e.g. Social Media, Contacts, My Work/Projects/Portfolio.

Continuity- across all pages using a theme.






CSS- ‘Float’

Measure in pixels,

CSS- class ID (SHOE) red, does it automatically , by changing the content all together, rather than individually.

Bootstrap: draws 12 grid lines across pages, to create composition and placement.

CSS- Design.

Different browsers load the webpage differently, e.g. different types of video.



Screen Shot 2017-02-01 at 11.21.38.png




Screen Shot 2017-02-01 at 11.30.15.png





Screen Shot 2017-02-01 at 12.51.18.png





Screen Shot 2017-02-07 at 13.02.04.png




Screen Shot 2017-02-07 at 13.44.09.png



Screen Shot 2017-02-08 at 09.36.10.png






Screen Shot 2017-02-08 at 09.59.24.png





Screen Shot 2017-02-08 at 11.55.00.png

Screen Shot 2017-02-27 at 13.23.08.png



Screen Shot 2017-02-27 at 13.24.33.png



Screen Shot 2017-02-27 at 13.26.01.png



Screen Shot 2017-02-27 at 13.28.54.png


Screen Shot 2017-02-27 at 13.31.55.png











Screen Shot 2017-02-27 at 13.39.23.png




Screen Shot 2017-02-27 at 13.43.26.png




Screen Shot 2017-02-27 at 13.46.53.png





Screen Shot 2017-02-27 at 13.54.25.png








Screen Shot 2017-02-08 at 12.10.21.png




Screen Shot 2017-02-08 at 12.08.38.png




Screen Shot 2017-02-08 at 12.15.15.png

Screen Shot 2017-02-08 at 12.17.33.png



Example of Landing page:

Screen Shot 2017-02-22 at 11.05.13.png



Screen Shot 2017-02-22 at 11.31.34.png


I may create a section where it contains all of the development of that particular brief e.g. weather app, the images of the development will scroll up when the user uses the scroll on the mouse. This way its easier to navigate all of the JPG’s, instead of clicking a arrow each time to view a new image.


Screen Shot 2017-02-22 at 11.38.22.png




Screen Shot 2017-02-22 at 11.42.45.png







Screen Shot 2017-02-22 at 12.24.31.png



Screen Shot 2017-02-22 at 11.29.02.png

Illustration for the background ? consistent throughout each

Merch Page ?



Screen Shot 2017-02-28 at 12.15.59.png


Screen Shot 2017-02-28 at 12.26.41.png


Screen Shot 2017-02-28 at 12.20.19.png

Screen Shot 2017-02-28 at 12.34.53.png



Screen Shot 2017-02-28 at 12.41.16.png

Screen Shot 2017-02-28 at 12.49.26.png



Screen Shot 2017-02-28 at 12.52.19.png




Screen Shot 2017-02-28 at 13.00.00.png




Screen Shot 2017-02-28 at 13.09.46.png



Illustration ideas to be put as the background on the web pages. I have made these drawings on Photoshop and Deviant Muro. Screen Shot 2017-02-28 at 13.13.36.png




Drawing (3).png


Drawing (1).jpeg


Drawing (3).jpeg



Drawing (6).jpeg


Drawing (7).jpeg



This layout is the one that I will go with as it suits the

Drawing (8).jpeg


Drawing (4).jpeg







I have decided to use a black and white colour scheme for my webpage as it has a modern look to it.I will use white for my text and black for the background. I will use

















Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s