We need help with establishing a design guide.

Hi Everyone,

Two months back, as three college students, we decided on starting our own startup journey. We came up with a product idea that helps content marketers generate more leads and increase conversion rates.

Currently, we are about the finish our MVP and hoping to launch it in two weeks. But, there is an issue about our product that keeps bothering us:

All of us lack UI/UX skills. Although we are working hard to improve on them, we have hard time making design decisions as a team. Therefore, I'm thinking of making a style guide kind of documentation to settle on some basic design principles.

We are using Vue Material for our frontend. So, I'm planning on exporting material components to Sketch and making a newly updated mockup with some extra documentation on typography, colors, brand assets, etc.

Where should I start? What is the best solution for our case?

Any help is appreciated,
Thanks!

Arthur Ucar

posted to

Developers

on November 8, 2019

Say something nice to KingArthur…

Post Comment

3
The Refactoring UI book has some good tips about it. I'll summarize them here:

Typography:
- Define font-sizes up front, something like 12px, 14px, 16px, 20px, 24px and so on. Gather the font-sizes you use and try to bring this list to a minimum. Since you are using Vue.js you will also use the styling system for Vue with single-file components, maybe share these values as variables.
- Avoid em units, use the variables defined
- Steal fonts from good websites (as long as these fonts are available to the public)
- Make maximum line length cap out at 75 characters
Colors:
- Make a palette of multiple colors and shades
- How to generate a shade:
- Choose a bright color you think is good and get the HSL
- Enter the colors here: https://superdevresources.com/tools/color-shades#47d193
- Choose the darkest color you want to use in your design first (primary color), then get the lightest. For me those would be: hsl(153, 60%, 45%), hsl(153, 61%, 75%) (adjust this to hsl(153, 60%, 75%)) --> Do the steps listed here: https://imgur.com/a/Fa8nPRA
- Do the same for some kind of greyscale (can be even a bit colorized) and for accent colors like success (green), warning(yellow), failure (red)
- Get used to HSL (hue, saturation, light)
- Export these colors as variables
General:
- share brand assets
- Try to design in greyscale first and then add colors
I can just recommend the book, its super good. Maybe a bit expensive but can teach you a lot :)
kevinpeters_

·
4 years ago
·
Reply
1. 1
  
  I was about recommending Refactoring UI. It's the most developer-friendly book on UI/UX design.
  
  mintran
  
  ·
  4 years ago
  ·
  Reply
2. 1
  
  This comment was deleted a year ago.
  
  DeletedUser
  
  ·
  4 years ago
1

You said you're using Vue Material, why not follow Material UI guidelines - https://material.io/design/?

JamesReilly

·
4 years ago
·
Reply
1

For colors and typography inspiration I created this
Https://www.colorsandfonts.com

I can you help in case you need to.

Michael_Andreuzza

·
4 years ago
·
Reply
1

I can help you if you would like. I just took a UX/UI design course at General Assembly and have built a couple websites as well. I can share with you some great resources for colors, typography etc.

https://www.linkedin.com/in/eric-lam-09b42434/

Lamcheezy

·
4 years ago
·
Reply