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.

 

Placement

Padding,

Border,

Margin

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

 

https://wireframe.cc/

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

 

 

DIGITAL ART

LAYOUT 1

portfoilo.png

LAYOUT 2

Screen Shot 2017-02-22 at 12.24.31.png

 

nightmare.png

 

https://thenounproject.com/

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

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

 

Drawing (3).png

 

Drawing (1).jpeg

Drawing.jpeg

Drawing (3).jpeg

 

LANDING PAGE

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

 

https://sketch.io/sketchpad/

 

 

 

 

 

FINAL COLOUR SCHEME

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s