diff --git a/README.md b/README.md index 7eb0a5b..dfffc57 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,6 @@ ## :muscle: Motivation - Inspired by the title of [KYLE SIMPSON](https://github.com/getify)'s book [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS), I decided to create [You Don't Know UI](https://github.com/You-Dont-Know-UI) which is a collection of detailed pro tips about designing and developing modern user interfaces. Back to 2017, I started to spend my spare time to learn in-depth about Web Design, Mobile Design, Animation, Micro-Interaction, User Experience and Design Systems by reading several books and articles such as [Refactoring UI](https://refactoringui.com/) by [Adam Wathan](https://github.com/adamwathan) & [Steve Shoger](https://www.steveschoger.com/), [Invision Design System Handbook](https://www.designbetter.co/design-systems-handbook), [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) by [Brad Frod](https://github.com/bradfrost), [Airbnb Design System](https://github.com/airbnb), asking questions on [User Experience Platform](https://ux.stackexchange.com/), and sharing my personal [prototypes](https://www.behance.net/menaialaeddine) on Behance. Also, 2 months ago I started sharing design tips for front-end developers on [Linkedin](https://www.linkedin.com/in/alaedddine/) but they are not professional and more detailed like here. @@ -28,7 +27,6 @@ From basic to advanced: test how well your UI is modern, consistent, universal, ## :rocket: Get Started - #### How to build your user interfaces from scratch? --- @@ -36,7 +34,7 @@ From basic to advanced: test how well your UI is modern, consistent, universal,
1. Think in a feature, not a layout

-I've wasted months not just days trying to create an MVP ( Minimal Viable Product ) for an idea. I spent nights and nights refactoring the user interfaces by changing just the places of the components and the layouts. Don't be stupid like me! +I've wasted months not just days trying to create an MVP ( Minimal Viable Product ) for an idea. I spent nights and nights refactoring the user interfaces by changing just the places of the components and the layouts. Don't be stupid like me! When you start designing a new user interface for a web or mobile application, most of the time you think about the **structure** or the **position** of your components, so you start designing the Header or the Top Navigation as your first component in your UI. Me too I was doing this mistake! @@ -48,18 +46,18 @@ Most of the folks try to _copy & paste_ from popular websites and apps, without They focus on the _shape_ of their app but not the _core features_, and they start asking frequently these questions : - Where should I put the Logo? + Where should I put the Logo? - How many items should I have in the navigation bar? + How many items should I have in the navigation bar? - Should I have one or two sidebars? + Should I have one or two sidebars? - Should I have a Grid Layout or a Table of items? + Should I have a Grid Layout or a Table of items? But, what you don't know ( maybe ) is UI Components are made to solve certain problems that's related to _user interaction_, _data displaying_ or _new device screen invention_, and you may be noticed that _Humburger_ element is started to be well-known in mobile devices. - + Obviously, we are not designing user interfaces but we are designing and implementing features, and Top Navigation is just a _common feature_ that helps users to do quick navigation for certain and most important pages. So, don't care about common features or what I call them _Generic features_ or _layouts_. @@ -70,19 +68,18 @@ Let's say you'll build the next-gen social media app for sharing videos. You cou The UI will need : - Field for upload a video + Field for upload a video - Field for the caption + Field for the caption - Field for the description + Field for the description - Button for posting or sharing + Button for posting or sharing - Button for saving in draft + Button for saving in draft These are the requirements to design your UI. - [Edit →](https://github.com/MenaiAla/You-Dont-Know-UI/pulls) @@ -97,16 +94,15 @@ These are the requirements to design your UI. I have this question for you: - Why do you need to design perfect UI with all details then implement it? + Why do you need to design perfect UI with all details then implement it? I have another question for you: - - Did you feel frustrated in the stage of implementation of a new feature because the design does not take programming limits in consideration? + Did you feel frustrated in the stage of implementation of a new feature because the design does not take programming limits in consideration? My last question is: - Why do you focus on details in the early stage of the design? + Why do you focus on details in the early stage of the design? Ha! I know you're thinking in Agile but you're working with the Waterfall approach. @@ -118,11 +114,11 @@ So, let me tell you something: **Details do not matter when you start from scrat The hard thing about the design is when someone asks you: Why you take this decision? - Why you chose this palette of colors? + Why you chose this palette of colors? - Why you chose this typface? + Why you chose this typface? - Why you chose this style of icons? + Why you chose this style of icons? If you have not a Design System in place, creating **consistent** user interfaces is very hard, and focusing in-depth on **details**, will lose **time**, **effort**, and of course the **consistency** of your user interfaces. @@ -140,18 +136,17 @@ The first thing, you need to do is ignore all details ( nice-to-have ) and just So, I recommend this workflow to get quick both of **internal** and **external** feedback: - Create hand-drawn version. + Create hand-drawn version. As you see here, there are zero details about your user interface in production, but why this step matters? -This hand-drawn activity may take between 5min and 20mins if you want to make it **high-fidelity** draw! - -In fact, this step will help you to see other teammates and stakeholder's opinions and gather **individual recommendations** from each member in your team. People could not recommend changes when they see a well-done thing. But they can tell you how can you make it better when you deliver it **clean** but **uncomplete** and **ugly**. It's human nature. +This hand-drawn activity may take between 5min and 20mins if you want to make it **high-fidelity** draw! +In fact, this step will help you to see other teammates and stakeholder's opinions and gather **individual recommendations** from each member in your team. People could not recommend changes when they see a well-done thing. But they can tell you how can you make it better when you deliver it **clean** but **uncomplete** and **ugly**. It's human nature. - Ignore colors. + Ignore colors. @@ -161,7 +156,7 @@ But how can we adopt this workflow in our design? The idea is to **hold the color** even if you'll refine your design in higher fidelity. Let people tell you how are the **shapes**, **sizes**, **spaces** and the **position** of your elements. - Implement the UI. + Implement the UI. Modern frameworks and libraries such as [Vue](https://vuejs.org/), [React](https://reactjs.org/) and [Svelte](https://svelte.dev/) were created for **Rapid Prototyping** which means you can implement one component and use it with **different looks** in **different positions**. So, you don't need to have a **full prototype** with all user interfaces to start the implementation. @@ -169,19 +164,16 @@ It's a little bit challenging, but I can say that you don't need to regret the t The goal of this step is to test the **back functionality** ( How it works ) of the UI without sticking on how it looks for users. - Colorize. + Colorize. If you don't have a color palette in place, you can try several colors and see the consistency between them based on color theory rules. - - - Repeat. + Repeat. Our purpose here is to prevent the **over investing** and moving fast by doing **parallel iterations** on both design and code in **short time**, so you can build real thing as soon as possible. In the end, what matters is your UI in production. - [Edit →](https://github.com/MenaiAla/You-Dont-Know-UI/pulls) @@ -194,18 +186,17 @@ Our purpose here is to prevent the **over investing** and moving fast by doing *

3. Details Matter, But Later

- Which option will delight the users? + Which option will delight the users? This is the frequent question I ask myself in my work basis. Hope I'm not the only one! Designers and engineers waste more time on details and minor decisions in the early stage of designing and implementing new UI but they should realize that designing UI is an **iterative process**. In fact, it's better for you to not stick on minor details in the early stage of any task. You don't want to hear from me how many hours or maybe days I spent changing the font size by adding or reducing **1px**. - - + - Do you think that users will notice these changes? + Do you think that users will notice these changes? - Do you think that adding 1px will add more revenue to the company? + Do you think that adding 1px will add more revenue to the company? Please, don't waste your time on these changes in the early-stage. @@ -215,8 +206,7 @@ Yet new research does point out a different dating problem: being confronted wit When you're designing without constraints, your process will be very slow, and you will never end up with a choice. Let me clarify with this example: - - + As you see in the above image, the first scenario is for a buyer who wants to choose a flower for his wife but he's seeing flowers with different colors and they are almost similar which makes the decision so hard for him. The second scenario is for a designer who gets confused between these buttons where it's almost to see the difference between their background colors. @@ -224,31 +214,27 @@ The fact is when there were **too many choices** people became confused and didn So how can we limit our choices for our user interfaces? - - Systematize colors: + Systematize colors: When I was a student, I remember when we were working on the design of the website with my teammate, and because we had not a system for the colors, we were picking a color randomly each time from the color picker and we see how the color looks in the UI. But after I discovered and read [Material Design](https://material.io/), I figure out how companies choose their colors. So, instead of hand-picking values randomly, create your palette from the beginning, there are dozens of online generators that can help you to make your decision. You can choose from 6-8 shades and expand when you need more colors. - + - Choose one or two font families: + Choose one or two font families: It's hard to achieve consistency in UI and most of the time **over designing** is the reason behind losing it. Having more than two font families will make your brand less-memorable like the logo and the content becomes more inconsistent for the reader. Obviously, choosing the font family is very hard in the early stage and my recommendation is **to choose the one that fits the personality of the product.** - - Systematize font size: + Systematize font size: Similarly, don't do what I was doing by adding or reducing 1px until it looks perfect. You may waste 2 hours without taking a decision. Instead, create a stylesheet for your typescale in advance. - - - Systematize icon sizes: + Systematize icon sizes: Defining a system for the sizes of the icons in advance will save you time later. @@ -256,11 +242,9 @@ For example, you can constraint yourself by 4-based or 6-based scale. Your optio 12px, 16px, 20px, 24px, 36px, 48px, 64px. - - - Sytematize opacity values: + Sytematize opacity values: Opacity values confuse me a lot because it's so hard to see the difference between them. @@ -270,13 +254,12 @@ Personnally, I choose a 5-based opacity-scale and I limit myself by 4 values: In CSS3, this is equivalent to: - ```css - opacity:0.125; - opacity:0.25; - opacity:0.5; - opacity:0.75; - ``` - +```css +opacity: 0.125; +opacity: 0.25; +opacity: 0.5; +opacity: 0.75; +``` @@ -302,16 +285,13 @@ Before I download the template, I was checking the number of **pages**, the weig I was asking myself: - How long will that page take to build? - - How will it looks consistent with other pages? + How long will that page take to build? + How will it looks consistent with other pages? - How can I extract the components and build new page with them? - - -I was considering the page as an **isolated**, **uniform** thing. The fact is the **components** or the **elements** that make that page **consistent** are the **uniform**, **isolated** and **quantifiable** thing. + How can I extract the components and build new page with them? +I was considering the page as an **isolated**, **uniform** thing. The fact is the **components** or the **elements** that make that page **consistent** are the **uniform**, **isolated** and **quantifiable** thing. @@ -321,7 +301,7 @@ The image above describes my mindset about web elements. On the left, It's the * Brad Frost released a book called: The Atomic Design. When you read this book you'll discover how Brad Frost explained the web design inspired by the world of Atoms. What's matters for us now, is how to create **modular** user interfaces that become **maintainable** in the future. -Making your UI modular means breaking the large and complex visual explorations into smaller chunks, called **elements** or **components**, which save us **time** and make the user interfaces more **consistent**. +Making your UI modular means breaking the large and complex visual explorations into smaller chunks, called **elements** or **components**, which save us **time** and make the user interfaces more **consistent**. With the rise of new methodologies for architecture CSS3 such as BEM, OOCSS, and SMACSS, and the modern frameworks such as Bootstrap, Semantic UI, and Foundation, designers and developers spend less time to design **scalable** and **maintainable** user interfaces. @@ -329,11 +309,10 @@ So these frameworks address the need of **rapid prototyping** by providing **cus However, even these front-end frameworks provide a _specific_ solution for speed up the development, the end-user interface will be the same for different brands! -This is one of the cons of these frameworks, because everyone uses the same **components** and **layouts** to design the page. Imagine Facebook, Amazon, and Apple use the same UI framework to build their user interface, you'll find the same UI with different colors! +This is one of the cons of these frameworks, because everyone uses the same **components** and **layouts** to design the page. Imagine Facebook, Amazon, and Apple use the same UI framework to build their user interface, you'll find the same UI with different colors! Furthermore, creating **customizable** components using these frameworks means following their **conventions**, **code structure** and **styleguide**. So the developers need to understand the architecture and the API of these frameworks which means invest more time for learning. - ### Design Systems, The future of UI development Do you know [Material Design](https://material.io/design/)? If yes, this is what I'm talking about. @@ -342,36 +321,32 @@ Do you know [Material Design](https://material.io/design/)? If yes, this is what > A set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. Patterns are the repeating elements that we combine to create an interface: things like user flows, interactions, buttons, text fields, icons, colors, typography, microcopy. Practices are how we choose to create, capture, share, and use those patterns, particularly when working in a team. -So instead of consuming built-in UI patterns from Bootstrap, you'll design and develop your own patterns by creating your own **standards** and **style guide**. If you're deciding to create a social media app, for instance, you'll need to create your own **like**, **comment**, and **share** components that distinguish your application from your competitors. Also, if you'll create **Data Visualization** platform, -**charts**, **progress bars** are the most potent component you need to build your user interfaces. The idea is instead of creating **templates** each time, you'll create your own **UI System** that empowers you to build several products by influencing brand factors. These design patterns will create a mental model for your users and customers. +So instead of consuming built-in UI patterns from Bootstrap, you'll design and develop your own patterns by creating your own **standards** and **style guide**. If you're deciding to create a social media app, for instance, you'll need to create your own **like**, **comment**, and **share** components that distinguish your application from your competitors. Also, if you'll create **Data Visualization** platform, +**charts**, **progress bars** are the most potent component you need to build your user interfaces. The idea is instead of creating **templates** each time, you'll create your own **UI System** that empowers you to build several products by influencing brand factors. These design patterns will create a mental model for your users and customers. #### But what are the benefits of design systems? Before we use any technology or approach we need to know its benefits. Let’s take a look at the many ways a design system can be a much-needed painkiller for your growing pains. - Consistency: - + Consistency: Standardized components used consistently and repetitively create a more predictable and easy to understand the application. Standardized components also allow designers to spend less time focused on style and more time developing a better user experience. - Prototype faster: - + Prototype faster: When your product grows, you need to delight your customers by delivering new features. In the past, this means producing new code and start the development from scratch. But with a design system in place, you need only to iterate and integrate your UI patterns together to develop the feature. + Quick iterations: - Quick iterations: - - The design system reduces effort from hundreds of lines of code to as little as a few characters. This makes iterations quick and painless, and experimentation much faster. - +The design system reduces effort from hundreds of lines of code to as little as a few characters. This makes iterations quick and painless, and experimentation much faster. In conclusion, design systems are not a fad or even an untested hypothesis. For the design to find the scale necessary to match the rapid growth of technology, component-based design and development is a proven and dependable solution. I've tried to show you the power of design systems and their impact on user interfaces. If you want to learn in-depth about the design systems, I'd recommend these books: -→ [Invision Design System Handbook](https://www.designbetter.co/design-systems-handbook) +→ [Invision Design System Handbook](https://www.designbetter.co/design-systems-handbook) -→ [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) +→ [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) [Edit →](https://github.com/MenaiAla/You-Dont-Know-UI/pulls) @@ -379,3 +354,60 @@ I've tried to show you the power of design systems and their impact on user inte

--- + +
5. Throw the responsive design in the trash +

+ +According to [Invision article](https://www.invisionapp.com/inside-design/mobile-first-design/), there are **two billion**-51% of the global population access the internet only from their smartphones. + +By 2025, the number will jump up to 72,5%. So, if you're not designing for the mobile, your business is in trouble and your users will leave your platform. Maybe not today, but for sure tomorrow. That's why you should invest **80%** of your capital in the mobile development. It's the present not the future! + +For now, I'll not define the mobile-first design strategy for you, or how it's important in terms of **accessibility**, **usability** and **user experience**. But, I'm going to talk about the **obstacles** you'll face if you start your **design process** from **largest screens** to **smallest screens**. In other words, the **responsive design**. + + + +You may wondering why I emphasize the **mobile-first design** and why you should put your effort on it. + +The answer is easy : Mobile-first design is more limited. + +When you start your design for the smallest screens, you choose the **most important** or in other words the **must-have** features for your users. But what if you start your design for the largest screens ? + +Usuallly, when a website is developed, the design is created in compliance with the assumption that users will use it from the desktop. After that, developers modify it to fit different screens on various devices. + +Personally, I'd say this is the bad development experience I was doing in the last couple of years, and let me expose to you the **disavtanges** of this process: + +**1. Lost a lot of visual elements.** + +**2. Hard to adapt all must-have features.** + +**3. Lost quality of the images.** + +**4. Slow animations.** + +**5. Reducsing the number of features instead of increasing them.** + +For example, if a UI engineer sits down to prototype or sketch out an MVP (Minimal Viable Product), and he adapts the **responsive design** in his workflow by starting with largest screens, the probable mistake will fall in it is trying to **fill all the space ( layout )** with more UI elements and include more **useless features** that destroy the **visual hierarchy**. + + + + You don't need to feel the whole screen + +Remember when **960px** was the de facto layout width for desktop-size designs? These days you’d be hard-pressed to find a phone with a resolution that low. + +So it’s no surprise that when most of us open our design tool of choice on our high resolution displays, we give ourselves at least 1200-1400px of space to fill. But just because you have the space, doesn’t mean you need to use it. + + + +If you only need 600px, use 600px. Spreading things out or making things unnecessarily wide just makes an interface harder to interpret, while a little extra space around the edges never hurt anyone. + + + +Give each element just the space it needs — don’t make something worse just to make it match something else. + + Shrink the canvas + +If you’re having a hard time designing a small interface on a large canvas, shrink the canvas! A lot of the time it’s easier to design something small when the constraints are real. If you’re building a responsive web application, try starting with a ~400px canvas and designing the mobile layout first. + +

+ +--- diff --git a/assets/FACEBOOK_NEW_DESIGN.jpg b/assets/FACEBOOK_NEW_DESIGN.jpg new file mode 100644 index 0000000..2514cec Binary files /dev/null and b/assets/FACEBOOK_NEW_DESIGN.jpg differ diff --git a/assets/PRO_TIP_5_1.svg b/assets/PRO_TIP_5_1.svg new file mode 100644 index 0000000..cbae680 --- /dev/null +++ b/assets/PRO_TIP_5_1.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Responsive Design + + + + + + + + + + + + + + + + Mobile-first Design + + + + diff --git a/assets/PRO_TIP_5_2.svg b/assets/PRO_TIP_5_2.svg new file mode 100644 index 0000000..2f2e252 --- /dev/null +++ b/assets/PRO_TIP_5_2.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Scale down + + + + + + + + + + + + + + + + + + + + Scale up + + + + diff --git a/assets/PRO_TIP_5_3.svg b/assets/PRO_TIP_5_3.svg new file mode 100644 index 0000000..2e0a10a --- /dev/null +++ b/assets/PRO_TIP_5_3.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Start your search + + + + Add post + + + + + + + Justin Timberlake + + + 8 mins • + + + + + + 25 + + + 25 + + + 10 + + + + + + + + + + + + + diff --git a/assets/PRO_TIP_5_4.svg b/assets/PRO_TIP_5_4.svg new file mode 100644 index 0000000..8bd182c --- /dev/null +++ b/assets/PRO_TIP_5_4.svg @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Start your search + + + + + Add post + + + + + + + Justin Timberlake + + + 8 mins • + + + + + + 25 + + + + + + 25 + + + + + 10 + + + + + + + + + + + + +