Interface Design

I find the best way of learning new skills is to have a project you can try new things out on. It’s a pity that, there wasn’t enough time for taking one of the online data chart tutorials (e.g. Bubble Tree Data), and than step by step breaking it apart to master it during the tutorials. I would quite enjoy doing that.

Section 1. “Dangerous Creatures of the Ocean” with ‘Dive In’ ghost button. Simple design. Left side navigation panel.

Section 2. World map with outlined 5 ocean gyres. Orange circle indicates size and location. Orange dots (for my target audience) indicate name of the location of the most ‘dangerous creatures in oceans’ and size of the area they cover. When scrolling down, location bubbles zoom out of the viewport.

Section 3. This part indicates how long some of the species live. Idea of raising a question (target audience); what animal species can live so long? Does shark lives 450 years?

Section 4 – 8 Static design. Image representation and data about top 5 most dangerous garbage found in the oceans and on shore. This is were my target user discover the truth about the “dangerous creatures’. 

Section 9 Interactive elements of popping out bubbles, filled top 5 found in ocean garbage. Data representation in size of bubbles equals the amount of pieces pull out of the oceans each year.

Section 10-11 All the plastic in the ocean measured in whales. Fun way of representing data of an enormous amount of plastic that floats under and on the surfer of our oceans. Small whales reveal hidden elements of ocean trash. One of the last whales – when hover over, shows the amount of whales that make exactly 8ml tons.

Section 12-14 Sections indicate the direct impacts of humans’ floating garbage and marine debris on marine wildlife. Seabirds, sea turtles, fish, and marine mammals often ingest small pieces of plastic that they mistake for food. I’m using easy to look at graphics to demonstrate that important issue to my target audience

Section 15-16

‘Call for Action’: THINK. CLEAN UP.  RECYCLE. EDUCATE.

I was going back and forward to Assessment 1 – Problem ID & Design Solution to stay focus on my project aims and project stakeholders.

Design Next step was to design visual style and hierarchy. Needed to determine which elements will dominate my user’s attention; made decision on typography, colour palette and visual elements, images and graphics. Early on, prepared visual Style Guide for the project, what really helped me out to create additional visual elements, page background, ocean pollution elements (plastic bottles, bags etc.), affected animals (turtle, sea) and simple ‘call for action’ icons. I was focus on industry web design trends in 2015 such as bold typography, storytelling, interactive elements, flat design and parallax scrolling.

Development I started with creating simple sketches and thumbnail visuals (UI 1, UI 2, UI 3, UI 4) for my web layout, navigation, info graphics, charts and data elements. When had decided on layout, I was able to place design element throughout the entire page and create low fidelity wireframes using Adobe Illustrator. Then, started with Week 8 - Parallax Strolling Tutorial and created 2 top sections on my page. I had difficult time to put it all together, had issues with margins and padding and nothing was going according to plan. Using new for me, vw/ vh viewport units was a challenge as well. I managed to place my graphics and clouds to section 2 and use parallax-scrolling effect, but I wasn’t able to figure out how to design other sections straight away. So I stopped, and started with designing static web page, where had executed section by section till everything been completed. Next step was to copy interactive elements of parallax scrolling into my static HTLM, CSS and JS files.

Originally, for my ‘Top 5 trashes found in the world’s oceans’ section 9, I wanted to execute different layout with underwater bubbles (filled with plastic trash) and having fully interactive info graphics like Bubble Cloud or Bubble Data. Unfortunately, I wasn’t able to find a simpler version of that JavaScript template and I couldn’t figure out how to use any of the presented one. So by using CSS styling elements I was able to include special features, and some of interactive bubbles in my section 9. Rests of the web sections were built based on grids structure to achieve consistent look to focus more on good users experience and their journey. I used typical typography principles and created contrast with typefaces weight, colours, different sizes, and group related information items together - proximity.