Landing Page Sketch
My sustainable theme is on UN Goal 12: Responsible Consumption and Production. I wanted to focus on the topic of Plastic Waste so I found an organization that supports to end plastic pollution.
https://www.beyondplastics.org/
Their website is flooded with information and I want to be able to redesign it to be more modernize and easy navigate.
This was my first sketch design on my landing page. At first I was going to design my own website but after finding Beyond Plastic, I wanted to redesign an existing website which I talk about more on my Web Design Page.
I want to keep this image to show my progress in my UX/UI journey.
I decided to redo it using Adobe Illustrate to make it more accurate for the redesign.
I got inspiration from landing page examples on Pinterest for this sketch.
Inspiration on Pinterest
Beyond Plastic-
Mock Up Land Page
Since Beyond Plastic has a lot of information they want to advertise, I think a header slideshow will work best for them to organize what they do as an organization (Events, Donation, Learn More, News, Act Now etc.)
This organization wants Users to Donate, Sign Up for Emails, advertising the book they just made, and Learn more about Plastic Pollution. It has a lot of call to action.
LOGO
Before and After
I decided to refine their logo by enhancing the colors to match the color palette I’m going to use for the web design. The color palette is shown in my UI Design Page.
Header
I decided to simplify the navigation bar and add sub-categories to make it more organize.
For this part of the landing page I want to add UX animation by making the bottle going into the recycling bin.
About Page
Mock-up Design for About Page:
Using the original design from the Beyond Plastics website, I wanted to have the same information but with a visually cleaner and colorful design.
Final Design for About Us Page:
I kept the navigation bar the same as the home page but wanted to add a wave design below it. I wanted it to match their logo with the same colors and a similar flow.
