How to Think Like a Visual Designer
Steven Schoger

Going to be using a real-world example: Tuple (pair programming tool for Mac, replacement for Screenhero). It'd make a great case study

Ben sent a Google Doc with all the content. Content is design; let content dictate the design rather than the other way around.

Put together a demo video, testimonials, common content. Going to explore ways to structure.

If I were to give it to a developer, then probably look blocky. Still has heirarchy, but not necessarily polished

Explore more than one layout idea

Developers tend to center everything (headings, features, testimonials, etc.). But there's a lot of ways to do it (like, you know, left-aligning it). Having trouble visualizing it? Recommendation of land-book.com of different ideas

Explore more than one idea! Easy to over-invest. Looking for something more abstract, so did side-by-side approach and illustration.

While not everyone can draw, can get someone else. You could also look at unDraw. Showed a tutorial of drawing an owl (Step 1: Draw two circles. Step 2: Draw the rest of the owl)

Devs rely a bit too much on grid, wnat to shy away from absolute positioning, but little details can make it sharp

Also, keep an eye on font choice. Playful, rounded font. Neutral, sans serif font.

Choose good fonts

If you see a good font somewhere, you can look up the font-family and search on Google for the foundry

Adjusting font weight (bold, semi-bold for header)

Choosing color

I just stick with Tailwind color set. Had nailed the colors down once, hand-picked, but

Border radius

More serious, drop the border radius. More playful, more rounded radius

Use color to also denote weight and hierarchy

One thing I'm seeing more is that using more space, which is good, bravo

Going to bump up input height to give placeholder and input more room to breathe

Fine line between color grays (want it to stand out, but not look disabled)

For the video, some folks use full-screen video, but you can use space and color to do better contrast. Reduce the size of the video greatly, but be able to click on it and do a more full-screen.

Find a good frame, create a click target feeling. Hide video controls, add your own play button, add box shadow to the image

Hierarchy doesn't need to be top-bottom, can also do left to right

   [ Image ] Copy

Dark indigo background in band

Don't use straight-up gray on a colored background

It looks washed out otherwise

Overlay elements to create layers

Like, negative margins on background, image is now taller than its container. Adjust font size accordingly

Now for the feature set...features organized in three or four columns, huge icons

Don't scale up icons

Things like regular icon fonts are intended for smaller contexts. Like

Align all the things

Center alignment for short blocks of text or headlines, otherwise, left-align. Making feature text a little lighter for better contrast against the header

streamlineicons.com, hellopixi.com, heroicons.com

Switch up the layout

Instead of three-column feature set, maybe stacked on top of each other (for example)

 [Icon] Feature     |------------------------------
                    |
 [Icon] Feature     | Tall Image, testimonial...
                    |
 [Icon] Feature     |

Italicize quotes, adjust font size. Being creative with quotation marks, using different color, maybe bigger and tucked behind the quote itself.

Removing twitter styling, replace with image of Adam Wathan, source, looks more legit

Since we used indigo in previous section, maybe slightly off-white. Adds distinction without a full-on border

Now we have more differentation

Now let's look at the other testimonials. Let's apply similar styling (twitter icon, no top image)

Dark mode does not mean inverted

Flat design, white objects feel closer, darker objects feel further away (lighting effect).

Common mistake is to invert everything. But with dark UIs, we want to keep using the same visual cues. Lightest element in light UI still needs to be lightest element in dark UI

So for foreground/background, you do want to invert.

Lastly, these avatars. Can't change the Twitter avatars necessarily, but I'd start by adding a white border around the avatar to visually separate them

I like to end on a dark footer, gives a sense of completion

Site is live at https://tuple.app/

If you enjoyed the talk, recommend refactoringui.com/book