LU11a - Workflow for website development

The workflow has changed since websites were created using responsive design. Not so long ago, every web project started with Adobe Photoshop and Illustrator. Nowadays, graphics come into play much later and the browser plays an increasingly important role.

The content concept comes first, followed by the graphics. This has made the coordination process with customers easier. There is no longer so much need to discuss questions of taste and design decisions can be based on the content. This results in a better basis for dialogue with customers and you can make yourself better understood.

Mobile First is a concept for mobile-optimised web design. This means that the page optimised for mobile devices is created first, followed later by successive extensions for the desktop browser. Until now, it was common for web designers and programmers to take care of the implementation of the website for the desktop first. This involved designing a site with the full range of functions, graphics and design options for large screens and fast data connections. Only in the second step did the planning of the mobile site follow, which was often only seen as a kind of appendix. The mobile first strategy reverses this workflow and sets the priorities differently. This also has an impact on the design of the technical infrastructure behind the website.

In order to easily implement the „Mobile First“ approach, it makes sense to use a framework that supports the creation of responsive websites. In module 293 we will use Bootstrap, more about this in the LU13.

This graphic shows a possible process for a website project.

We focus on these in Module 322

A wireframe is a sketch-like representation of a website or app that serves as a visual guide for the structure and layout of the page or application. It is the backbone of the design and represents the basic plan for the final product. There are many ways to visualise a wireframe: You can make sketches, assemble grey boxes and lines in Photoshop, Indesign or Fireworks, or you can eines use one of the many online tools. Sketches are unbeatably fast and flexible, but they leave you „stuck“ to the paper. With Photoshop and co. you are already in the right medium, the screen. And you can link individual wireframe pages to simulate navigation on the page. This is important because it allows you to identify errors in the concept and structure at an early stage.

More about Wireframes

Once the wireframe has been approved by the customer, the next phase begins: the programmer rebuilds everything in HTML and CSS and creates the first HTML prototype. More on this in the LU12

For the design we concentrate on 2 approaches:

• We start from scratch and develop the colour and font concept, logos etc. from scratch.
• We build a website for someone who already has a CI/CD and stick to the specifications.

More about design

Kevin Maurizi, Marcel Suter