I really love the colour scheme of this brand and website because it is bold and eye catching with high contrast, and matches the fun yet traditional and eloquent style they are creating with their products. The orange draws out the colours of the photographs which have high contrast and saturation, making viewers want to try the food even more.
The use of the orange shade is bold but also brings energy and warmth to the website, making it appear very fun and welcoming whilst still holding onto the professional aspect. Currently the website is making good use of the Halloween styled colours within their theme.
The colour scheme on this website is simple and has a calming effect as the colours are very muted and soft. The colours are burgundy, white and a cream/beige. I think these work well together because they don’t create a massive amount of contrast so is easy on the eye to look at.
They are trying to emulate the different shades you would get in their products to entice you into trying their food. The website is simple and inviting because of the fact that it doesn’t appear very serious. They are using the photos and the typography to grab your attention. I think the burgundy colour works especially well when contrasted with the white background at the footer of the page.
This colour scheme works so well because they are muted versions that are very pastelly and cartoon-ish when mixed with Amanada’s design style. The colours almost remind me of sweets and I love the really clean and simple effect it has.
The main background colour is an off-black/charcoal grey which works beautifully with the white and purple text. It makes it stand out but in a softer, subtler way that is more approachable, the purple text has been used for the most important word, in this instance ‘portfolio’ which emphasises it and creates a bit of personality. The main colours are purple, off-black/charcoal, white and a couple of subtle shades of blue.
A range of different colours can have a variety of different meanings and interesting historical reasons. For example, whilst it is quite commonly known that purple is a colour used a lot by royals, I didn’t know that this was because back in the day purple was the most expensive colour to dye, and so the royal family used it a lot to show their wealth. Red can also be percieved as hatred, anger or a warning, as well as love.
Colour Combinations
Depending on the background colour, it can either illuminate the foreground or make it blend into the background and disappear.
Certain combinations are bad for colour blindless aspects such as red and blue. High brightness and saturation also hurts the eyes to look at.
For logo design it is best practice to start in black and white so that you can work with shape and from first, and then you can match colours to the density of the shade later on.
Monochromatic is the combination of tones and shades within the same colour/hue.
Analogues – The combination of adjacent colours
Complementary – The combination of two colours from opposite sides
Triadic – The combination of three colours evenly spaced around the colour wheel
Compound – Combination of colours that are often in two groups.
Methods To Choose Colour Scheme
Brand Based – We need to reserve an accent colour for buttons
Rooted in Content
Looking Sideways – Put together a moodboard of items such as tea leaves, tea cup, tea pots etc and draw colour schemes from that
Typography with CSS
The width should be 80% of the parent element. You need to include a max-width to stop the content from stretching too far on a larger screen. Similarly the min-width is needed so that text doesn’t become too narrow on a smaller screen size.
Margin: 0 auto; centres the elements within the parent element with equal margin on either side. This means 0 top and bottom, auto left and right.
<div id=…> allows you to have a shape underneath your content to act as a visual container and can make the background more interesting.
960px is the comfortable measurable width for screen that is the most commonly used. Screen width is always measured in pixels.
It is good practice to use off-black and off-white so that the contrast isn’t as high and is easier to read, making your website more accessible.
Use margin-top or margin-bottom for typographic design. One or the other should be used, but never both as ideally you don’t want two margins coming together.
Images and Colour with CSS
JPEG – Joint photographic experts group. They are true colour, 24 bit, have variable compression and used for photographs
GIF – A gif has 256 colours, 8 bit, and used for frame animation or simple graphics
PNG-8 – Has 256 colours, 8 bit, smaller than equivalent GIF, good for logos and used for simple graphics
PNG-24 – True colour, 24 bit, alpha transparency – no other file format has this and is used for complex graphics
WebP – Developed by google. One file format for the web
Colour dithering – mosaic/pixelated effect on photos when not using the true colour formats
Make sure image is under 100KB for use on web
Vector file formats – SVG (scalable vector graphics) are flexible to edit, you can edit the colour in html file.
Brilliant Agency is a branding and marketing company for food and drink brands, based in Leeds and London. I think the typography works on their website really well, firstly because the colour palate is not only consistent and bold, but bright and fun too. This is a simple but effective design that creates an inviting and friendly atmosphere.
The body of text uses a dark green shade which contrasts well with the white background and smaller pink titles, making it easy to see clearly. The headings are large making it accessible for users with bad eyesight as they wouldn’t need to zoom in to see what each page is about.
Bleed is a studio based in Oslo and Vienna that works with their clients in a way that questions the norm and definition of design.
“We continue to blur design, art and technology to create compelling products and services.”
I think they have great typography on their site that is simple but most of all accessible. Black text on a white background makes for high contrast but also easy to read, especially with the use of sans-serif font. Both the headings and body of text are using a large size as well as a nicely sized line height, allowing the surrounding white space to make it clearer to view.
As well as these points, it is also left aligned making it easy for your eyes to follow along without causing extra mental effort or losing your place. I love the use of white space throughout the entire sight as this further helps to draw your attention towards the typography style.
I really like Southeastern’s typography because, as with the other websites, it is accessible via having dark coloured text on a white background. Whilst the headlines are in a serif font, the body of text is in sans-serif with plenty of line height space to make it clearer to read. The colour scheme of the logo and headlines/bodies of text is consistent with the brand theme – blue, navy, white.What made me think of their site in the first place was because I was handed a flyer at my local station about the timetable changes on December 11th. I love this typography design and thought it was really clever how they merged the letter L’s in the word ‘all’ with the date of 11th. I imagine this was created in such a way not only because it makes it more playful, but it makes the date stick in your mind as it’s a good, memorable design. ‘All change’ also has a nice play on words, like when the train announcement says ‘change here for…’, this is telling you that there will be a big timetable change so don’t forget.
Advised to avoid using id and class in CSS if possible.
To keep code simpler and cleaner, you don’t need to use a class for each link to design the buttons.
This week I struggled with my designing of links in CSS as I had one section for the navigation, and a separate section for my module links on a specific page. I didn’t want these to be edited in the same way as my ‘buttons’ as I just wanted them to be simple, recognisable links. I finally found a fix in which I had to declare in my CSS that if a link has a div parent, and that has a ul child, which has a li child, then that particular link (anchor tag) will be designed in this way (nav>ul>li>a). My module hyperlinks were left as a { } and so that rule didn’t apply to them.
On Web Typography
No more than 2 typefaces should be used
Good typography reinforces the meaning of the text and what you’re trying to express
You must remember that what you’re making is for the benefit of the reader, not writer, therefore you need to ensure it is as accessible as you can make it
For quotes you should change the weight and colour etc.
Serif font was inherited from print as it is used to guide the eye along line of text such as on a newspaper when the text size is small. This makes it easier to read.
The Times New Roman/Times font names originated from the Times newspaper.
Serif is used for headings and sans serif is used for the body to make a contrast and clarity of what they are and what they mean
The rule to remember for text alignment is that you want a flush left and ragged right.
Hyphen, En Dash & Em Dash
The hyphen is used for compound terms such as ‘check-in’. Whereas the en dash is used to represent a range or connection such as dates and places, 2022-2023. And finally the em dash can replace commas, paranthesis or colons to mark off additional information that isn’t essential to understand the sentence — this is the longest of the three.
Useful References
The Visual Dictionary of Typography – Gavin Ambrose & Paul Harris
Your website idea can include a specific target audience, such as children, but when implementing the design you need to make sure its accessible to everyone regardless of the target audience. There may be others who would enjoy using it too so don’t exclude them.
“Web design is 95% typography” – Oliver Reichenstein
Looks at what type can express
Serifs originated from print
The differences between screen and paper is that there is no glare on paper so you can easily adjust position or angle, whereas on the web you can’t and so this makes serif more difficult to read online.
Preferences: Some people prefer dark mode, some people prefer light mode. You need to ensure you are designing with this in mind.
The 5 font families are: serif, sans serif, monospace, cursive, and fantasy. Monospace has the same amount of space between each letter and in pop culture it is used as a way of rebelling.
You must always declare the font before the font family and ensure the fallback font is similar so that it doesn’t ruin your design/layout.
By default, browser settings are set to 16pt
You should declare at least 5 properties in the body section of the stylesheet: background colour, font colour, font family, margin, and padding. Links should be declared after the body.
Advised not to use Lorem Ipsum as it is distracting and takes away from the design and layout
White text on black backgrounds should always be scaled up and increase the line height as this is more difficult to read than black text on a white background.
Headings should always have more top space than bottom space. This allows the reader to breathe and digest what they’ve just read before starting a new section.
You shouldn’t underline or change the colour of something in the main text body that isn’t a link as these are the well known appearance of links, therefore it will be assumed.
You can adjust text size for different screen sizes depending on the distance away from the eyes. For example a desktop pc might want a larger text as opposed to an iPad that would use a smaller text as it is held closer to the eyes. Whilst both are using different font sizes, they are perceived as the same because of the distance.
Design Principles
Balance
Gradation and contrast
Repetition and rhythm
Left aligned text is best practice as it creates an easy flow of reading as opposed to centre aligned text which has different distances required for eye movement. To check legibility, it is a good idea to read text out loud – this will highlight how well it flows or bring your attention to any issues. The designer’s job is to create a reading experience that is a joy, not a chore. Menu links should be written as the words, lowercase, as this is much easier to read due to our brains being able to recognise the shapes of letters, as opposed to uppercase which would just look like blocks and also doesn’t create a nice calm atmosphere as it is shouting at you.
White Space
Never set the line height to 1 as it is proportional. It should be at least 1.3 and the default is 1.5
Gestalt Theory – This is the whitespace within and around shapes that can influence how the audience might perceive our layouts.
Proximity – Grouping elements together will imply a relationship between them so layout needs to be well thought through
Justify-text means text uses both left and right alignment to create neat edges on both sides. However this isn’t good practice to use as it makes text look like a block and difficult to read. This also creates uneven word spacing that makes ‘white rivers’ appear and draw your focus. This is especially difficult for dyslexic people as it can have the appearance of motion.
You should try to use as few fonts as possible but as many variants as you like.
Teaching – Attend lectures, provides framework for further study
Study – Read recommended texts, watch videos, experiment with relevant software
Reflect – Make notes based on studies. “What I learned today blog posts”
Practice – Complete project tasks on HTML/CSS etc.
Feedback – Get feedback in next session, make changes accordingly
This is very self-explanatory and steps that I have already been undertaking, however not always in the same order as this model. For example if there’s something I already know how to do in HTML/CSS I’ve had the bad habit of going straight to the practice work, then studying, and then reflecting on what I’ve learned and expanding on the notes made in class.
I will now follow this structure in order as even if I think I already know something, I could have easily missed something important or misunderstood a section. Also going over what has been discussed in class allows me to retain the information more and form a better understanding, or if we ran out of time and only skimmed over a section then I can find out more detail about it.
HTML Feedback
Elements such as <br> and <hr> shouldn’t be used for presentational purposes as you can do this later in CSS. It is rare that they are used at all so not necessary.
First and foremost, don’t use code that you don’t understand. If you see something in somebody else’s code and take inspiration from it, take the time to understand why and how it does what it does first before using.
“Don’t just make things work, make things right” – You could cheat or be lazy and use techniques that work and won’t throw up any errors, however this would be semantically incorrect and in a lot of instances would make life harder for users relying on screen readers.
If you skip the h1 element and instead start at h2, not only is this semantically incorrect but it also means that your webpage won’t show up as easily in search engines as SEO uses h1 to decipher what your site is about.
Height/width attributes in image elements are optional butt should be used by default, they should also be used together or not at all. Not including these attributes makes images load slower on your page because the browser doesn’t know how much space to reserve, causing the page to jump about once loaded which is very annoying for UX.
The purpose of HTML is to provide structure and meaning – don’t include code if you don’t need it, this just creates a larger file size that the user must download.
What Is CSS?
You can make CSS work within a HTML file, as is what had to be done back in the day before it originated in 1994, 5 years after HTML. However for good practice it should always be kept as a separate file. This makes it much easier to work with when you have to go back and tweak something, it makes your code easier to read and more organised. The first version, CSS1, was recommended in 1996 by W3C.
CSS allows us to progressively enhance the content and user experience as we add this layer, making it much more visually appealing and smoother to navigate. There is greater control over formatting and allows for easier site maintenance – You can place the background colour in the body section at the top so that if you need to go back and tweak it, its not only easy to find but means you’re only changing 1 line of code as apposed to if you did it separately for multiple pages.
For accessibility you can create a dark or light toggle mode to give the user choice and a clearer view of the text depending on what works best for their eyesight.
Whilst I have some previous experience with CSS, I had no idea about the need to reset the browser default styling so that you can start designing from a clean slate. I found this really interesting and will be incorporating it into my styling from now on.
It is also best practice to acknowledge anyone who’s code you may have used or taken inspiration from, much like with crediting an artist instead of just reposting their work and saying nothing. Not doing this is disrespectful as you’re not the person who’s put all that effort in. In your code you can do this by commenting out a simple ‘thank you to…’ or listing the author’s link. This means it will stay off your live website so as not to interfere with your theme, but when people view your source code they will see it.
Typography
Oliver Reichenstein wrote Web Design is 95% Typography.
Web safe fonts is what are already comes installed on your operating system and guaranteed to work on the web.
Typeface is a design, such as Trebuchet which includes several fonts such as bold, regular, italic. Font is a package in which the design lives.
Font family is a fall back in case the first, second, third font fail and so on. This is called a font stack. Serif is your system’s default font which all browsers will show as a last resort if the previous fonts fail. All operating systems have a version of this font and therefore it will work for everyone.
For type design you should use em instead of px – 1 em = 16px. If the parent font size changes, so will the em as it is proportional.
CSS Box Model
Padding – Creates space around content within element
Border – Decoration or separation
Margin – Control over top/bottom/left/right
The box model applies to every HTML element, block level and inline
The content depends where you use em or px
* = Selects everything inside HTML file. The box sizing rule makes sure box model stays fixed. * { box-sizing: border-box; }
Margin: 20px 20px 20px 20px; – Browser knows the clockwise order e.g. top, right, bottom, left.
Padding syntax: You can use shorthand notation if the properties for top/bottom and left/right are the same e.g. padding 10px 20px; (as the browser knows the order, it knows that both the top and bottom are 10px, and that the right and left are 20px.
Outline and border are very similar however there is a small distinction. An outline is drawn just outside of the border’s edge. It’s not part of the box model so doesn’t effect the position of the element or adjacent elements.
Colour:
How many colours do we have access to? 16 million. 256 variations of each colour. This is referred to as true colour because the human eye isn’t capable of distinguishing each one.
Adobe colour wheel app is a useful app to use because you can create colour pallettes, take references from images, and explore ideas from latest colour trends.
Shorthand hexadecimal colours can help to optimise your style sheets, especially when combined with shorthand properties and grouping.
RGB: Red, green, blue. First number measures intensity of red, second measures the green and third measures the red e.g. rgb (255, 50, 22). 0 measures absense of colour and 255 is highest. Absense of all colours is black, all three colours mixed at highest intensity creates white.
RGBA: Red, green, blue and alpha. Alpha specifies opacity for a colour, 0 is fully transparent and 1 is fully opaque.
HSL: Hue, saturation and light.
Hexadecimal – Numbers used on web pages to set colours.
Hexadeicmal has 16 digits: 0-9 and A-F. The hex system reduces space it takes to store certain information so is widely used e.g. RGB values reduced from three to two digits once converted.
Useful References
Learning Web Design by Jennifer Niederst Robbins
HTML, CSS & Javascript In Easy Steps by Mike McGrath
Javascript is fragile so we need to make sure when building web pages that if one of the technology fails, the structure will remain intact, and the site will ‘degrade gracefully’. For example, if Javascript fails then the website should still be functional and styled, it just no longer has certain behaviours. If CSS fails then the decoration will no longer be visible, but the site will still be usable and the content can still be accessed due to the HTML structure.
It is a good idea to provide height and width elements to an image in HTML as this will speed up the loading time of the web page.
Something else I learnt today was that including the reading direction, e.g. left to right, in your code can be very important as different countries will read things differently. An example of the coding for this is pictured below
I already knew about the commenting out function, I’ve used this a lot when I have an issue with my code but don’t know where the source of the problem is. This way, it is easy to figure out what is going wrong and where by commenting bits of code out section by section. Usually this happens with CSS. However, I hadn’t thought about using it to leave myself comments or for others who view my work. This would be especially helpful for something I hadn’t been working on for a while.
Some useful links that helped me to understand more about what was said in class:
Crunchyroll is a website that allows you to watch anime, read manga, play games and also has news on the latest updates in the industry e.g. if a new series is coming out. It is a free service but gives you the option of upgrading (Fan or Mega Fan) which cuts out on the adverts for you. I think this is a well designed website because it shows you the information needed in a creative way that also saves space. For example, hovering over an episode thumbnail gives a brief description of what happens. This is good for catching up when you’ve lost your place as it triggers your memory or just for enticing you to watch the next episode. It has a plain, simple colour scheme that contrasts well and also instantly recognisable if you know the brand.
There is a detailed list at the bottom of the page showing the popular shows, streaming platforms and devices the app is on, and the different website languages which I think is very important as there are fans from many different countries. It also allows you to try the new BETA version to get a feel of the new design and layout before going live. This shows that they want feedback from the fanbase to improve their services.
Full page search bar so its easier to read what you’re typing and allows you to search for something specific instead of looking through the A-Z list which would take longer. There is also the option to add shows to your watchlist and view your history so you can easily find series or finding what episode you were up to.
I like this website because it is inclusive of older customers by using big bold font making it much easier to read for anyone with difficulties seeing. Also uses large product imagery, for the same reason of making it easier to see but also allows the products to stand out. There are also not too many products listed which means the consumer is being shown the best of the best and doesn’t get overloaded with too much excess information.
The images used have great composition and have been implemented onto the website extremely well. When you go to a different page the large background image is blurred and slowly comes into focus. This is a great technique because it attracts the attention of the user and makes the products more desirable. It is like a surprise that it wants you to find out so that you can imagine what the make-up would look like on you. Overall I think it is a nice and simple effect that has been well executed.
Responsive website that centres position when size of browser is adjusted by being dragged. This means no information gets lost and unseen no matter what device you are using. Navigation bar theme that serves a good function – Transparent background when not hovered over so that the focus is on the huge banner, but once hovered over changes background colour to white and text to grey so that it becomes much clearer to read and navigate. This is cleverly designed to look attractive but serves function as soon as needed.
What I like most about the website is that there is a search bar, for me I think this is most useful for customers who know precisely what sort of food they want to eat and conveniently this enters into a full page search bar making the text clearer and drawing focus.
The website is very easy to navigate with all the crucial information – It has a list of all the stalls within the market, a few photos of each with a description in order to entice you and find out more in person. There is also a section for the market traders to apply via an online form which constantly encourages new talent and evolves the vibrant community. The form itself is very easy to follow with clear and concise instructions and is of course available to view on smaller devices with it being responsive.
Immediately on the home page there are social media links which is crucial for the audience of this kind of website because people want to see photos of what the food looks like, but also the reviews and happy customer stories. This is a great way of gaining more followers and word of mouth which independent businesses need. The full-page images are there to draw you in and make you want to go and visit. In the specific stalls page it has also been designed so that a main image is ‘sticky’, as in it stays in the same position and you can scroll past it to see different aspects of the image. Also as well as the social media, the opening times are on the front page which is a must.
Visually this cat tea infuser glass is designed well because it has the comical appearance that the cat has ate the fish and its now in its stomach, but interestingly the fish also has a practical use. The head clips off so that you can insert the tea leaves, and it has gaps big enough to allow the leaves to infuse in the water but not enough for them to escape to ensure you don’t swallow them. There is also a gap for the fish’s mouth so that once you remove the lid, you can pour any remaining liquid from the fish back into your drink.
The fish is attached to the inside of the lid which makes it easy to remove. The cat ears, whilst aesthetically pleasing and helping to identify the animal as a cat, also balances the lid at an angle once turned upside down so that no liquid is spilt onto your table. The pointedness of the ears also makes it easy to pick up. The lid also acts as a handy cover like with takeaway cups, making it less likely for spillages to occur. The tail is a good design because again, it helps to identify the animal as a cat, but mostly stops you from burning your hands on the glass.
I consider this item a great design because of all the above reasons and, if you’re a fellow cat lover like myself then it is a very novel and cute thing to have in your possession.
2. Ramune Bottle
Ramune is a well-loved Japanese carbonated soft drink. The drink comes with a green plastic opener that you must separate from its attachment. The opener then fits over the lip of the Ramune lid where the carbonated glass ball is. You then need to press firmly down with the palm of your hand (best on a surface) in order to pop the ball out. Whilst opening the bottle can sometimes be a bit tricky (especially in public), it is very satisfying once you hear the ‘pop’ and know you’ll be getting a nice refreshing drink as a reward.
The bottles are not only easy to grip due to the indentation on the neck and designated indentations to rest your thumb, but also this mainly serves the purpose of keeping the glass ball in place as the gap is too narrow for it to reach the bottom of the bottle. This means that the drink only becomes carbonated once it is tilted up to your mouth to drink, and so it will stay fizzy as opposed to a standard bottle that would lose its fizz throughout the course of the day. Once opened, although not a permanent lid you can use the green opener like a stopper as it slots nicely inside the hole, and ensures you don’t forget it is open.
The unique design not only serves functional purposes but benefits the company’s sales as they stand out from standard bottles and will stick in the consumer’s mind.
3. Water Bottle
This 500ml water bottle is the perfect size for carrying in your bag. The visual design is very simple which doesn’t detract from the functionality. It comes with a removable filter that is nicely slotted inside so that you have the option of infusing fruit or tea into the water. The silicone sealing plug on the inside prevents leaking. It has a simple mechanism to flip open the lid and this is also lockable to ensure that it doesn’t accidentally open and leak whilst it is in your bag.
As the bottle is slim enough it is very easy to pick up and fits perfectly in your hand, however it also has a carry handle if you wanted to hold it like that or attached it to something. On the back of the bottle, it has helpful time markers to remind you to stay hydrated throughout the day, along with a few motivational words. Once you reach the end it then tells you to refill so that you are meeting the required amount of water you should be drinking each day, around 1-2 litres.
I like this design because I think it’s the perfect size. You can get some very over the top 2litre bottles which are impossible to take outside with you due to the size and weight of the water. This 500ml bottle is much more transportable and is easy enough to just refill once you’ve finished.
