UI/UX Designing is simple.

rosan yonghang
4 min readApr 19, 2022

Yes. It is a weird click-baitty line and No, I was not just writing it to lure you in.

Think about it. Its 2022 and design industry over the years has been expanding really well. People are starting to understand why UI designers and UX thinkers are necessary. I mean just look at the job titles.

  1. UI Designers
  2. UX Designers
  3. Interaction Designers
  4. UX Researchers
  5. Visual Designers
  6. Information architects
  7. UX Engineers (Yes, we are given engineer titles too)
  8. UX Unicorn (It was a new one, courtesy to
    Courtesy of
    https://www.interaction-design.org/literature/article/the-ultimate-guide-to-understanding-ux-roles-and-which-one-you-should-go-for )
  9. etc. Because people love creating positions.

I’d rather like to summarize them all to just designers though, so I will be denoting us as designers as a whole though.

So, designing is simple. There was a time and era the early 2000s when internet was just beginning to be a part of our lives. We had people packed with Cyber Cafes opening sites they knew, becoming part of the new hot topic called Social Media and just enjoying that era. Although designing today is wayyyy better, I’d rather denote that time as the Golden Era for Creative Designing. I remember Mini Clip games, Hi5, Msn, MySpace and more where designing was such a competition. It was a time when Profile Picture placeholders were not necessarily circle. Animations could be whatever the designer wanted.
Admittedly all over the place but it was when creativity was alive.

Things changed and also for the better. Things have become much simpler. Things have toned down and we started realizing that UI/UX was not just about being creative. It was about marketing, psychology, business needs, branding and so much more. To the point that creativity held a fragment of what the overall design is meant to be.

Hence, the holy unwritten rules of designing were introduced.

  1. There shall be text on one side and an image on the other for every hero section.
    (Don’t believe me? Start noticing! Every hero section from web designs has an Image section and a Text Section.)
  2. The logo shall always be on the top left corner of the screen
  3. Navigation shall always be at the top.
  4. Margins shall be given on horizontal sides of screens because of focus!
    (My sweet spot is 8% of total width of 8 viewport width)
  5. There shall always be 12 columns to arrange cards at max.
    (let's face it, it makes sense, it has the lowest number that can be divided by 1,2,3,4,6 and 12. Place 4 cards or 3 or just 2. It will be easier with 12-column segments.)
  6. 6. Colors shall be from a material palette with 3 color selections at max.
    (I mean there are too many colors. The colors may not be perfect but temporarily they can be of great use.)
  7. The color palette shall be chosen as per the logo colors or industry specified colors (which may change with trends).
  8. We don’t use pure black. Use matte black.
  9. Only 6 typefaces shall be used at a time with typefaces categorized into headings.
    (and sans-serif to be used, #textvisibility ahmm… Poppins, ahmm Montserrat ahmm Oswald, Inter, Lato, Raleways, Helvetica ahmm)
  10. Margins and Paddings shall be a multiple of 4 (because other numbers like 17, 23, and 35 are ugly numbers.)
  11. Every industry shall have a limitation of content with every web design having a similar set of contents.
  12. Profile Images shall be circled.
  13. Whatever you are designing now, something similar has already been designed by somebody else. So, take references, and get their perspective and where they are coming from.
  14. The background color shall be white because it looks cleaaaaan !
  15. Every industry has a pattern of content.
  16. Industry-specific colors exist. Every industry has its own color.

These rules are basic and admittedly most of us are already following them. So let me focus on the brief.
The image you have is a design requirement and the client has not told you much.
Stop your thinking.
Just create a canvas with margins and columns from the lines above. 12 columns, 100px margins and 80px for navigation bar.

Canvas Style with grids

Place an image section and text section.
If you do not have a logo. Just use a Roman God/Goddess name with bold text. It looks classy. Used font Poppins with title 64px, subtitle 32px and body font 16px. Material orange color and with yellow as secondary.

Adding some shadows and some background patterns to remove emptiness.

and a design is made. Experiment with shapes and positions.

Of course, not all designs can be made easy. Some designs need thorough analysis. But it is a good place to start.

Stay tuned for part 2. ✌️

--

--