Continuing from where I left off last post, I spent a bit of time researching the current schools of thinking for web design and how much of it I can reasonably accomplish. Turns out, other than responsive design (which I’m still not a huge fan of), a lot of the thinking has been iterative and focused on transplanting app-like animations and functionality. Since a blog shouldn’t be an app, I was happily ignoring the advice and distilled what I could find on improving readability.
Again, the source is here, and some additional credits and highlights:
- Hongkiat. This design blog kept coming up as I searched for design inspiration and examples. While the “[N] Things to Improve your [X]” is well-worn blog click-bait, it is effective in consolidating and summarizing a bunch of examples and screenshots.
- The Golden Ratio Typography Calculator. I had always known that font size, color contrast, and line length played major parts in how pleasant an article is to read, but this article gave an argument beyond subjective testimonials. The mathematical elegance and an actual calculator to determine optimal values were just added bonuses.
- Subtle Patterns. Flat designs may be all the rage, but I still think there’s value to adding a bit of color and texture to an interface. This website offers a set of high-quality, repeatable patterns that take UI elements beyond solid blocks of color, and I wish I had known about this resource a lot sooner.
- 960 Gridder. Grid systems keep things aligned, and as I learned early on from Square’s designers, keeping columns and text aligned is pretty important. This bookmarklet just draws vertical lines onto a webpage, and let me the adjust CSS values one-pixel-at-a-time on screen.
- Color Scheme Designer. I don’t pretend to fully understand how the color wheel works, but I do know that I’ve searched for complementary colors and certain color combinations are just revolting. This app takes the guesswork out of picking colors, and I’ve had good success in making use of the colors that fall out. For this design, the major colors are #859FB8, #C0AD6B, and #ADDECC.
All in all, I’m pretty happy about how this one turned out, but of course there is always room for improvement. If you notice anything egregiously offensive, let me know via the contact form or comments.