How Design and Development fit into each other's separate disciplines, resulting in a scalable, long-term application with usability, design and intelligent development combined.

Introduction

Design and Development are often confused in the world of Front End Development, with significant overlap of the two in each separate discipline involved in the production of a website or applications front end.

Understanding the distinction between design and development, where they fit into a front end team and their workflow will increase productivity and the quality of each department's work output, resulting in a significantly improved end product.

A Front End team should consist of specialists in each role, from a design research team, to a design implementation team, through to the front end developers, who implement a design. However good a design spec or team structure is, communication between the departments alone is not sufficient to augment a true understanding of each of the individual disciplines.

This is especially true of front end development, where the work done by a design team is implemented and actualised. Although this is considered development, using computing languages to display and style page elements, and coding languages to provide responsive, interactive websites.

Front End Team

Front End Development is a slight misnomer, as it is often applied to both Front End Design and Front End Development, the work of a front end team. The Front End part, refers to the user side of the application or website and thus, the blanket term development is erroneously applied to the work of the entire front end team which encompasses a significant portion of design work.

Research is done by a design team to establish client and end user expectations. Designers then apply the information discovered into a wireframe, outlining how the end user will achieve the result desired by the client, with minimal distractions and a low potential for failure or abandonment.

Where Development begins, is the implementation of this wireframe into a tangible end product. This is done using a selection of coding languages.

Languages

There are three primary languages used in front end development and each plays their role in the production of a web page or application.

HTML

HTML stands for Hyper-Text Markup Language. It is not strictly a programming language, as programming refers to instructing the computer to carry out actions based on input.

Instead, HTML is a ‘markup’ language, meaning it marks up data, or elements of a page within ‘tags’. This tells the browser not only what to display, but the purpose of that within a webpage.

For example, take the ‘Sample Information’ enclosed in the h1 tags below:

Sample Information

The tags tells the browser that ‘Sample information’ is a top level heading, ie. H1, and what it should display in place of the primary heading.

Likewise, tags exist for all manner of information including forms, email addresses, passwords, paragraphs, images.

They are styled, and their appearance defined, by a Cascading Style Sheet.

CSS

Cascading Style Sheets is also not a programming language, though it is considered a language of sorts. It is responsible for all of the styling of all the elements of a page and how they are displayed.

This is quite a broad range of style options for all elements in how they are placed on the page. It also includes font choice, size, weight and text colour. For images, it determines their size and any filter overlays or tweaks to them.

This encompasses a large amount of code and as such it is incredibly important that the document is well written. To aid in tidy code, often CSS frameworks are used. Most commonly, bootstrap is responsible for the similar appearance of many buttons and forms across the web, as it is simple to implement and code with.

However, to address the issue of similar web pages, front end teams will often have specialist CSS developers.

CSS is considered such a unique, specialist skill that there are even websites purely dedicated to showing the incredible stuff it can do.

JavaScript

Not to be confused with Java, the totally unrelated computer programming language. Javascript is the way in which the page elements and their visual properties are given interactivity and responsiveness.

Javascript is considered a programming language. The distinction between HTML, CSS and their status as non-programming languages in relation to JavaScript is that they determine style and structure, but do not give the browser any instructions of actions to carry out, when certain trigger conditions are met.

Many programming languages follow the same basic syntactic structure, using “if” statements to define when an action should be carried out, “for loops” to enable repeating actions, and various “Arrays” or “Strings” which contain data or information relevant to the functions being coded.

Javascript is also used to fetch information from servers on the ‘Back End’ of a website.

A good example of Javascript in action is the Netflix interface. Not every title and preview is written into HTML, instead, Javascript is used to fetch the titles and previews from databases on the back end, and insert them into predefined HTML tags, given style by CSS.

Why is Design important?

Design is a massive part of front end application and website development. It is a merger of carefully designed research, scientific and psychological theory and an application of our understanding of human interaction with digital technology.

From the early stages of a project, design teams play an important initial role in determining the shape and scope of the product and how it will be implemented.

We have covered in a previous post, how useful research in design can be, especially when feedback is gained through a mixture of listening to our test consumers and observing them.

Good web design implements these ideas in a way which subtly draws the attention of the user to elements we wish them to interact with. Special offers on an ecommerce landing page, or precise placement of ‘Add to Cart’ buttons are both great examples of this practice.

These placements also impact usability, which we also have covered as a key consideration in the design of a product and how a product's usability will impact the end result of a user's interaction.

Design, then, can be seen as important because it ultimately will determine the success or failure of a website or application in meeting its purpose as a software.

Where does Design fit into Development?

Developers must understand design principles for a number of different reasons, not just the overall importance of design in front end development.

So too, development principles play a role in good design. A well structured CSS design sheet uses principles from development to structure it and keep the code neat and tidy.

Page Elements and Visuals

In the placing and styling of page elements, developers must consider not only the result of the design team's research in user expectation, but also established scientific principles for a number of different page elements.

Fonts

Fonts are a surprisingly broad topic in web development and design, containing a number of nuances for their implementation in a good quality end product.

Font choice is important to convey the tonality of a webpage. In an obvious example, you’re unlikely to want to see a comic sans style font on the website for a legal divorce specialist.

Similarly Serif or Sans Serif can also define the tonality of a website with Sans Serif fonts sometimes being considered cleaner and more modern.

Therefore an understanding of established design principles will be necessary in the development of the style of the page for fonts.

Colours

Colour choice too for developers is not simply a matter of matching something with a company's logo and going from there.

There is an established science to selecting the correct colour palette based on how you would like the user to perceive their experience on a website and the actions you want them to take.

Colour choice arguably falls under the category of usability and UX, meaning an understanding of design principles are essential here, too, in order to develop quality websites or applications.

Layout

The layout of a website should clearly follow the design team's wireframe and the flow they have established a user taking throughout the website.

It will not be sufficient for a developer to simply understand the wireframe, but it is also essential for them to understand why the flow has been designed around this structure and what each step of the process is for in terms of usability.

Interactivity

So too, does a website or applications interactivity depend on design principles. A design team will spend a great deal of time researching how users will interact with software, and Javascript interactivity must be programmed with this in mind.

Conclusion

We can see that at every stage of a developers role in a front end team, there is a careful consideration that must be applied to design, whilst undertaking development.

Although we have covered the importance of a good team structure in successful front end implementation of a project and the role a developing and evolving Design Spec has in that team, we have also established here the importance of design considerations by developers.

Only when development is done with an understanding of design principles, will neat, scalable applications that fulfil user and client expectations be realised.

WQA provides supercharged digital product development for growth driven companies around the world. Working with Startups, Scale-ups and Enterprise, we design, build and scale digital products, experiences and platforms used by millions of people.

If you want to learn more about implementing design principles into your software development, you can chat to us or email us for a conversation and assessment of your unique digital context.