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