Interface Design

Aleksandra Szopinska/n9024565

[intefacedesign2015]

Reflection

Constructing single page website was an interesting and challenging task for me, especially when introduced to Javascript and JQuery libray elements. I’m quite impressed with JS capabilities, and actually hungry for more. When doing my research I’ve discovered endless possibilities of creating ‘yummy’ websites with very impressive interactive elements.

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.

I’m hoping to improve my we design skills and use of Js and Jq library quite soon.  Looking forward to new design challenges and Advanced Web Design classes next semester.

[intefacedesign2015]

Future Opportunities

With my single page design I wished to use more of interactive elements especially to include Bubble Cloud effect (by Jim Vallandingham) for my floating on the surface garbage bubbles, and also including more of multi-layered elements of parallax scrolling. I found it more beneficial to think more like a potential user – in this case 8-12 years old children - to gain a better insight in what I wanted to see in the design, what colours to be used, visual elements, structure and overall content.

[intefacedesign2015]

UI Design - Part 3 Long page scrolling - every image represents one of the web sections. (sections 12-16)

[intefacedesign2015]

UI Design - Part 2 Long page scrolling - every image represents one of the web sections. (sections 7-11)

[intefacedesign2015]

UI Design - Part 1

Long page scrolling - every image represents one of the web sections. (sections 1-6)

[intefacedesign2015]

UI Experimentation / Interactive Elements

[intefacedesign2015]

Interface Development

LONG PAGE SCROLLING - DIVE IN ‘Dangerous Creatures of the Ocean’ are the main theme of my website, where dangerous creatures are in fact, thrown away and washed out from land garbage and marine debris. The main threat is not a shark or jellyfish rather humans who don’t care about environment and the future of world’s oceans. Page design for a full desktop displays.

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.

Information about recycling, avoiding plastic bags, using eco material bags for shopping, avoiding single use products etc. Section advises about appropriate behavior; encourage children to involve in protecting our oceans and marine life, in education and sharing that knowledge with others.

[intefacedesign2015]

Interface Design - Style Guide Having an established style guide was very useful, especially during the development process - one quick look was enough to keep me on track with all my visuals and design elements.

[intefacedesign2015]

Interface Development

Information Gathering & Planning First step in the web designing process was to gather information on specific problem - for my project purpose I focused on ocean pollution. I’d collected all data needed and started developing visual style and hierarchy, as I always would for any of my digital project. That involved outlining complex set of data and explaining it in a simple and easy way to my target audience.

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.

In spite of not introducing interactive bubble chart into my design, I had achieved good visuals and balance throughout the design and functional web page overall.

[intefacedesign2015]

Design Elements - Graphics Difficult data and information solved with simple illustrations. Original images would be a little too shocking and confronting for my target audience. All graphics created by using Adobe Photoshop and Illustrator.

[intefacedesign2015]

Design Elements - Icons Designed for ‘Call for Action’ section. Source: Freepick

[intefacedesign2015]

Design Elements - Images ‘Dangerous creature of the ocean’ in shape of dangerous animals outline (shark, jellyfish, stone fish etc.) filled out with real danger to marine wildlife  – plastic trash and floating garbage. Shark - plastic bottles, jellyfish - plastic bags, sea snake - plastic lids, stingray - disposable diapers, and stone fish - glass bottles.

[intefacedesign2015]

Design Elements - Graphics When designing my web page elements, I had to keep in mind my target audience – school students 8-12 years old. They main idea was to focus on vivid complementary colours, with emphasis on bright orange  – which identified pollution problem, represents important data, and adds interest to entire layout.

[intefacedesign2015]

UI Development - Part 2 Lo-Fi single web page proposal

[intefacedesign2015]

UI Development - Part1 Lo-Fi single web page proposal. Every image represents one of the web page section. Having layout, structure and visuals resolves in early stages of development process were quite helpful, worked for me as a design guide. I knew exactly what to do, what graphic elements need to be created, also gave me time to play with my HTML, CSS files to achieve desired outcome.