Designers & DevelopersA Presentation by Javon Bell

Serena’s Quest

• My daughter’s (1 year old) wants to watch her favorite movie, Bee Movie.

• After the tablet turned on, she began swiping the tablet screen to find the Netflix application.

• She used horizontal and vertical touch scrolling through the movie categories.

• After finding the Bee Movie, she touched the play button and began watching a movie.

Designers & Developers Create Experiences

Colors & Icons

She was able to navigate the tablet to find the Bee Movie by recognizing icons and colors

Analysis from Serena’s Learning Journey through Netflix

Touch Functionality

At a very young age, she understands how to navigate a tablet and movie application

Emotion Management

The usage of alerts, animations, and loading time helped Serena stay

calm and excited during the journey

Designers: Stop Assuming

Developers cannot read your mind

• Provide as much information about the direction of the design.

• There is no such thing as too much information.

• Provide style guides for all of your elements on a project.

• Always ask questions.

Call a quick meeting

• A developers input will help you make adjustments and improvements to your designs.

• No one wants to re-work a design that is already in development.

Innovation Without Collaboration Hurts Everyone

Over Promise

Dont speak too freely unless you are 100% confident your ideas.

Budget Awareness

Design and develop within the approved budget. Everyone wants to

get paid right?

Browser Compatibility

Your project looks great until someone asks, “Did you check your

website in Internet Explorer?”

Accessibility: Everyone’s Problem

http://www.reusserdesign.com/blog/accessibility/

Web accessibility workshop with Fifth Freedom

• Screen readers cannot read font-icons. SVG icons will work if the the proper HTML tags are used.

• Search results are a nightmare.

• Manual text magnification and color contract options are a must.

• Overall, the web is much harder for a user with a disability to navigate.

Personal Analysis from accessibility workshop

Rapid Prototyping

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations , https://dribbble.com/shots/3768738-Food-app-preloader

Animation development

• Storyboarding the steps is the best way to explain your vision.

• Animation using CSS keyframes takes a great deal of planning prior to development.

• Majority of the work when animating icons or graphics (SVG), is the preparation of your files.

https://dribbble.com/shots/2766478-Three-Failed-Interviews-and-One-Cheat-Sheet-Guglieri-com

Website & app functionality

• Understanding what you will be providing exactly before you begin the process.

• Building trust and compassion to help achieve your client’s vision.

• This challenges both the designer and developer to trust each other skill set.

Collaboration Statistics

86% 90%

Employees blame a lack of collaboration for workplace failures

Decision makers should seek other opinions before making final decisions

Designers & developers are not the only ones…

http://online.queens.edu/online-programs/mba/resources/infographic/communicating-in-the-workplace

Personal ReflectionMy experience as a designer & developer

Thank You