What I learned – Week Six

Images & Colour

Fistly we looked at images and their different raster formats which include: jpeg, GIF, png-8 and png-24. We looked at their different colour depths and how jpegs and png-24 are true colour so can display around 16 million colours and gif and png-8 can display 256 colours. The file formats with the 256 colour paletted are not good for photographic images as they use dithering to simulate the additional colours.

Each of the different file types have a ‘killer feature’. Jpegs have variable compression, gifs have frame animation, png-8 is smaller in size than the equivalent gif, and png-24 has alpha transparency.

In terms of wha the different formats are best used for: JPEG is best for photographs, gifs are best for simple graphics or animations, png-8 also for simple graphics, png-24 is best for complex graphics (photo and line art).

We were also informed on scalable vector graphics which use vectors (coordinates) rather than pixels and are thus infinately scalable without degrading the quality in any way. They can also be embedded directly into html rather than linked as they are written in xml.

We discussed image positioning and how you can use css floats to place the image to the right or left. We also lookedat placign them in the centre of the page and using background images.

We then moved onto colour and how certain colours work in harmony together and others clash and how colour contrast is important to accessibility.

We looked at how to specify colours in CSS. They can be specified by name, hexidecimal or rgb value.

We discussed how to build colour schemes. Monochramatic schemes are built with one colour with the simple adjustment of the saturation and hue to create different shades. And we learnt how you can use images to create colour schemes using the colour picker.

We then moved onto colour theory and looked at the different colour schemes you can build including analogous, complementary and triadic.

We went through some useful online tools including colour calculator, paletton, coolors, palette fix. We also looked at how you can use illustrator to build a style guide for your web sites and check if they are accessible for people with colour blindness. Here is some of the colour inspiration for my Introduce Yourself project that we are currently working on.

styleguide created on illustrator colour inspiration and palette created on adobe illustrated


What I leared – Week Five

This week was all about typography and we learned how much of an important component of web design it is. We learned about how it is used to reinforce the meaning of text and is for the benefit of the reader, not the writer.

Typography is not just about chosing a typeface. It is about how that typeface is used in terms of size and colour, line height, letter and word spacing and general layout. All of these things can be controlled in CSS.

We learned about how you can access more fonts on the web with services like Google Fonts and Typekit. Google fonts are open source fonts so don’t require any other licences but other services may not be the same.

We then talked about how typefaces are classified.  They are either serif or sans-serif, although there are other types that are less commonly used. They are also designed for body text or headings specifically . Google Fonts has 5 categories: Sans Serif, Serif, display, monospce and handwriting .

We compared print and online  typefaces and how sceen typefaces have larger x-heights to improve how they render on screen and thus their readability.

We looked at choosing the appropriate typefaces for different situations and typeface combinations; how many to use and how to marry them up.

We then looked at how to use CSS can help or enhance typography on a website and the diffent selectors and pseudo selectors that can be used.

We discussed the different units that can be used icluding px and % and typographic units such as em and REM.

At the end of the class we completed a timed CSS type task where we took a section from Mike Chimero’s Designers Code of Ethics and put it into an html file and styled with CSS, thinking specifically about typogrphy. Here is what I produced:

image of the timed task completed in CSS


What I learned – Week Four

This week it was time to move onto CSS – The Presentation Layer!

We talked about what CSS is: Cascading Style Sheets – separating content from presentation.We also talked about why it is so useful and how it works.

We learned about style rules, declarations and selectors and how you can have multiple declarations and group selectors. We discussed how you can use class selectors to style elements and how you can ue pseudo-class rules.

We learned how you can add your css to your html and how the best way is to link an external stylesheet.

We went on to learn about the span and div tags and how to structure the page with div.

Next we went on to disucss the CSS Box Model and how this is made up of different parts: padding, border and margin. And also the other option of the box-sizing option that can be used in CSS3.

We learnt about colours in CSS and how these can be specified in different ways: RGB, Hex, RGBA & HSL. Then we discussed fonts in CSS including font families and font stacks.

We also talked about inheritannce and how some properties are inherited by child elements from their parent and others are not.

We were also taught that there is a way to remove the default browser settings called a CSS reset which is useful as it is better to not mix your own settings with the browser settings as visual results could vary between browsers.




What I learned – Week Three

This week we learned more detail about html. We discussed the history of html and the journey it has been on to get to where it is today. We talked about its purpose which is to add structure to documents and meaning to content.

We  learned more about elements attributes and values and the right way to use them in practice. We then talked about stucture and reationships in html and the different sort of elements such as block elements, inline elements and parent, child and sibling elements.

We discussed correct use of semantic markup and how it shouldnt be used to change the presentation of the document, only the meaning!

We then went onto discuss how to make links including external links, links within the website and image links and talked about the different between absolute and relative links.

We discussed common structural elements such as headings, lists and tables then we went into how to actually write the html, looking at indentation, syntax and comments.

Lastly we went over folder organisation and website structure.



What I learned – Week Two

This week we learned more bout the histroy of the the web and internet and the difference between the two; the internet is the infrastructure and the web is the protocol.

We discussed how the ‘world wide’ web isn’t actually world wide and how a ‘content out’ approach makes it more accessible for everyone who isn’t viewing the content on a modern device.

We then dicussed design generally, looking at different objects including a ‘laundry liquid delivery vessel’. We looked at different elements of design and discussed the thought process behind it.

Next up we looked at some design principles such as Hicks Law and the Expectation Effect.

We then were informed of some thought leaders in the industry such as Jeffrey Zeldman, Eric Meyer, Rachel Andrews, Lea Verou, Anna Debenham, Jeremy Keith and Dave Shea amongst many others!

Examples of Good Websites


Netflix is a paid streaming service that shows a wide variety of TV shows, movies, documentaries, and more.

Why is it a good website?

  • Clear and easy to navigate from log in to clicking play  on chosen show
  • Categorised in a great way – eg. continue watching, popular on netflix, ‘because you watched ___’, comedies, top picks for you, crime investigations, etc
  • Wide variety of things to watch attracting a vast audience
  • No advertisements because its a paid service which makes it efficient and smooth running to use
  • Everything is very immediate unlike some streaming serivces – you press play and it plays and doesnt stop to buffer etc which is frustrating when trying to watch something
  • It is personalised to the user as metioned in the categorised point. It pays attention to what you watch and makes suggestions based on this so it feels very intuitive to the user
  • It has lots of original content with its original series and films which you can’t find anywhere else
  • The interface itself displays the tv shows and movies etc in a great way visually and when you hover your mouse over each one it starts showing the trailer or a clip
  • It is simple and easy to use for anyone and everyone

Topshop Careers Website

topshop careers siteThe Topshop Careers site is where someone go to apply for any jobs at topshop or topman but the site does so much more than that, giving the user a real insight into the company culture and providing inspiration.

Why is it a good website?

  • Knows it’s audience and provides visuals that are inspirational and exciting to that target audience
  • Takes the user on a journey through their history, how they have become a fashion authority, through to the culture in their stores and offices and what it will be like to work their – leading you nicely to their positions and how you can apply today
  • It is a great example of a user journey delivering exactly what it wants to the user and also delivering what the business needs from the website – attracting the best talent
  • They have an apply now button and a job search button in the top right corner of the screen at all times – never forgetting what the site is there for and catching any user mid reading about how fabulous the company is and ready to find their ‘dream job’
  • Other routes encouraging people to apply – they have a breakdown of each head office department – what it is like to work there and what the roles are like then on he same page it has the live roles so you can apply then and there
  • To sum up it is an incredibly intuitive and inspirirational careers site which is rarely ahcieved by other retailers in my opinion. The site is beautifully pieced together and really captures who the brand is visually


samsung website




















The Samsung UK website is there online store where they can showcase and ultimately sell all of their products.

Why is it a good website?

  • The layout is clear with a menu along the top outlining which products they sell so it is easy to get to the category that you are looking for
  • The home page is laid out nicely, showcasing latest and best selling products in a way that isn’t too busy and draws the eye in
  • In the top right hand corner you have a support button which is key when you are any retailer but especially electronics.Also at the bottom of the page they have direct links to all different support methods such as live online chat and phone support
  • They have also placed search function which can help shoppers navigate their site even more  getting them straight to what they are looking for.
  • Lots of artsy product photography to inspire the customer throughout the site
  • Bar along the top of product you are reviewing with benefits, spec, support, compare and add to basket – everything you need to know to shop
  • Lots of links to ‘explore’ as well with inspiring images for the customer which will lead to finding products they wouldn’t necessarily have found otherwise
  • More of an online shopping ‘experience’ rather than a quick stop and buy


Examples of Good Design

Foldable Shopping Bag

Imge of foldable shopping bag

The foldable shopping bag is quite self explanatory but essentially it is a bag that you can use to carry your shopping or any other items that can be folded neatly into itself and tucked in your pocket and carried where ever you go.

Why is it an example of good design? 

  • Folds up into a very small pocket sized shape so easy to carry around everywhere
  • Lighweight so not heavy to carry around in your bag or pocket when folded away and not being used
  • Made of a durable material so able to carry heavy shopping
  • When unfolded it is large enough to carry quite a large amount of objects making it incredibly useful in lots of scenarios, not just shopping. If you decide to take off your jumper or jacket for example you can put it in the bag rather carry it around in your hands
  • Good for the environment and reducing the use of one use plastic bags
  • Comes in lots of different designs to suit any aesthetic tastes and makes it ideal for every customer
  • Has a long enough strap to sit over your shoulder comfortably making it easy to carry

Mini Perfume Atomizer

A perfume atomizer is a handy device that allows you to put perfume that you have bought in large bottles into a smaller bottle that you can carry around with you.

Why is it in example of good design?

  • Lightweight and small to fit in your pocket or handbag easily
  • Easy to dismantle and refill and to transfer the liquid from your largeImage of a perfume atomizer perfume bottle without losing and wasting any
  • Holds quite a lot of liquid for such a small object meaning you don’t have to refill it to often
  • Can get many different designs so suitable for men and women and different aesthetic tastes
  • Can put any different fragrances in it so can change if you buy a new fragrance for instance – no need to buy a new one
  • Mad from durable aluminium so don’t need to worry about it breaking in your bag or pocket
  • Transpearent panel allows you to see how much liquid you have left in the bottle
  • Easy to apply spray head
  • Size is small enough to carry on a plane so can literally take it anywhere

Collapsible Coffee Mug

A collapsible coffee mug is a portable cup that you can ‘collapse’ or fold  down to a smaller, more portable size when you have finished with it.

Why is it an example of good design?

  • image of collapsible coffee mugEasily folds down when finished to fit easily into your bag or pocket
  • Comes in a multitude of colours to suit any gender or aesthetic taste
  • Has a hard white plastic belt to keep it solid when filled with liquid
  • Can hold any hot or cold beverage
  • Has a a rubber stopper at the top to stop liquid coming out while not drinking it
  • And the rubber stopper is easily rotated around so when you are drinking it doesn’t get in the way
  • Easily rinsed out and cleaned on the go
  • Made from a durable material to last a long time and a material that won’t be esily broken while being carried around
  • Reduces single use plastic cups and waste