Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
I’ve had a privilege to work with several clients across multiple industries including pharma, education, e-commerce, agriculture, cloud and many more. From from building a simple WordPress website to developing a native platform, I’ve had a fun as well as daunting experience. I’d like to share a few things I learnt during my design journey.
Don’t Know How to Design UI? Follow Design Patterns
There are several design patterns you can choose from, such as Google’s Material Design, Microsoft’s Fluent Design, Shopify’s Polaris, and Apple’s Human Interface Guidelines. These guidelines help your website meet human expectations because they are based on years of research on aesthetics and accessibility.
Additionally, you can follow UI trends like Glassmorphism, Neumorphism, Skeuomorphism, Minimalism, and Heat Mapping. Just make sure you follow the right guidelines so that your design doesn’t hurt readability and accessibility.
In the past, I built several applications using Vue 2, relying heavily on the Vuetify 2 UI Framework. Most of the elements I used were based on that framework, so even a simple title tag was <v-card-title> instead of just <h2>.
Eventually, Vue 3 was released, which is faster and more reliable and includes new features like the composition API. Vuetify also updated to version 3, but the numerous changes to the syntax made it tough for me to adapt.
Therefore, I recommend using native elements as much as possible unless you are adding a complex component like a calendar or a chart.
Learn Many Frameworks but Stick to One
Learning multiple frameworks not only makes you flexible and opens up various career opportunities but also helps you understand different features across frameworks.
However, you should aim to master at least one framework. This will make your development workflow smoother.
Imagine knowing a framework inside out but missing key features like watchers. You might find workarounds, but things could have been easier.
Keep Things Natural
While some developers may disagree, I prefer not to introduce classes or types to plain JavaScript. I like to keep things simple. Regardless of how good object-oriented programming (OOP) or type systems in JavaScript can be, they often don’t feel right.
Remember how React moved from class components to functional components? The reasons included readability, performance, and the complexity of using “this.”
TypeScript has its own limitations, too. You may not always find third-party npm libraries that work well with TypeScript, and most of their documentations focus heavily on JavaScript. Plus, TypeScript again compiles down to JavaScript.
However, if you’re someone who came from a typed language like Java, you might prefer OOP and TypeScript.
Build Your Own Framework
No there’s no need to build a complete framework like React, there are several and they keep coming. You’d rather constitute your components built with hard work into one small framework.
For example, if you have created an image upload component, an accordion, and an image slider, these components took time to build and can be reused in future projects. Organize them well for reuse.
Design Heavily Depends on Demographics
During my development journey, I often focused on aesthetics without considering demographics. Later, several criticisms after a hard work made me realize the importance of demographics. A website aimed at young/energetic may use high saturation and multiple colors. Older users or office workers might prefer lower contrast and fewer colors.
For instance, gaming websites tend to have lots of animations, videos, larger text, and gradients, while landing pages for CRM focus on detailed information, use 2–3 colors, include screenshots, and display charts. Here are some more examples of demographics matching with design trends.
It’s essential to consider both the developer’s convenience and the customer’s preferences in web development. Ignoring these aspects can lead to reduced developer productivity and dissatisfied clients.
As Alan Cooper once said, “Good design is a lot like clear thinking made visual.” By applying these lessons, you can create better user experiences and more efficient workflows.
BONUS: Minimalist Design Pattern Reduces Your Hassle
Learn more about minimalist design patterns and look out for their examples. By reducing unnecessary content, these patterns can make your designs not only simpler but also more visually appealing.
BONUS: Drink Plenty of Water
Find some triggers to remind yourself when you need to drink water, like whenever you get stuck on a bug, or whenever you added a new function. You can also use the same triggers to meditate or walk. Try this and people start noticing changes in you (I mean positive changes).
Don’t Know How to Design UI? Follow Design Patterns
There are several design patterns you can choose from, such as Google’s Material Design, Microsoft’s Fluent Design, Shopify’s Polaris, and Apple’s Human Interface Guidelines. These guidelines help your website meet human expectations because they are based on years of research on aesthetics and accessibility.
Additionally, you can follow UI trends like Glassmorphism, Neumorphism, Skeuomorphism, Minimalism, and Heat Mapping. Just make sure you follow the right guidelines so that your design doesn’t hurt readability and accessibility.
Use Native Components/Elements to Ensure Reliability
In the past, I built several applications using Vue 2, relying heavily on the Vuetify 2 UI Framework. Most of the elements I used were based on that framework, so even a simple title tag was <v-card-title> instead of just <h2>.
Eventually, Vue 3 was released, which is faster and more reliable and includes new features like the composition API. Vuetify also updated to version 3, but the numerous changes to the syntax made it tough for me to adapt.
Therefore, I recommend using native elements as much as possible unless you are adding a complex component like a calendar or a chart.
Learn Many Frameworks but Stick to One
Learning multiple frameworks not only makes you flexible and opens up various career opportunities but also helps you understand different features across frameworks.
However, you should aim to master at least one framework. This will make your development workflow smoother.
Imagine knowing a framework inside out but missing key features like watchers. You might find workarounds, but things could have been easier.
Keep Things Natural
While some developers may disagree, I prefer not to introduce classes or types to plain JavaScript. I like to keep things simple. Regardless of how good object-oriented programming (OOP) or type systems in JavaScript can be, they often don’t feel right.
Remember how React moved from class components to functional components? The reasons included readability, performance, and the complexity of using “this.”
TypeScript has its own limitations, too. You may not always find third-party npm libraries that work well with TypeScript, and most of their documentations focus heavily on JavaScript. Plus, TypeScript again compiles down to JavaScript.
However, if you’re someone who came from a typed language like Java, you might prefer OOP and TypeScript.
Build Your Own Framework
No there’s no need to build a complete framework like React, there are several and they keep coming. You’d rather constitute your components built with hard work into one small framework.
For example, if you have created an image upload component, an accordion, and an image slider, these components took time to build and can be reused in future projects. Organize them well for reuse.
Design Heavily Depends on Demographics
During my development journey, I often focused on aesthetics without considering demographics. Later, several criticisms after a hard work made me realize the importance of demographics. A website aimed at young/energetic may use high saturation and multiple colors. Older users or office workers might prefer lower contrast and fewer colors.
For instance, gaming websites tend to have lots of animations, videos, larger text, and gradients, while landing pages for CRM focus on detailed information, use 2–3 colors, include screenshots, and display charts. Here are some more examples of demographics matching with design trends.
- A product landing page could use Minimalist design.
- A jewelry website could feature a black background with gold fonts.
- A real estate website could use parallax images.
- An e-commerce application might have a plain background with products displayed upfront.
- An artist’s website could feature pastel colors and crayon effects.
It’s essential to consider both the developer’s convenience and the customer’s preferences in web development. Ignoring these aspects can lead to reduced developer productivity and dissatisfied clients.
As Alan Cooper once said, “Good design is a lot like clear thinking made visual.” By applying these lessons, you can create better user experiences and more efficient workflows.
BONUS: Minimalist Design Pattern Reduces Your Hassle
Learn more about minimalist design patterns and look out for their examples. By reducing unnecessary content, these patterns can make your designs not only simpler but also more visually appealing.
BONUS: Drink Plenty of Water
Find some triggers to remind yourself when you need to drink water, like whenever you get stuck on a bug, or whenever you added a new function. You can also use the same triggers to meditate or walk. Try this and people start noticing changes in you (I mean positive changes).