Vol. 029 - Spice up your case study layout

Hi designers,

Welcome to Vol. 028 of the UX Jetpack Newsletter, where I share job searching tips weekly. This week we are talking about:

1. Spice up your case study layout
2. Where can you get more experience?
3. 60-30-10 rule for UI colors
4. Realtime Colors

If you enjoy those tips, please consider sharing them with your friends. They can sign up at https://uxjetpack.com/newsletter

Spice up your case study layout

Hiring managers are looking through hundreds of portfolios, it can be quite boring if all the portfolios share the same layout.

Don’t repeat the same structure,

add some more variations.

Bold quote in the center.

Card layout for bullet points.

Full width banner image as a separator.

One thing to pay attention to is not to make the layout too random, still keep a good rhythm and balance.

You want to make it easy to skim but still engaging to read.

Where can you get more experience?

Three ways to gain work experience for your next job:

1. Do volunteer work There are websites like DemocracyLab, Catchafire, and UX Rescue that offer wonderful volunteer experiences. They don’t always have design projects, but it would be a fulfilling experience if you could help for a good cause while building your skills.
2. Join Tech Fleet or Chingu Tech Fleet and Chingu help you team up with developers and product managers to build projects together. This is a great chance to practice your teamwork skills.
3. Find partners to build projects together If you are venturesome, finding partners to build a startup together might be for you. You can find partners at https://www.indiehackers.com/group/looking-to-partner-up.
   It won’t be easy to build your own product, but if you can’t find a job, why not build your own?

60-30-10 rule for UI colors

What's one mistake designers make in their UI?

They use too many colors.

Color does grab people's attention,

but too many of them can only distract people.

One rule I like to refer to when designing UI is the 60-30-10 rule.

60% base color, 30% primary or brand color, and 10% accent color.

The base color is usually white or black and should take up the majority of the space.

The brand/primary color is used to highlight important information.

The accent color is there to add some extra flavor and make the interface less monotonous.

This is certainly not the only way to use color.

Once you are comfortable with using color like this,

then you will know how to break the rules.

Realtime Colors

Next time you need to pick a color or font for your website project, you can use Realtime Colors to preview your color and font on a real site. It's much easier to match and compare.

You can share the link with your clients to help them visualize the color, and there are Figma and VS Code plugins to export the colors. Such a powerful tool and the best part is it's free.

https://realtimecolors.com/

You can check out how Juxtopposed built this site on the YouTube channel. https://www.youtube.com/watch?v=HAlIWRcldoc

If you join my newsletter, you should check out my free crash course on job searching. Be ready to land your dream job in five days.

Ryan Yao

Say hi 👋🏼 on LinkedIn or ☎️ book a 1 on 1 with me