Advantages
Our work
Learn
Connect
This shouldn’t mean that designers and developers should work in isolation. It’s best practice for designers to have a basic understanding of web development before designing a website so they can design with the end in mind. Understanding key terms can assist designers in their process as they’ll be able to plan and brainstorm the functionality of the website with the developer before any design work begins, thus limiting potential issues.
Here is a list of 10 terms we think designers should wrap their heads around.
Accessibility
The Internet is a space shared by multitudes of different people for whom designers and developers need to cater, regardless of their hardware, software, language, culture, location, or physical or mental ability. Accessibility supports inclusion of all people and should be carefully thought out in the design planning process.
This includes catering for visually impaired visitors using embedded screen readers, or having no sound for the hearing impaired. Colour blindness is also a factor to consider—websites should never have red and green call-to-action (CTA) buttons placed next to one another.
Below the fold
This is a term that stems from the newspaper publishing industry. It refers to the place where a newspaper folds and the content that lies on the other side, which is essentially hidden at first glance. Anything placed “below the fold” on a webpage requires the visitor to scroll down to see the content as it will not be immediately visible. This is browser and screen-size dependent but it’s applicable to the average user.
When designing a website with a full width banner image, some designers integrate an arrow or similar to indicate to the user to scroll down for further content. This is a great user interface (UI) tool that adds to the user experience (UX) of the website.
Hypertext Markup Language (HTML)
HTML is the language developers use to make up the skeleton of a website or app which provides the structure. This language is used to markup the elements of the website or app – the navigation, paragraphs, headings, images, and links. These elements are represented by tags, which give each element its respective label, as listed above. Browsers use these tags to render the content of the website or app without displaying them for visitors to see.
Cascading Style Sheets (CSS)
CSS is a style sheet language that describes the style of a website/application written in a markup language, like HTML. Instead of describing the structure, it determines what the HTML elements of the website/application look like. This includes typefaces, font sizes, colours, backgrounds, alignment and layout.
Content Management System (CMS)
A CMS is (usually) a web-based application such as WordPress or Joomla which allows users to login to the back-end of the website. Users can then control the content, such as images and text. These applications are simplified means of keeping a website updated without requiring technical HTML skills.
Capabilities exist for users to have different permission levels in managing content, data, or information which means an agency can give their clients limited permissions to keep their respective websites updated with new images or text but prevents other elements in the code from being broken.
Favicon
Short for “favourite icon”, a favicon is an icon that is associated with a brand and its website and is used by some browsers to identify a bookmarked website. It’s often a simplification of the brand’s logo, such as the capital G from Google’s logo. Favicons are 16x16px in dimension and are found in the browser tab adjacent to the name of the website.
Responsive Design
Design and development should always be tailored to the needs of the user and designers need to take screen sizes, platforms, and orientation into consideration. A great strategy to tackle this involves designing for mobile first as it generally causes the most headaches. Once the mobile design problems have been solved, it will be easier to design for other devices.
Search Engine Optimization (SEO)
SEO is a process used to maximize traffic to a website and ensure it can be found in search engines when visitors enter content relevant key words and phrases. This means you should have title tags, meta descriptions and ALT tags for images included in your website development to fully benefit from SEO.
User Experience (UX) Design
While UX and UI work together, they are quite different. In digital design, UX is the overall experience a visitor has with a website or app. This covers all aspects such as how well the visitor understands how the site or app works, how they feel using it, and how well it solves their problems. It is the more technical and analytical field of the two and is the starting point of a great website or app.
User Interface (UI) Design
UI design is the more graphic aspect of the two fields. It is the process of transforming the wireframes, research, content, and layout determined by the UX process into something attractive and aesthetically pleasing to the visitor. Designers use prototyping tools such as InVision to create high fidelity prototypes, depicting the final stages of the design.
Wireframe
A wireframe is a representation of the layout and skeleton of a website or app. It displays the functional and structural elements of the site or app. Wireframes can be executed in several ways, including sketches on paper, digital sketches using conventional design software or even online wireframing tools.
Low fidelity wireframes tend to be faster to create and facilitate team collaboration to quickly determine where all the elements will be placed. High fidelity wireframes include more of the graphic content such as images and copy. The navigation can be styled and typefaces can be paired correctly. It is a step towards the final product.
If you’ve read this far, good on you! Hopefully we’ve helped add a few more tools to your design vocabulary.
