Prepared and presented to the PriorityOne team on Tuesday 2nd June 2020 via remote access.
How to make Vietnamese spring rolls
A family recipe handed down from my Mum who was born and lived in Hanoi, Vietnam. It’s a lot of preparation, but I promise, once you try these, no other spring rolls will come close.
Carrot and Apple Muffins with Cream Cheese Frosting
This is a super easy recipe for moist and fluffy muffins. Takes around 10 minutes to prepare and 20-25 mins to bake.
Ingredients
175g brown muscovado sugar
100g wholemeal self-raising flour*
100g self-raising flour
1 tsp bicarbonate of soda
1 tsp mixed spice
1 tsp of cinnamon
zest 1 orange
2 eggs
150ml sunflower oil
3 medium sized carrots, grated
1 medium sized apple, grated with skin
*You can use a total of 200g of self-raising flour
Icing
I use the fool-proof recipe from The Pink Whisk, Perfect Cream Cheese Frosting.
Method
1. Heat oven to 180C/160C fan/gas 4.
2. Line a 12-hole muffin tin with cases.
3. In a large mixing bowl, mix the dry ingredients sugar, flours, bicarbonate of soda, mixed spice, cinnamon and orange zest.
4. Whisk together the eggs and oil, then stir into the dry ingredients with the grated carrot and apple.
5. Divide the mixture between cases, I use an ice-cream scoop or measuring cup to ensure consistent levelled muffins.
6. Bake for 20-22 mins until a skewer poked in comes out clean. Cool on a wire rack before icing.
7. Scoff!
Brief guide to CMYK and RGB colour profiles
When designing for online or print, you need to be aware of the correct colour profiles. Basically RGB refers to digital work and CMYK refers to print work.
RGB (or additive color space) stands for Red, Green and Blue. They are the colours used by monitors to recreate all the colours you see when viewing anything digitally. You cannot rely on what you see on your RGB as each person’s monitor is calibrated differently. So a bright blue/green on your monitor, may look more blue/grey on another person’s monitor.
CMYK (or process/4 colour/full colour) stands for Cyan, Magenta, Yellow and Black (honest, even though it’s K). These represent the colours that are used in a modern day digital printing press.
The printing process uses a mix of these four colours to create all the other colours in the spectrum. CMYK is made up of lots of little dots to fool the eye into thinking it’s another colour.
Example from www.unisa.edu.au
When designing a logo you must design with CMYK in mind and not use RGB, unless you never intend to see your logo in print. I use my trusted Pantone Colour Bridge book which shows me swatches of colours and what they look like in Spot (single block colour) and CMYK version. This helps me ensure that what the client sees in proof will be as close as possible to the finished printed product.
Unless the client can afford to pay for Spot colour printing, I tend to avoid vivid colours (lime greens, neons etc.) on the spectrum. Generally a vibrant colour that you view on your RBG display will not be the same in CMYK print. This is purely down to the fact that CMYK just cannot recreate vivid colours RGB can so it would be wrong to rely the RGB colour space when designing any branding or colour critical print work.
As part of my logo/branding package I also provide clients with a style guide which displays the colours of the chosen colour palette along with all the values for each colour in their Pantone, CMYK, HTML and RGB references. This handy resource will assist in keeping the colours and brand consistent when working on any future online or print material projects.
It can be a minefield, but with the help of a good designer, it should be a completely pain free process. I hope that this article helps explain why a good designer is worth their weight in chocolate buttons.
This is only a very short summary of RGB and CMYK, if you want to know more, you can read up on it on wikipedia.
Why you should have a vector version of your logo
What is a vector file and why do I keep harping on about it?
When I ask clients for a vector file of their logo, I am often presented with a ‘huh?’, especially if the logo was produced years ago by a friend of a friend or using software such as Photoshop. Understandable as it’s not something you would need to know unless you work with graphics on a daily basis.
So what is a Vector graphic and why should your logo be in this format? Unlike raster graphics such as JPEGs or GIFs, which use pixels (little dots) to define areas of image information, vector files use a series of paths to define the image. This means that vector graphics provide complete flexibility for manipulation of the image file.
The major benefit of having a vector file means that it can be scaled and resized and will remain smooth at the edges. When you resize raster graphics (JPEGs and GIFs) they can appear more pixilated when sized up or down. I’m sure you have tried doing it with your image editing software. When you make a logo bigger or smaller, the whole images becomes slightly blurred and you lose the sharp edges. The example above shows the clear differences between vector and raster.
Vector images can be used in artwork to make images small enough for use on business cards and made big enough for vinyl banners and large scale posters without losing any of the image quality.
With a vector file, you can output the artwork into any file format (JPEG, GIF, PNG etc.), any colour profile (CMYK, RGB) and any size (pixels or DPI) without compromising on quality. Consider a vector file as a ‘master’ from which all other image types can be created.
When producing print material, it is vital that vector logos are used to ensure a polished professional look. There is nothing worse than a blurred looking washed-out logo on printed or online marketing material.
When you commission any logo, branding or non-photographic work make sure you ask for the vector file version. Needless to say, when you commission a logo from me, I provide you with a vector of your logo as well as the JPEG, GIF and PNG formats for use in print and online. This means that you are completely covered in terms of the formats for any eventuality.
I also provide a ‘re-drawing logo service’ which basically means I will recreate your logo as a vector file for people who don’t currently have a high enough quality version of their logo.
Vector files can be opened using using software such as Illustrator and CorelDraw. A universal method of saving vector images is by using the .EPS (encapsulated postscript) format, which can be opened and edited using any vector-rendering software.
I hope the above sheds some light on why it’s important to have the right file format for the right job.
My next post will cover the differences between print and online colour profiles and what the differences are between CMYK and RGB and its different uses. I’ll also try and cover the infamous DPI and pixel subject.
Top 10 tips for successful website design
If I had to give anyone some tips on how to go about designing their website, I would say to keep it simple. There is no harm in looking at other websites that you like and enjoy for inspiration, but if it’s your first website, then don’t worry too much about getting it perfect. Your website should evolve in line with your business so don’t go over thinking it or over designing it.
Here are my top ten common sense tips:
1. Keep it consistent. There is nothing worse than having the content and layout jump around the screen to put people off.
2. Make sure any images or pictures you use are of the same dimensions throughout.
3. Don’t use more than 3 styles of fonts and then only sparingly.
4. Never use primary red and blue coloured fonts (it may have worked in the early 1990s but not now)
5. Don’t overload the screen with information. White space is good, gives the eyes a rest and the chance for your content to shine through.
6. Keep all headings, titles and body text consistent (that ‘c’ word again).
7. Stay away from ‘comic sans’ font it’s not nice or funny.
8. Make sure that your navigation is simple and clear for the user to understand.
9. Don’t have a ‘splash’ page on a HTML site, it is just pointless. They were designed for Flash sites back in the early days when people were on dial-up and had wait for the page to load.
10. Keep it consistent (see a theme here?).
I hope the above helps you on your exciting foray into web design. If you are still stuck, then you can contact someone like me and I’ll do it for you for a modest fee + chocolate buttons.
Differences between graphic and web design
Design is design right? Well yes, but there is difference between the two.
If I was made to choose, I would have to say that I would fall more into the web designer side of the fence. You have to have graphic design knowledge to be a web designer, but not necessarily the other way round. Even though I studied fine arts, I started my design career working on websites and interactive interfaces.
So what are the differences and are they important? The simplified version would be that a graphic designer deals in physical printed media, while a web designer deals more with user-ability and how a site flows and works in terms of user interaction. It is very important to understand the differences when deciding on what type of designer you need for your project.
I find myself torn between the two disciplines at times, I love working on branding and logos as it’s normally for new businesses and individuals. I really enjoy being able to help clients define and develop their brand and identity. I suppose it’s like planting a seed and watching it grow, but without all the dirt and soil stuff. Equally, I also love working on designing websites especially when it comes to designing layouts for portals and working out how to display information that is creative yet effective. It’s akin to solving a puzzle that has more than one answer. Makes me use the logical side of my brain, which is always good.
When working on projects for printed media there are many things to bear in mind, not least of all how the design will work when it’s printed, the medium it will be printed on, the inks and colours used. There are so many things to take into consideration that if you don’t factor them in at the start, it could turn into a costly exercise for the client. That’s why it’s critical to always get a clear brief from the client, and then the job of a good designer is to guide the client while still meeting the objective of the overall brief.
Web design has even more things to consider. Leaving aside the aesthetics look and feel side of things, there are technical things to bear in mind, like, is the code as slick and ‘clean’ as it can be? Does it validate on W3C and behave the same on all browsers? (evil IE6 notwithstanding) and does the site flow logically or at least guide the user on the path you want them to take? How can you optimise the site so that the search engine robots can index your site?
I once worked alongside a project that was described as an online magazine. The clients asked a graphic design agency to design the website concept. The finished design was great, really elegant and classy and did not work as a web page whatsoever. The designers had designed a beautiful printed image, but had no idea of how the website would work or how the different elements like navigation would be incorporated. In the end I think it cost more time and money trying to (stubbornly) plug the design into a working website than it would have cost the client to get a website designer to design three versions of it.
I think graphic and website design require very different mindsets and skillsets.
If you are interested in my further ramblings, I have blogged some tips on web design DIY style previously which you may find of some interest.
Next post will be, the differences between web design and web development – will I have enough screen space for that?
For now here are some statistics regarding browsers which you might find interesting:
This report was generated 12/31/2009 based on the last 15,000 page views to each website tracked by W3Counter. W3Counter’s sample currently includes 32,094 websites. The browser market share graph includes data from all versions of the named browser families, not only the top 10 as listed below.
Typography, design and best practices
I am a big fan of Smashing Magazine, an online design resource for graphic and web designers. They always have interesting articles that help in all aspects of design. They also have lots of freebies like fonts and tutorials.
Recently released is an article called Typographic Design Patterns and Best Practices which I found of particular interest. The team did a survey of the top 20 websites to compare things like font styles. font sizes, background colours.
What I found of most interest is that the most popular size for fonts was at 13px and the most popular font-style for body font was Georgia. A long way from when the standard web font was Verdana 10px.
A really interesting article with plenty to think about.
Web safe colours
When I started web design many years ago, the idea of using web-safe colours was still considered the standard. Back then many computers supported max 256 different colors, so it was important for the designer to use colours from a list of 216 “Web Safe Colors” to ensure that the end user could see the colour as it was intended.
Nowadays with the leap in technology, it is pretty much a redundant process. People’s monitors can handle displaying millions of colours. Many hardcore designers still stick by the “web safe” rule and it is still taught in many of the manuals and online tutorials.
I don’t stick by the “web safe” palette as a rule, but I still love seeing them in all their glory. The best place I have found for the web colour wheel is at Visibone a colour resource for designers.
Isn’t it pretty? They sell these colour charts as posters, books and even mousemats.
When designing a site I always start with the logo colour and then add to the palette using complimentary colours. I then select 2-3 accent colours, usually these would be in complete contrast to the main colours. For example: dark blue against lime, orange against cyan. Pretty much the opposites on the colour wheel works. Be careful though, as there is a fine line between contrasting colours and just pure garish!
When working on branding and logos where the use of colour is paramount, I refer to my trusty Pantone swatch book. It’s hideously expensive, but I think it’s a crucial tool for working with printed media.
My daughter loves playing with the swatch book, so I am going to make one for her out of the colour charts from the DIY stores.
Critiquing web site designs
I am often asked to critique web site designs DIY-style. Sometimes the only thing I can say that is positive about a design is that I like the use of a particular colour. I always try to be fair but honest.
I really think that there should be no excuses for having an ugly looking website, when you can easily buy a template for around $50 (although I clearly don’t advocate this method!).
Obviously there are create your own site using a ‘template based’ website and services, where you pay a monthly fee, but I have yet to see a nice looking website from this sort of service. It is sometimes a case of giving people false confidence.
I really admire people who really want to give it a go and I aways encourage it when I can. However, I am a firm believer in “know your strengths and weaknesses”. For example, I will leave the accountant to deal with my accounts and hope that he leaves the designing to the designers.
If I could offer any advice, it would be the following:
1. Keep it consistent. There is nothing worse than having the content and layout jump around the screen to put people off.
2. Make sure any images or pictures you use are of the same dimensions throughout.
3. Don’t use more than 3 styles of fonts and then only sparingly.
4. Never use red and blue coloured fonts (it may have worked in the early 1990s but not now)
5. Don’t overload the screen with information. White space is good, gives the eyes a rest and the chance for your content to shine through.
6. Keep all headings, titles and body text consistent (that ‘c’ word again).
7. Stay away from ‘comic sans’ font it’s not nice or funny.
8. Make sure that your navigation is simple and clear for the user to understand.
9. Don’t have a ‘splash’ page on a HTML site, it is just pointless. They were designed for Flash sites back in the early days when people were on dial-up and had wait for the page to load.
10. Keep it consistent (see a theme here?).
If all else fails there are more than enough good websites out there to take inspiration from, and then if that doesn’t work, you can contact someone like me and I’ll do it for you for a modest fee + chocolate buttons.