Category: Product & Design
MasterOfThought.com is a reference website for avid lifelong learners and people who care more than average about self-development.
The process I took highlights two general design principles:
Follow the cyclical, progressive process up the product architecture. I followed the process I always do ensuring a strong product foundation before getting into visual design. Most of my time was spent in the beginning ideating on strategy, pulling the data together, and setting up the code.
Build to think, think to build. Once I got going, this project felt more like writing a book because the product is the content. Oftentimes authors don’t know exactly what their book is really about until towards the end of their completing it. It was a very iterative process and most of the time was spent on the content requirements, information architecture, and information design.
Adobe XD, Adobe Photoshop, HTML, CSS, Twitter Bootstrap, SVGs
The project began with me simply feeling a need to create a new online copy of As a Man Thinketh. This is a book I have read more than 40 times in my life - more than any other - so it was important to me that it had an online copy whose style guide and design quality gave justice to the text. None of the online copies of this master work achieve this. For reference, here are the three available versions online:
After finishing the As a Man Thinketh portion of the site, a new need emerged from a different project of mine - Learner Interests. Learner Interests is a resource for parents to find learning ideas that are relevant to their kids’ interests. It’s filled with learning ideas that nudge kids toward K12 subject matter in ways that are more interesting to them. As Learner Interests has developed, parents have been interested to know what overarching educational framework is being used to develop the learning ideas. In other words, to what end is the learning material on Learner Interests taking its users?
This is similar to another question I’ve been eager to answer for myself. What does a solid general education look like? What do I hope to provide my own kids before they reach adulthood?
It felt natural to marry this goal of defining what a solid general education looks like with MasterOfThought. Learning is about more than accumulating knowledge - it’s about achieving greatness, however that may be defined for one’s circumstances. To create the best resource possible for interest-driven learning, I need to have a strong framework for general education both defined to myself as well as for others to reference. The spirit of James Allen’s book of self-mastery fit well with the vision. Master of Thought is a reference resource on self-mastery I will develop in parallel to Learner Interests for myself, the parent users of Learner Interests, and whoever finds interest in the project. (At least, that’s the direction of the project for now.)
Here’s what I put together in XD today: https://xd.adobe.com/view/b63a34b2-d078-430d-98b0-01371e2749aa-e369/
Here’s the product architecture of Master of Thought as I now see it.
A resource for right thinking and self-mastery.
Compiled resources and visualizations.
A site map: V1, V2, etc.
Print design. Page variations:
- Home page
- Table of Contents page (of a Public Domain Book)
- Table of Contents page
- Chapter page
- Book page
- Stand alone section
19th century industrial monochromatic print inspired, but with a more modern inspired primary color of teal. Teal captures the spirit of personal rejuvenation and clarity of thought better than red does.
Teal combines the calming properties of blue with the renewal qualities of green. It is a revitalizing and rejuvenating color that also represents open communication and clarity of thought. For Tibetan monks, teal is symbolic of the infinity of the sea and sky, while it is the color of truth and faith for Egyptians.
I learned about how to make illustration-inspired photography. This video helped me the most.
I created a few new concept and data visualizations.
- Originally the intention was to switch to Adobe XD to design the surface layer elements of Master of Thought. But by the time I had iterated through content requirements and information architecture with my prototyping, I had already established enough of the aesthetic elements to move forward on visual design with CSS. This project turned out to be different than the design process I take with applications, because this is closer to classic print design than it is software design.
- I refactored my CSS in preparation for implementing LESS. I organized my CSS.
I spent a good amount of time studying decorative calligraphy this morning and added SVGs I bought from Etsy and then customized for the site. Here’s the latest style guide: https://xd.adobe.com/view/9ed834ce-d81a-4d31-8f56-ad6e0f0431c0-cb8b/
At this point, the design of the site, thought it has a classic print style, looks a bit feminine. I think that’s ok because the majority of Learner Interests users are moms and because having a site so centered around As a Man Thinketh might be a tad alienating to women today.
- Implement in less
- Get to those other sections (Cognitive Biases, Logical Fallacies)