Gecko v7 Gecko v7
  • +44 (0) 131 240 3390
  • +44 (0) 131 240 3390
  • Gecko Agency
    Design
    Brand Strategy
    Web Design
    Development
    Umbraco
    Custom API Integrations
    Custom Web Development
    Virtual Website Planning
    Digital Marketing
    Search Engine Optimisation
    Paid Search Marketing
    Content Marketing
    Social Media Marketing
    Support
    Support Packages
    Blog
    Case Studies
    About Us
    Contact
    Edinburgh
    Chester
    Lisbon

    The A-Z of Digital Design

    26th July 2019

    Do you ever get overwhelmed or out of your depth with digital design jargon? Well, you've come to the right place.

    We've put together a simple A-Z list for those that just don't quite understand what designers come out with on a day-to-day basis.

     is for Accessibility

    This is about ensuring that all users have access to content and functionality, taking care to include those with disabilities such as visual impairments, hearing impairments, mobility and cognitive difficulties. As a designer, there are simple practical things you can do such as to test colour palette choices for appropriate contrast. More fundamentally it is important to resist unnecessary complexity where possible. After all, a simpler, easier to use, more accessible system ultimately benefits everyone.

     is for Bootstrap

    The widely-used open-source framework for website development. Bootstrap provides the perfect starting point for a project, with a ready-made responsive grid system and component library, comprehensive CSS and powerful javascript functionality to work with. The latest version, Bootstrap 4, brings with it lots of nice content and layout utilities such as an abundance of Flexbox behaviours.

    is for Craft

    This is undoubtedly the daft romantic in me, but I like to think of digital design as something of a craft, even though the end product is merely a bunch of pixels, rather than a real and tactile thing. Considering what you do as a craft means a couple of things for me. Firstly it is about taking care of what you produce, having some pride in it. Secondly, I like to think that by virtue of doing the same type of work over a number of years, and hopefully doing it well, that you develop a sort of mastery of it. You hopefully have an intuition or gut feeling for what is good and what isn’t, and what direction your work should take. Ok, let’s move on before this gets way too pretentious.

    is for Data

    The digital world is literally awash with it, built upon and driven by it. Data and design can have a couple of key relationships. Firstly you have the practice of gathering and analysing data, looking for useful insights that might positively influence the design of digital products and experiences or marketing campaigns. This is design based on data essentially. Then again there are many instances where data needs to be presented simply and effectively and visually, in order for most people to make any sense of it. Think of the plethora of infographics out there - examples of data delivered through design.

     is for Empathy

    You will not have to look far to find people extolling this as a key skill for any designer to have. In essence, it’s about having some capacity to put yourself into someone else’s shoes, or sneakers, flip-flops, sandals, slippers, heck even bare feet if you must. I think as a designer you ideally need to have, or develop, a good degree of empathy as a personal quality. That said, it’s also possible to employ techniques and methods in your work that force you to think from a perspective other than your own.

    is for Font

    According to Wikipedia…The word "font" (traditionally spelt fount in British English, but in any case pronounced /fɒnt/) derives from Middle French Fonte "[something that has been] melted; a casting". This, of course, harks back to an age long before digital, when each individual character on a printed page would be derived of a piece of metal, carefully set in place before being covered in ink and pressed onto some paper. The word is common currency these days and not just among designers. Everyone has a favourite font, don’t they? What has become a little muddled is when the word font is used interchangeably with the typeface. If we’re being pedantic then a font is a very particular iteration of a character set, for example, the bold and Italic version of Garamond, whereas a typeface is a whole family of fonts - all the different weights and styles that are available.

     is for Gecko

    Sorry. Couldn’t help it.

     is for Hexadecimal

    Let’s pinch a quote from Wikipedia again shall we - ‘In mathematics and computing, hexadecimal (also base 16, or hex) is a positional numeral system with a radix, or base, of 16.’ There, that’s pretty simple, isn’t it? Well, hex numbers are very familiar to anyone in digital design and web development. They are just the most common method we use to reference colours. These particular hex numbers or colour codes are 6 digits long made up of a triplet of values that specify the Red Green and Blue parts of colour. Each of the triplets uses hexadecimal notation to assign a value between 0 and 255 (from the lowest to the highest intensity) to R G and B in turn. So you can go from #000000, or no intensity anywhere therefore black, all the way to #FFFFFF, or max intensity everywhere therefore white. There are a mere 16.7 million possible colour codes in between. Fallen asleep yet? Let’s move on.

    is for Interactive

    The fundamental layer that separates digital / UI design from good old print-based design disciplines is interactivity. Actually you could argue that some print media is interactive - you have to pick up a magazine for instance and physically turn the pages, so of course, you are interacting with it. Digital interactivity though, whilst often really really basic in form, has the potential to be constant and complex, nuanced and sophisticated. We’re still in the fairly early stages of it, but the potential (for example) of artificial intelligence and conversational interfaces is quite intriguing.

     is for Javascript

    As a designer who is at least 50% old school, proper coding is somewhat out of my comfort zone. That said the basics of javascript I can almost get my head around, and I love the potential that it can unleash in terms of nifty functionality and interactivity.

     is for Keyframes

    The 11th letter of the alphabet before making a reference to animation? That’s shoddy indeed. Anyway, here it is. Most digital designers will dabble with animation at some stage or other. It’s just irresistible. And as soon as you start to get to grips with animation software, the concept of keyframes will become clear. They are as fundamental as the timeline upon which you would construct your animation and have been part of animation software since, well, forever. The most basic example is when you want to move an object from one position to another - easily achieved with 2 keyframes on the timeline, each used to specify a different position. Keyframes can basically be used to change a whole host of properties over time. The same principle is now used within CSS to animate elements on a web page.

     is for Listening

    This is tied a little to E for Empathy back there, and also to Q for Question coming up. Careful listening is crucial to truly understand any situation or design problem. The people at Google Design talk about what it is to be a good listener. I especially like the line "You can often tell how experienced designers are, not by the amount they talk but by the amount they don’t."

     is for Media

    Okay, that’s quite a big, broad word really. Back in the early days of digital the term ‘multimedia’ was adopted to explain the computer-based integration of different media types such as still and moving images, diagrams, graphics, audio and of course text. Nowadays we seem to be increasingly conditioned to an uber-connected world that constantly bombards us with all kinds of media - especially the social kind.

     is for Navigation

    There are a number of ways to help someone orient themselves and move around within a website or digital product. As a designer, you need to consider what is going to be the best method or combination of methods for each project. There isn’t really a one size fits all solution. Well, thought out digital navigation also relates to the next word in the list and also the U word later on.

     is for Organisation

    Humans generally don’t feel comfortable surrounded by a mess. How often are we reminded of the benefits of decluttering our homes and lives? And along with this decluttering (i.e. removing the things you don’t need), it is also valuable to organise the remaining things you definitely do need. Let’s face it, messes just happen, they always will. It’s nobody’s fault necessarily. Some kind of mess-fixing activity can often be a critical early part of a website design (or re-design) process. The more formal term for this activity is Information Architecture and it’s well worthy of an article of its own. There is a great online resource by Abby Covert on the subject. Another way to be organised from a design perspective, assuming you have the time on a given project, is to put a design system together. That is to really figure out and document all the aesthetic elements from the ground up.

     is for Photography

    I think most designers are also frustrated, wannabe photographers. In fact, lots of them probably are very good ones. It’s quite a natural crossover, as there are a lot of common skills between photography and design - understanding composition and balance, creating visual harmony, telling a story through visuals. Commissioning or selecting photographic images is a pivotal job in many design projects. Great photography will lift a website to a magical happy place. On the other hand, if it’s of poor quality it can do a lot of harm to the integrity and reputation of an online entity.

     is for Question

    Yes, not only is a good designer a good listener, but they should also be fairly adept at asking the right sort of questions that will elicit the nuggets of information worth listening to. Sometimes you just have to be really comfortable asking what may seem to be obvious questions, and getting your client to explain their business proposition in layman's terms.

     is for Responsive

    Nowadays it is unimaginable that we would develop a website for a client where the design only considered a single fixed size and showed no variation in presentation from one screen size to another. There have been a variety of approaches and (accompanying labels) that have endeavoured to deal with the innate variety of digital display sizes. We have talked in terms of flexible, fluid, liquid, adaptive layouts, but more often now we simply refer to the websites we design as being responsive. It was especially the boom in the use of powerful mobile devices that fueled responsive design. In fact, adopting a ‘mobile-first’ philosophy has become a key tenet of responsive website design.

     is for Sketch

    This word covers two meanings. Firstly there is the digital design app that shook up the scene a few years ago just by being simpler and way more suited to the needs of digital UI designers than those old behemoths that Adobe had cornered the market with. Sadly Sketch App is exclusive to macOS so I don’t use it right now. I do sketch though. For me, pen and paper is still the best way to get down early ideas and rough designs. I haven’t moved to sketch on a tablet yet, but am certainly considering it. The latest editions of the iPad Pro and Apple pencil seem to perform extremely well and can even be combined with a special screen protector that makes the surface feel like paper. Hmmm.

     is for Typography

    This is the art of taking those F for Fonts and using them appropriately. It’s about choosing fonts carefully for starters. It’s also about making a host of judgements about the size, spacing, colour etc in order to both convey information clearly and also instil a sense of brand personality.

     is for Usability

    It might have been a bit more on-trend to just say UX here. Well, it still feels to me that what is and isn’t ‘UX’ can be a bit blurry, whereas the simple principle of usability is less prone to misunderstanding. Of course, usability applies to things way beyond just digital. Basically any human-made object, tool or device can be judged on how usable it is. A teacup with an uncomfortable handle is poor usability. Likewise, if a digital product burdens the user with the need to learn lots of idiosyncrasies in order to carry out basic tasks, then that is poor usability.

     is for Vector (graphics)

    All images that appear on a screen are made of lots and lots of tiny dots or blocks that we lovingly call pixels. Now the instructions for how those tiny dots should appear can come in a couple of different ways - they are either bitmaps, where a certain number of pixels have each been specifically defined, or alternatively, they are vectors. The magic of vectors is all about mathematics. Vectors are defined by a series of coordinates that may be connected by straight lines or curves. So vector graphics will always look nice and sharp even if you greatly increase them in size, as they will simply be redrawn to take account of the available pixels. Bitmap images, on the other hand, will become more and more blocky if you try to increase them beyond their original pixel size.

     is for Wireframe

    This word’s meaning depends on the context. If I were speaking from the realm of 3D modelling I would be referring to the basic model, presented without any surface texture. Well from a web design perspective the concept is similar, meaning very simply styled schematics of a website's pages. Drawing up wireframes is a stage in the design process that is not always necessary. It can be helpful though if you would like to really figure out what goes where before you get stuck into how things should look.

     is for

    Er, hmmm. Well. Nah, give up on that one. Sorry.

     is for Yellow

    Design is not exclusively but almost always about colour. Colour conveys meaning, creates atmosphere, evokes feelings, draws attention. I’ve picked out yellow purely as an example - I have no particular favourites when it comes to colour. Yellow is a warm, positive colour. Think of the first daffodils of early Spring, or the glorious sunflowers of mid to late Summer. Last year the BBC screened an intriguing drama set in Wales (‘Keeping Faith’) where the main character was frequently seen wearing a bright yellow raincoat. It became quite an iconic aspect of the series, presumably by design rather than an accident, and really helped to make the character pop-out of the screen. The same principle has been successfully employed on a variety of websites, including New York, Wandering Through.

     is for Zen

    Be calm, relax, block out distractions, take time and focus, enjoy what you are doing. Okay okay, It’s all a whole lot easier to suggest than it is to actually do oftentimes, I get that. Bringing just a little bit of zen style principles into the workplace if you can though, really boosts the quality and creativity of digital design output.

    And that's our A-Z of digital design! Are there any that you would replace? If so, what would it be? Tweet us, @wearegecko!

    - Mark

    26th July 2019 Share This:
    ...
    Author
    Mark Whitworth
    Digital Designer
    Designing for digital since the late 1990s, back when people ‘surfed the web’. Mark is a ‘Northerner’ who is happily in exile! He loves being in the great outdoors, or reading books on landscape and nature.
    @Twitter
    Read more from Gecko
    Covid-19 Marketing Advice
    LinkedIn: A Beginner's Guide
    8 reasons why a strong brand is important for your business
    Follow Us:

    Gecko Agency (Edinburgh & Chester)

    hello@wearegecko.co.uk
    t: 0131 240 3390

    t: 0131 240 3390

    Head Office

    Orchard Brae House
    30 Queensferry Road
    Edinburgh
    EH4 2HS

    North West

    11a Lower Bridge Street
    Chester
    CH1 1RS

    Lisbon

    Av. Salgueiro Maia, N. 1025
    Arm.14B
    Rana

    Gecko Agency Ltd | Copyright © 2022

    • |GDPR
    • |Privacy Policy
    • |Cookie Policy

    We use the necessary cookies to make our site work. We'd also like to set analytics cookies that help us make improvements by measuring how you use the site. These will be set only if you accept.

    For more detailed information about the cookies we use, see our Cookies Policy