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