Years ago, the epically progressive world of design began taking steps in a new direction and began gracing the World Wide Web with its talents. Gradually it brought us visually styled webpages far superior to the default Times New Roman black on white look, leaving the feeling of oil on canvas a distant memory.
Even though that was years ago, some avid surfers still struggle with web standard acronyms and need help understanding of the mechanics beyond the pixels. So in the third part of our series, we explore and define the terminology surrounding website design and build:
A landing page is, yes you got it, a page designed to land traffic on. Usually crafted for a specific channel like PPC or email, they are often created to encourage a specific reaction from the user after they have landed on the page, like calling a number or filling out a form.
Call to action. This is commonly a button i.e ‘Click Here’. Generally, it is the first action you want a user to make when viewing your website. Often, the design will be orientated around this main focus point in order to funnel the users focus, thus bringing about an action – the much wanted click.
Comparing two or more versions of the same webpage (with slight differences). It is done in a competitive manner in order to see which design converts the most traffic. E.g. Changing the headline of the page, altering the colour of a CTA from red to green, or even changing the CTA copy from ‘Buy Now’ to ‘Add to Basket’.
These colour models can be used on your computer screen and for print work.
Red Green Blue is for colours displayed on a computer device using an additive colour model.
Cyan Magenta Yellow Black are the four colour inks that make up the printing process for common and industrial printers. When producing a design for print, you would set up your document for CMYK. Print can’t always reproduce colours in the RGB spectrum.
Hexadecimal colour codes are basically HTML colours. They are the notations for the combination of Red, Green and Blue (RGB) values.
Image file types:
Find out the difference between a JPG, PNG, GIF and SVG image format and when to use them.
Joint Photographic Experts Group image format is the most commonly used method of lossy compression. Often used for photographs, made up of hundreds of colours.
Portable Network Graphics is a raster graphics file format that supports lossless data compression. This is a great file type for graphics that need transparent backgrounds. Helpful Tip: When posting graphic images to Facebook use PNG as it appears much clearer than JPG.
Graphics Interchange Format is a bitmap image format that uses a lossless data compression technique. If you want a small image for your website with only a few colours in it, then the GIF format is perfect.
Scalable Vector Graphics are a vector image format best for images that you want to make scalable on your website. This is great for responsive websites, so you can scale an image to the size of the browser, on your mobile, tablet or desktop computer.
Building a website? Here is some need-to-know coding languages and techniques to do just that:
Cascading Style Sheets are used to style HTML elements. Font-size, width, height, background-colour are just some of the fabulous attributes you can assign. CSS can lay in the HTML or be called from an ‘External Style Sheet’.
Hypertext Markup Language is not a coding language, it is purely mark-up for your webpage.
The ability of a website to respond to the resolution of the device it is displayed on, most commonly desktop, tablet or mobile.
Web Safe Fonts
Fonts that are already installed on most computers i.e Arial, Times New Roman, Georgia. These are web safe in the sense that they are very likely to be displayed by the target user rather than defaulting to another font. New options to embed fonts have become popular but are not always supported in all browsers.