Maintainable design

“Maintainable” design
...about designers impact on project’s development and architecture

Filip Rakowski
Frontend Tech Leader @ Vue Storefront
Frontend Developer @ Divante
filrakowski
frakowski

3
MYTH
The developer is responsible for project’s
architecture and implementation.
CRITICAL ERROR
RECOMMENDATION
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Integer non erat dui. Nam faucibus efficitur
euismod. Cras ornare mi nibh, id commodo lorem
maximus vitae. Vivamus ac ligula non turpis ultrices
ornare at eget ipsum.

4
FACT
The design has a HUGE impact on application
architecture and how easy the maintenance will be.
CRITICAL ERROR

5
Developers and designers
should cooperate, instead of
working separately!
CRITICAL ERROR
RECOMMENDATION

Understand how developers work!

7
PROBLEM
In large application developers need to code tens or
hundreds of views which requires a lot of time. Now
let’s imagine redesign...
CRITICAL ERROR
RECOMMENDATION

8
CRITICAL ERROR

9
SOLUTION
Let’s build the interface from reusable blocks instead
of designing each view separately
(like LEGO!)
CRITICAL ERROR
RECOMMENDATION

10
How modern web apps are
built?
Modern Web Applications are built with
components.
Components are reusable blocks responsible for
presenting specific pieces of UI.

11
Product tile, category tile, product variants, “Add to
wishlist” button, microcart, sidebar menu...
Component examples

12
When you are using components in your design
developers can easly reuse previously coded pieces
of UI in next views.
Reusability
One
component file

13
Every piece of UI is a component. Some of them are
responsible only for grouping smaller components.
Component-based
architecture

14
If you are designing similar pieces of UI make sure
that the common part is the same across all
instances. The differences can be added as other
components.
Think “component”
Common part

15
PROBLEM
Developers are not aware of repeating elements and
conventions that you used across whole project.
They’re most likely will code repeatable elements
from the scratch for each view (it happens a lot with
buttons, font sizes etc)
CRITICAL ERROR

16
SOLUTION
Before showing the design itself tell developers
about conventions and repeatable elements
CRITICAL ERROR
RECOMMENDATION

17
Write down the conventions that you are using
across whole project (colors, fonts, font sizes etc)
Create styleguide!

18
Define the design of most common components.
Create styleguide!

19
Define the design of most common components.
Create styleguide!

20
TALK TO DEVELOPERS!
Remember that you are playing in the same team!
Tell developers about your project, help them
understand your vision and try to make their work
easier.
CRITICAL ERROR

21
REMEMBER!
Only you know about the ideas behind your design!.
Help developers understand them so they can do
their job properly.
Any mistake made by them is also your mistake!
CRITICAL ERROR

You’re a professional aware of
technological point of view
Faster implementations!
Easly maintainable software
Why you should do this?
Faster designing (components are also for you!)
Developers can imitate your design more accurately

23
CRITICAL ERROR
ornare at eget ipsum.atomicdesign.bradfrost.com

Maintainable design

More Related Content

What's hot

Similar to Maintainable design

Recently uploaded

Maintainable design