Web Design Lingo: A Beginner’s Guide
Working in the SEO department of a web design agency like Moore-Wilson can involve getting to grips with a number of terms that, as a newbie to web design and development, you might have never heard before. Here are five terms that particularly stand out.
Talking about the difference between white hat and black hat to someone outside the SEO department can often lead to blank looks. Claiming that a website has been ‘penguined’ or that it hasn’t been ‘crawled by spiders’ just makes you sound a bit odd. Every line of work has its own lingo and for me, working in the SEO department of a web design agency like Moore-Wilson has involved getting to grips with a number of terms that, as a newbie to web design and development, I’d never heard before. Here are five terms that particularly stand out.
Though the term ‘parallax scrolling’ sounds like something more commonly found in science fiction, it is actually a design concept that has been around for years. In basic terms, parallax scrolling is a technique that uses two or more layers of images to produce an illusion of depth and give 2d images a 3d effect. When scrolling, the background images move at a slower speed than the foreground images – producing an effect much like looking out of the window of a moving car or train where the objects closer to you move past much quicker than those in the distance. In web design parallax scrolling can be used for menus or backgrounds that change as you scroll. Fun fact: parallax scrolling was often used in Super Mario games.
This borderline unpronounceable term refers to a web design trend that was hugely popular a few years ago, but has since fallen somewhat out of favour. Skeuomorphism is where interfaces and applications are designed to look similar to their real-world counterparts. It is why, for example, the save button in Microsoft Office products is a floppy disk – despite the fact that there will soon be generations of users who have no idea what a floppy disk even is, if there aren’t already! Up until the release of iOS 7, Apple was particularly keen on skeuomorphism, with most of their apps and interfaces using this design principle – for example, the Notes app resembled a yellow legal pad and the Compass app was designed to look like a real-life compass. Skeuomorphism was useful in the past for easing users into new forms of technology by associating it with something they recognised from real life, but it can now appear outdated and unnecessary.
“Aren’t all websites flat?” I hear you cry. Well, yes. Technology hasn’t quite progressed to the point where we have 3d websites with things jumping out of the screen. Yet. The term ‘flat design’, however, refers to a web design concept that puts emphasis on clean lines and two-dimensional (or ‘flat’) graphics. It is a deliberate step away from overly-complicated, detailed and cluttered design, instead favouring simple elements and neat grid-layouts. As skeuomorphism has fallen into the dust, flat design has become the design principle of choice – praised for its functional, efficient and crisp look. Microsoft has adopted flat design principles for both its website and its Windows 8 operating system and even the UK government has got on board – unveiling its new flat design website in March of last year.
The term ‘wireframes’ is something of a misleading name that apparently does not refer to the type of glasses you might imagine Harry Potter to wear, but instead to an intrinsic part of the web design process. A wireframe is essentially a blueprint or a plan for a website. It shows how the pages will be laid out and how the content will be arranged. A wireframe does not show the colour scheme, the images or the font selection, only the bare bones of a planned webpage. Wireframes are a key part of web design because they provide the foundation that a website can be built on.
Rather confusingly, white space does not have to be white. Sometimes called negative space, white space is an important part of web design that can affect the usability and legibility of a website. In basic terms, white space is the space around the items on a webpage, like graphics, text, columns and margins. White space can also refer to the space in between individual letters or lines of text. There is no rule set in stone about how much or how little white space you should use, what matters is the distribution and consistency. Using inconsistent spacing on a website can make it appear messy and difficult to navigate. Google is, of course, experts in using maximum amounts of white space – just look at their homepage.
Bonus: Graceful Degradation
This is a term that I have only read and never heard anyone say out loud (possibly for fear of people thinking they were waxing poetic). This refers to the strategy of designing websites with the newest, most up-to-date browsers in mind, which will still work, albeit with fewer features, in older browsers. A website using this principle will ‘degrade’ so that upgrading your browser is not a pre-requisite for viewing it.