Yesterday we continued our study of design in the post https://adamcross.blog/2019/06/16/more-design-fundamentals/ . Toward the end, we made a codepen example at https://codepen.io/adamcross/pen/JQXKvL illustrating what we had learned about color and trying to use the Fibonacci sequence in our design choices. Overall, the design looks adequate for something like a page in a school textbook. It’s boring, but I don’t think it’s inherently a bad design. It does feel cohesive. I like the color pallet, but I don’t think the use of color is bold enough. I think using the Fibonacci sequence had no effect at all. I’m not convinced there was any point in that.
I’m going to fork this codepen example and try to make some improvements. The new fork is here: https://codepen.io/adamcross/pen/ZdWaMe.
I’m pretty sure the lines under the heading text are what so strongly remind me of a textbook when I look at this, so those have to go. Let’s also get rid of the serif font. It already looks less like a textbook.
Before moving much further, let’s bring Bootstrap into this and start making it responsive. I put the contents inside a Bootstrap “container” div, and I replaced my custom-rolled columns based on the Fibonacci sequence with Bootstrap’s responsive grid system. That alone is a huge improvement in making this page flow to different sizes. Also, I don’t miss the Fibonacci stuff at all. But I am still using Fibonacci for font sizes.
Next I want to add one of those three-column previews preview blurbs about what you will find here. I think this will offer a good opportunity to add some color and more visually interesting things. And let’s browse the web for a bit to see what interesting stuff we can find.
Take a look at Yahoo above. As always, Yahoo is an example of just about everything we should avoid. Huge sticky header. Weird unnecessary graphic of a person with a lawn mower. Busy. Over-crowded. Almost no white space on the page. A tooltip I didn’t ask for that is blocking the content.
Google is the very model of simplicity. They don’t even use colored buttons. Make no mistake: those buttons are custom, but the color scheme is neutral. It’s clean, and it’s nice, but this would only work for a very simple interface.
If you are not in Europe, I recommend not bothering people with this stupid message about using cookies. European laws are not binding in other places.
Ebay is using an extremely annoying image carousel on their front page right now. It moves too fast. Generally speaking, I don’t like things on web pages to move unless I interact with them.
The Ebay layout is quite simple. It’s mostly built around full-width rows containing thumbnails of products for sale. There is no discernible color scheme. Black text on white background. Blue search button. Eggplant notice bar. Ugly yellow-green notice bar. Later there’s some cyan. There’s nothing here I would replicate.
I think I finally found a page with some interesting visuals. Let’s take a look at css-tricks: https://css-tricks.com/almanac/properties/a/align-items/ .
Some of this doesn’t look great, but at least I see some visually interesting stuff here. I see almost-black and white neutrals with a bright orange for contrast. It’s a simple but effective color scheme. The contrast color appears on the active tab above, on the hash sign next to header elements, and (unfortunately) as the handle on the scrollbar. (I’m not a fan of that stylized scrollbar.) They’re using a similar but lighter color to indicate inline code, like where you see align-items.
When I mouse over a link, the “hover” style coloration of links look like a gradient of fire-colors: light orange to a deeper red color. Further down the page there are some buttons, and the buttons also have this bright orange color.
At the very top is some interesting imagery and iconography. Also note that little right-arrow beside “join the conversation”. That kind of thing is a way to add more contrast color to a page. It’s subtle, but I like it.
Overall, I don’t love this design. But at least it has a little character, and the attention to detail is nice.
Remember to never use a sticky header. If you learn nothing else, learn that.
Here’s an idea from above that we can apply to the template we are building. Take a look where we are right now, above. Instead of using a flat color for those 3 column backgrounds, what if we use a gradient? It’s easy to make a gradient look bad. Let’s make it very subtle—just two slightly different colors. The result is livelier. Subtle, but it makes the page look ever so slightly more interesting. That is a win.
Let’s also add a header to the page with some dummy navigation buttons. We will begin with a Bootstrap 4 navbar template and try to make it match our style and color scheme.
Adding some box-shadow makes it a little more interesting. Take a look at the progress we’ve made now.
I think it’s starting to look pretty good. It’s basically just a two-color pallet. We could add some more nearby colors for a more complex look, but that isn’t a high priority. What’s really lacking from this now is imagery and/or iconography. It may be hard to make a “template” for this because imagery is very specific.
Let’s borrow some imagery from the web that fits our color pallet and theme. Really these are just stand-in images. Codepen does not offer a way to upload image assets for use in my template without upgrading to pro, so I’m going to put them here on my blog and link to them over there.
I’m going to use these images in the three-column thumbs that are currently that scarlet-magenta color. When I fit these images into them, they don’t have even heights. Personally I don’t think that is a problem unless there are very large differences. In this case, I do introduce large differences by using title text that takes up a lot of space.
How can I make these columns all take up the same amount of vertical space. Currently I’m using Bootstrap 4. These columns are contained in a Bootstrap “row” div. In Bootstrap 4, these row elements have display “flex”. Thus, we can use flex to customize the appearance further.
Another problem is that the edges of these images look too naked. Should we add borders? Box-shadows? We add a subtle box-shadow, a very thin border the same color as the nav bar, and soften the corners just slightly.
Let’s make these entire thumbnail blocks links. I wrap the image, title and everything in an anchor wrapper. This has the effect that when I mouse over one of them, it underlines the text. This is an example where I think it’s ok to override that behavior. Let’s strip off the a:hover underline decoration.
That said, I do want some subtle hover behavior. I’ll make a slight change to the box-shadow behavior on hover.
I think this is a good stopping point for now. The page looks decent. Here’s the link to see the full page now: https://codepen.io/adamcross/full/ZdWaMe .
adamcross.blog 