Final Version
The design process turned out to be a lot more involved than I had first imagined. Instead of trying to make the design of the blog article, I instead tackled the challenge of creating two pages (home page, and the blog list page) for both desktop and mobile.
Some of the more challenging aspects of using figma included learning how to use auto-layouts and components to make repeatable designs effective.
On main challenge with the existing design of the main page for me was also to figure out how to make a cohesive design for the articles page since the main page design would leave too much negative space.
Desktop
Table of Contents
Mobile
Approach
Ideas
Initially I had a few ideas including various set of tutorials inspired by the style of bulletjournal.com or maggieappleton.com
Although the details of what I specify are not important since there are a number of topics I've always meant to cover, what is of personal meaning and interest to me is the layout, structure and presentation of a tutorial, or a blog.
Topic
How I adapted Roam Styling to write standup comedy.
- Maggie Appleton's Basic Roam theme
- Chrome Extensions: To support custom css and javascript overlayed on the page.
- Additional CSS Code: To style existing components based on my personal preference.
- Additional JavaScript code: To handle adding of processing and modification of DOM elements that I otherwise would not be able to.
Inspiration Article for Reference
Inspiration
Certain elements I love include Maggie Appleton's excellent use of typography, clear readability and organisation of content, as well as the annotation / footnotes on the side.
Requirements
I also currently have this website that I've been meaning to work on but have not gotten around to. The biggest challenge is the layout and design of the blog that I have never been able to get around to focusing on.
- Clean Design
- Strong Typography
- Should Accommodate Tutorial Style Articles
- Should Accommodate Written Pieces (including letters, poetry)
