Responsive Web Design

Responsive Web Design

▫️
Prompt: Choose a topic of your interest and design a desktop and mobile layout

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

image
image

Mobile

image

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.

image

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.

image

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)

image