UI/UX Best practices that will help you as a sole designer in a start-up
This article will take you through some of the key learnings I have had working at start ups and on many freelance projects. Why I specify start ups is because there is a LOT of groundwork to be laid. And if you’re the only designer in the team you will have your hands full dealing with multiple requirements at the same time.
Whether you’re working on an app, a website or even a branding project, the first thing to do is to establish your basic design “components” and guidelines. This essentially forms the base of your design system. It will help you work better, faster and improve your team collaboration.
In a living system, we have atoms that form molecules and they in turn form organisms. If we use the same analogy with design we arrive at our building blocks-
- Brand guidelines — colours, typography, grid systems and icon library
- Components — Buttons, input fields, menu items, radio buttons, toggles
- Patterns — Navigation bars, cards, widgets, modals
More often than not, a Design System is interchangeably used with a Style Guide or a Component Library. However, these are sub-sets of a Design System.
As part of day to day responsibilities you have to define a high-level strategy or a flow for a product design, delivering features, collaborating with business and tech teams, supporting devs and QA’s, user interviews, and much more. Having these components and guidelines established will improve efficiency and work speed. Figma is the main tool I use for personal projects as well as at my workplace, Aasthy (Pioneer’s of Fractional Investments in Real Estate) for all product-related features; its home to all designs, explorations and brainstorming sessions there.
The advice I live by -
“Always create components before flows”
Imagine creating about 39 screens with amazing visuals and perfect grids, and you realise you have to make a tweak in a recurring element across ALL the screens! (True story)
Although, now you can deal with that kind of problem too with the “Master” plug-in created by Gleb Sabirzyanov on Figma that can help to convert all regular elements into one component. What a time to be alive right? Besides cutting down time and effort, a component library will also help with the following
It benefits both the brand as well as the user experience when the journey is consistent across the product/platform. Button styles, icon styles and colour usage allows the user to learn patterns and have a seamless experience every time they use the product. It builds the brand recall value.
A small design team would have designers working on different features or flows that would make use of several common elements but also entirely new ones. Having a component library will allow all designers to work consistently and have access to designs that were worked upon individually.
As a sole designer or as part of a small design team, we would be working closely with the developers and tech teams. Having a component library will not only make our work easier, it will help the developers understand the styles and guidelines down to the pixel.
Start ups constantly strive to upgrade their products which lead to different versions or variants of a feature. With components, it’s easy to keep track of the latest versions as well as maintain a chronological order of these updates to track progress and data analytics.
There are so many default design systems in place that can be used as a starter for projects like Backstage Design System , Ant Design System , Material Design System and more! Don’t shy out on research and exploration before starting a project, there’s no lack of learning materials online and everything you may be looking for is just a search away.
If you’ve made it this far, as a big thank you, I’ll leave this tutorial that will teach you all you need to know about creating components, variants and using them on Figma.
PS. Fractional investments in Real estate is the next big thing, so join the smart, new age investors at Aasthy to start your high returns journey!