Embed Size (px)
Citation preview
A flawless designer-developer flow: how to boost mobile product development speed
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
PROBLEMS OFA DEVELOPMENTPROCESS
WTF with the background!?
Height: 120PTBackground: rgb(255, 255, 255)Bottom-border: 1PT rgba(0, 0, 0.25)
Check out circle size. It’stoo small now.
Font size is too small.Check out the layout.
TODAY’SAGENDA
Dicsussion of thecollaboration problem15m
Advices for speeding upa development proccess15m
Q/A10m
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
DESIGN PROCESSDiscussion of the collaboration problem
FinishStart
Final
It. #3It. #N
It. #2
Discussion #1
Iteration #1
D. #2D. #3
How it should look
DESIGNPROCESS
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
DESIGNPROCESS
App mockup Comments
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
PF Din Text Universal12PT, Bold, rgba(0, 0, 0, 0.25),Uppercase
PF Din Text Universal Bold16PT, rgb(255, 255, 255)
PF Din Text Universal12PT, Regularrgba(0, 0, 0, 0.25)
98PT
320PT
Proportional to1080P video size
TIPS & TRICKSAdvices for speeding up a development proccess
DESIGNER“I think it should bea nice button here”
DEVELOPER“Wish I had more time to
develop this f* button”
“Discussion sessions are very helpful”01
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
1X
2X
“Everything should be guidelined. Even buttons.”02
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
Follow Anna’s work
Follow Anna’s work
You follows Anna
Unfollow Anna
Active
Clicked
If you follow someone
Button transforms whenyou click on the previous state
“Simple and effective QA design sessions”03
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
Implemented Designed
“Platforms are different”04
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
TransluscentGradients
Smooth animationOutline icons
Objective-C, SwiftHelvetica / San Fransico
2 resolutions
Material DesignFlat paletteMeaningful transitionsFilled iconsJavaRoboto100500 resolutions
BASIC THINGS FOR A DESIGNER
“Design & Code for everyone”05
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
Block developmentiOS & Android controls
Front End patternsGoogle / Stackoverflow
HTML & CSS
BASIC THINGS FOR A DEVELOPER
Images cutIllustrator “Save as”LayersShapesBlending options
QUESTIONS & ANSWERS
AHMED SULAIMANCEO Flawless App, ex. Petcube Developer
[email protected]/ahmed.sylaiman
www.flawlessapp.io
