top of page
Obesity website
sketches
I needed to create a interactive website that acts like interactive screen at a museum or in public about my Obesity Poster.
Â
I had initially planned out the basic information I was going to display, but I had underestimated the amount of information I would decided to put in these pages.
Â
I unfortunately sketched in all neon pens, sorry for the bright colors.Â
Â
Final Page Layouts
Home Page
This site is created in Figma. The home page reflects the basic synopsis of what the project is trying to educate and different doughnuts as buttons to the different pages that talks about the different topics.
When you click on one of the doughnut it will take you to a separate page about said topic. When you get on these pages the "O" in Obesity will change to whatever doughnut (or orange) you clicked on.
On the bottom of these pages will be a Glaze doughnut button that will redirect you back to the home page. Clicking the "Obesity" icon will also bring you back to the home page.
*Disclaimer that the wood background is supposed to stay glued to the screen so it looks like only the text is moving thus why it does not stretch all the way down the page*
Â
These three pages follow the same pattern of hierarchy. Large questions of subtopic is in the stylized font "Kulman" in yellow. The text answering the question is in sans serif "Acumin Variable Concept" in white. If there are smaller categories in the subtopic then they are in red to clearly separate the text. Lists are in yellow to differentiate and draw attention after long text.
Â
The "Obesity & Diet Myth" page follows a different format. The myth mentioned is in a large size with the font "Kulman". Its color is either red, yellow, or green. Red if the myth is wrong. Yellow if there are both truths and false information. Green if the myth is true. The text explaining why the myth is or isn't true is in small white "Acumin Variable Concept".
Â
The "Solution" page main colors exclude red from the page to signify that this is a completely different subtopic compared to the rest of the pages and it's how to become healthy. Large points are in yellow "Kulman" but the smaller subtopics instead of red are in a bright green, mirroring the other pages. The orange instead of another doughnut is also supposed to communicate that this is a very different subtopic.
Â
bottom of page