Search for a command to run...
Learn design by trimming the visual designs of your projects
No comments yet. Be the first to comment.
In this series, I will refactor side projects and extract design related good practices.
A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. Antoine de Saint-Exupéry
This is the beginning of a series of articles on correcting the visual design of web applications I've built. Here, I will attempt to follow design and UX fundamentals learned from tutorials and guides.
Over the years, I've been building several small side projects; ranging from the unexciting (Coffee Tracker) to a challenging (Heartbeat based App) that converts heartbeats (measured via Bluetooth) into musical sounds.
As frontend developers, we tend to lack the ability to design web interfaces ourselves. By frontend developer, I am referring to developers who typically receive and integrate web designs into websites or apps. Naturally, you can become an exceptional web developer without ever diving into web design. Still, I personally believe that learning some basics about design can improve the way you develop these interfaces, as well as the way you might be required to collaborate with a designer in the future.
What makes the proposed interaction you received not worth the effort in a project ? No matter what the actual reasons are, using terms like "flexbox" or “box-sizing” may not help you when trying to communicate with a designer. On the other hand, you might have a more fruitful exchange by learning concepts such as visual hierarchy, spacing, or color theory.
An implication of learning design as a web developer is a new perspective on previous projects developed without this critical eye. Where you may have been satisfied with your accomplishments, you may now find inconsistent alignments, absurd spacing (see the purple squares down below), and inaccessible contrasts.
Viewing your past accomplishments through new, more polished lenses and realizing what you could have done better is not exclusive to web development. Whether you're an artist, athlete, or writer, you may tend to look at your prior work as a testament to your inexperience and as evidence of your budding expertise.
I'm far from being an expert in front end development, but I do now look back at projects I did a while ago with a different perspective. Most of these projects seem cluttered, with features that are either irrelevant or inappropriately arranged for their purpose.
In this series of articles, I will redesign past projects by decluttering their interfaces while extracting bits of knowledge, notions, and sources on which these decisions are founded. The focus will be on Simplicity, Clarity, and Accessibility, which are principles I now value most when developing.
If you are a developer learning design, hopefully, this can help you learn a few things and even consider getting into the habit of refactoring past projects.
Becoming a good engineer is about collecting experience. Each project, even small ones, is a chance to add new techniques and tools to your toolbox. Addy Osmani