WEB RESEARCH – History of browser based design/plug-in development

Browser Design 

  • Netscape navigator
  • Internet explorer
  • Mozilla Firefox
  • Safari
  • Chrome


  • Shockwave 
  • Flash– In the 2000’s the plugin was installed in order to display web pages and games. Its main purpose was to show compressed content on the webpage.
  • Open 3D
  • Quicktime 
  • Windows Media WMA(audio) WMV (video)
  • Real Audio– First created in 1995, used for primarilly streaming audio. It was used by the BBC until 2009. It also became less popular and as a result discontinued in 2011.


HTTP Cookie is a small piece of information that is stored on the users browser, which allows the browser to remember a small piece of information e.g. a password/email or items that were stored in the shopping basket.

Development of Browsers


The first browser was created in 1990 and was named the WorldWideWeb, the browser at this point in time could only display text and links, which meant the browser was mainly a black screen as images could not be displayed on the web pages.

Mosaic Web Browser 1993 

This was the first browser to display images in the same window, instead of displaying it in a separate document like the previous web browsers and was responsible for the popularity of the world wide web.


1995- 2000

Internet explorer was introduced in 1995 which also created the use of tables, images and Gifs.  Javascript began to appear on some webpages which meant that the web page could have more complex features e.g. in the form of pop-ups, The design at this point in time was still basic, but did have an advance in features such as colour, and images.


Netscape developed a company called the Mozilla Foundation to create a new browser to compete with Internet Explorer. This browser would develop into Firefox.

With  todays technology, the efficiency of web design and technology has changed. 20 years ago at the beginning of the WorldWideWeb, search engines would not be able to get as many website results compared to now. If you were to search for a news website,  the engine would have limited results due to the technology whereas now if you were to search for the same thing, the engine would be able to list many websites as well as picture and video results. This is due to the technology development of search results as it now uses the word that is inputed e.g. news and then brings up elements of data from that in much more detail.


Screen Shot 2017-02-08 at 11.51.45.png



YouTube.com has a good web design as it has a clean layout which uses the grid system to help layout its features on the web page. The colour scheme is also very simple yet effective as the red is used to accent the page as icons, the main picture header, and as the subscribe button. The page is easy to navigate as the sub-headings for video genres are on the left hand-side, and the thumbnails of the videos take up the majority of the screen to help differentiate from the other videos on the screen.



This web design has a nice layout, and slider scroll which controls the end logo of the hand. The colour scheme of the page all complement each other with the red, black and white. The closing of the hand at the end gives a user input to the website which is what makes the website more personal. The navigation is easy to use as the text is on a clear white background to make it clear to read, by using the scroll option the pages move smoothly upwards.

Screen Shot 2017-01-31 at 12.50.46.pngScreen Shot 2017-01-31 at 12.50.56.pngScreen Shot 2017-01-31 at 12.51.07.pngScreen Shot 2017-01-31 at 12.51.15.png


What I like about this website is that on each page there is a small animation going on in the background which adds to the UI and UX of the website. The user navigation of the website is nice to use as it uses swift motions to the left or right when going back/forward through the pages.

Screen Shot 2017-02-07 at 12.34.47.png

Screen Shot 2017-02-07 at 12.34.35.png


I like how the website has various shapes, and ways of displaying the information in a clean and easy way. The web page uses a grid system to display the text in columns.

Screen Shot 2017-02-07 at 12.37.40.png

Screen Shot 2017-02-07 at 12.39.20.png

With this website its layout is very clear and along with the colour scheme, makes it easy to navigate. It shows the artists work in a clear fashion using the grid system and a clear background. As the theme of the website is star wars, it has indents such as the wireframe lines to personalise the webpage to match the star wars universe.

Screen Shot 2017-02-07 at 12.54.13.pngScreen Shot 2017-02-07 at 12.51.25.png

Screen Shot 2017-02-07 at 12.53.55.png

This website uses blocks of colour and the movies to use as the headings of the page. The website uses rectangles to match its logo as it incorporates a rectangle in it.

Screen Shot 2017-02-07 at 13.12.26.png

Screen Shot 2017-02-07 at 13.11.37.png

Screen Shot 2017-02-07 at 13.10.56.png



Has a good layout as it uses the grid system, and shows the image larger than the text, with a short description about the image. The pictures all have a theme running through it as they all have a low opacity/ consist of the same colours such as the pastel colours.

Screen Shot 2017-02-07 at 13.49.10.png

Screen Shot 2017-02-07 at 13.48.47.png


Screen Shot 2017-02-22 at 11.12.19.pngScreen Shot 2017-02-22 at 11.12.12.png


Screen Shot 2017-02-22 at 11.45.06.png

Screen Shot 2017-02-22 at 11.46.09.png


The poor use of colour and with the outdated red buttons makes the navigation of the web page unclear and messy.

Daily Mail:daily-mail

There is no clear layout to this webpage as its text overlaps the other columns of text. This makes the text unclear to read and makes the navigation difficult too. The lack of colours makes the page dull, and does not separate the different types of news into groups.

Screen Shot 2017-02-20 at 14.08.31.png

The difference between these websites is quite clear as the one above has a bad layout and navigation as they have too much text and images on the same page.  The good websites take into account the space of the webpage unlike the bad example. The site does not have a sense of layout as there are many overlapping ‘grids’. The colour scheme does not stick to three colours but instead uses colours such as green, yellow, blue, red.  The other examples of good websites uses a grid system, a complementary colour scheme and the correct ratio of picture to text.

  • Good navigation
  • Colour scheme consisting of 3 colours
  • Grid system
  • Clear headings/menus
  • Text to image ratio
  • Clear font that is easy to read
  • Dimensions of the page



UX and UI design issues Browser Design

In order for a browser page to be popular, the browser must contain:

User Interface (UI)- The design of the website e.g. does it have a good navigation system, and is it clear enough for the user.

User Experience (UX)– Process of enhancing the users experience e.g. improving the websites look/usability to make it clear and easy to use.

Desirability– the website is designed in a way that users are happy to use the web page if it looks authentic which is more likely that the user will come back again.


The navigation of the website must be clear in order for the website itself to have a good design. The headings of the website must be clear, having a good font and typography that is readable to the viewer.

This website has very poor navigation as there are no clear grid systems in place to separate text and images. The colour scheme also does not help the design as usually the colour scheme is used to separate the content such as text and images.

Image result for poor navigation websites

Responsive web design:

The website must be responsive to whatever device that the webpage is being viewed on. For example, if the web site is being viewed on a mobile device, the web page must shift its layout to fit the dimensions of the phone, so that the content is viewable in a clear fashion. If the website is unresponsive, it is unlikely that the website will have many occurring visitors as it would be unclear, thus lowering the UI and UX of the website.

Image result for responsive design png

Comparison of good and bad website design:

Image to text ratio:

The websites design must have enough images to accompany the text on the page, but it is easy to have too much text or too many images which cause the website to become cluttered and unclear to use.


This links to responsive browser design, as each device e.g. mobile, desktop and tablet all have a different dimension size and resolution. The web page must be able to change to each dimension size that allows the website to be viewed on every device.
Image result for responsive browser design dimensions

Typography Palette:

The typography that is used on the web page must also be clear and easy to read. The font should fit the the genre of the page e.g. if the website is a music site, it should contain a more ‘blocky’ text.  To ensure the page has a good UI and UX the webpage should stick to two fonts at the most e.g. one for the heading, and one for the text.





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 )

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