The redesigned Don't Code Tired is now live. This article wraps up the series with a look back at what I learned and what things are still outstanding.
Key Things I Learned
I am not a designer. Ok so I knew this anyway, even though I learned heaps from this process if I were to undertake it again I would at least get some feedback along the way from a designer.
I love SASS
CSS Media Queries are awesome. It is so easy to apply different styling based on browser width, the hard bit is deciding what you want to show
I Love SASS. SASS really does make writing CSS a more pleasurable experience. Even though I feel I have only just scratched the surface of what is possible I am hooked and will be using SASS on any project I can in the future.
- Design concepts such as: mobile-first, typography-out, designing with personality, content inventories, etc.
- Basic colour theory
- Controlling mobile browser rendering and zooming with meta tags
- Custom fonts using @font-face
- New semantic HTML5 elements
- ARIA Landmark Roles
Evaluating the Final Design
I though it is good to look at the final outcome and compare it against what I initially set out to do.
"DontCodeTired's voice is friendly and personal, it's speech-like and somewhat casual using contractions and occasional slang over formal and stuffy speech. It doesn't try to be overly cool but is not afraid to have some fun on occasion (as long as it doesn't detract too much from the information)."
I think the the voice of the messages, prompts, navigation, etc. upholds this design goal. Some existing articles in the blog may not, but I should refer to this when writing future articles.
"DontCodeTired's colours are clean and mostly understated. Where colour highlights are needed they are saturated and bright. Solid blocks of colour are preferred to gradients."
There are no gradients in the final design, but the final colours I chose are not "understated", quite the opposite the purple is quite bright. I'm not sure how I feel at this stage, I may revisit the colour palette at a later date, but due to the awesomeness of SASS I can just change a few variables and the whole colour scheme will be updated.
"DontCodeTired is all about the article content. Main content typography will use clean readable sans-serif fonts with a predictable type ramp. DontCodeTired's overall design will be based heavily on the readability of text."
The chosen fonts meet the above brief, if I have one criticism it's that the type ramp for headings could be a little better. The first few heading levels are good, but at the lower levels there is not much difference in size.
"Taking some ques from Metro design, interface elements will mostly focus on content over chrome, elevating the article content to the fore, relegating non important navigation and other elements to the ground."
This design goal has been well respected throughout the design. There are not a lot of boxes to "constrain" content, instead proximity and relative size are used to group content.
- There is too much empty space in desktop version in the header
- The header colour may be too bright
- Tweet button on the home page is showing the same value for each post
- Max width should look prettier once the browser expands beyond this point, perhaps centred or other design element to fill the space
- The SASS needs refactoring
- Content still transmitted to mobile devices even when not shown
- Tag cloud and "things I've built" section need to be able to be accessed somehow on mobile devices where the sidebar is hidden