Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Designing for OutSystems Applications
João Guerra
User Interface Design Expert @ OutSystems
linkedin.com/in/joaofilipeguerra
NextStep
2016
Silk UI
A Designer’s guide: How to collaborate with developers
Agenda
● From Business to Consumer (B2C) to Business to Employee (B2E)
● Importance of Design in Enterprise Apps
● UX and ...
What I learned going from B2C to B2E
B2C
“business model whereby a company sells its
products directly to consumers
Business to Consumer
www.investopedia.com/v...
B2EB2C
Consumer
Business to
Employee
Business to
www.investopedia.com/video/play/businesstoconsumer/
B2E
“B2E is business-to-employee, an approach in
which the focus of bu...
Seducing
Consumers
Empowering
Employees
B2C B2E#1 Vs
Lower Span of Attention Higher Focus
B2C B2E#2 Vs
http://www.apple.com/hotnews/apple-answers-fcc-questions/
“Apple’s goal is to provide our customers with
the best possible...
http://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store
“As of June 2016, there were more
t...
B2C B2E#3 Vs
Importance of design in B2E
Higher
Expectations
Frequency
of use
Increase on
efficiency
Investment on design for B2E
Pick your battles
This iceberg is your project
The designer is working on the
tip of the iceberg
The designer is working on the
tip of the iceberg
He must prepare the
remaining work
However
Because it’s under the
water that developers are
usually left alone for the
rest of the project
How can designers help
developers work on these
deeper parts of the
iceberg?
Tips for a better collaboration
Approach Process Handover
Approach Process Handover
The problem!
Where Design fits
Where Design fits… in Agile!
Agile Process
Approach Process Handover
“ We’re not designing pages,
we’re designing systems of components
Stephen Hay
http://bradfrost.com/blog/mobile/bdconf-ste...
Accelerate
the process
Ensure
consistency
Shared
vocabulary
Of development and design Critical for usability as for projec...
Perfectly fit to
the platform
Good development
experience
Codeless UI
framework
+
goo.gl/bP0x2F goo.gl/AZfPP8 Samuel Jesus
How does our workflow fit
this mindset?
UX UI FEUI DEV
goo.gl/IZFUMP goo.gl/NsIsq7 Ricardo Luiz
Order management wireframe
UX UI
Base elements
UI
Base elements
Key screens
UI
Base elements
Key screens
UI
Base elements
Key screens
UI
Base elements
Key screens
Specific use cases
UI
Base elements
Key screens
Specific use cases
Style Guide
UI
UI kit available
on Dribbble
The combination of
Wireframes
Key Screens
Style Guide
will give guidance for the
rest of the project
UI DEV
Heading 1
Buttons
Heading 2
UI DEV
Forms
goo.gl/Btttuj goo.gl/wJNcmL Daniel Reis
Approach Process Handover
4
7
Map the
user flow
4
8
Leave notes
and get feedback
Don’t leave
them guessing
AVOCODE
Screenshot to
Lisbon shot em
modal
goo.gl/Rcr5PI
goo.gl/ZaXv9w
goo.gl/mh5ZnA
To conclude
Final Takeaways
Approach, process and handover method can have a great
outcome and impact in your work
#1
Silk UI is a gre...
Thank you!
Training Webinar - Designing for OutSystems Applications
Prochain SlideShare
Chargement dans…5
×

Training Webinar - Designing for OutSystems Applications

1 355 vues

Publié le

João Guerra is a Designer. Capital "D" kind of designer. That's because he understands and feels the pains of his fellow designers when they are designing for developers. But he also understands the pains developers have in translating a designer's visions.

So, João is here to help. We heard you, and we want to make the lives of people with different mindsets a lot easier.

João will go through his personal story, from being a designer used to create for B2C, to one that's much more focused on the B2E market, and the challenges he had to embrace in his path.

And then he will tell you all about how a framework helps and how it enables him to iterate much more quickly with his developer counterparts.

In this session you will:
- Understand the importance of Design in Enterprise Apps.
- Figure out how UX and UI develop a vision and collaborate to create a concept.
- Learn how designers and developers can work together, as a team.
- Discover the methods and tools that can lead to better collaborations.
- How to customize designs - Style Guides, building pages with pre-built patterns and how to adapt to specific use cases.

Free Online training: https://www.outsystems.com/learn/courses/

Follow us on Twitter http://www.twitter.com/OutSystemsDev
Like us on Facebook http://www.Facebook.com/OutSystemsDev

Publié dans : Logiciels
  • You have to choose carefully. ⇒ www.WritePaper.info ⇐ offers a professional writing service. I highly recommend them. The papers are delivered on time and customers are their first priority. This is their website: ⇒ www.WritePaper.info ⇐
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Writing you here to say that this is one of the best collection of plans I've seen I'm on my 4th day and have already build a few wooden toys for my daughter! =>> https://t.cn/A62Ye5eM
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • I think you need a perfect and 100% unique academic essays papers have a look once this site i hope you will get valuable papers, HelpWriting.net
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Training Webinar - Designing for OutSystems Applications

  1. 1. Designing for OutSystems Applications
  2. 2. João Guerra User Interface Design Expert @ OutSystems linkedin.com/in/joaofilipeguerra
  3. 3. NextStep 2016
  4. 4. Silk UI A Designer’s guide: How to collaborate with developers
  5. 5. Agenda ● From Business to Consumer (B2C) to Business to Employee (B2E) ● Importance of Design in Enterprise Apps ● UX and UI develop a vision and collaborate to create a concept ● Designers and developers working together, as a team ● Methods and tools that lead to better collaborations ● Design creation: ○ How to create Style Guides ○ Building pages with pre-built patterns - Silk U ○ How to extend Silk UI patterns to specific use cases
  6. 6. What I learned going from B2C to B2E
  7. 7. B2C “business model whereby a company sells its products directly to consumers Business to Consumer www.investopedia.com/video/play/businesstoconsumer/
  8. 8. B2EB2C Consumer Business to Employee Business to
  9. 9. www.investopedia.com/video/play/businesstoconsumer/ B2E “B2E is business-to-employee, an approach in which the focus of business is the employee, rather than the consumer Business to Employee
  10. 10. Seducing Consumers Empowering Employees B2C B2E#1 Vs
  11. 11. Lower Span of Attention Higher Focus B2C B2E#2 Vs
  12. 12. http://www.apple.com/hotnews/apple-answers-fcc-questions/ “Apple’s goal is to provide our customers with the best possible user experience Apple standards
  13. 13. http://www.statista.com/statistics/263794/number-of-downloads-from-the-apple-app-store “As of June 2016, there were more than 130 billion app downloads from the Apple App Store, for the various iOS devices. Apps downloads Statista
  14. 14. B2C B2E#3 Vs
  15. 15. Importance of design in B2E Higher Expectations Frequency of use Increase on efficiency
  16. 16. Investment on design for B2E
  17. 17. Pick your battles
  18. 18. This iceberg is your project
  19. 19. The designer is working on the tip of the iceberg
  20. 20. The designer is working on the tip of the iceberg He must prepare the remaining work However
  21. 21. Because it’s under the water that developers are usually left alone for the rest of the project
  22. 22. How can designers help developers work on these deeper parts of the iceberg?
  23. 23. Tips for a better collaboration
  24. 24. Approach Process Handover
  25. 25. Approach Process Handover
  26. 26. The problem! Where Design fits
  27. 27. Where Design fits… in Agile! Agile Process
  28. 28. Approach Process Handover
  29. 29. “ We’re not designing pages, we’re designing systems of components Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  30. 30. Accelerate the process Ensure consistency Shared vocabulary Of development and design Critical for usability as for project maintainability Between project members, from old ones to newcomers
  31. 31. Perfectly fit to the platform Good development experience Codeless UI framework +
  32. 32. goo.gl/bP0x2F goo.gl/AZfPP8 Samuel Jesus
  33. 33. How does our workflow fit this mindset?
  34. 34. UX UI FEUI DEV
  35. 35. goo.gl/IZFUMP goo.gl/NsIsq7 Ricardo Luiz
  36. 36. Order management wireframe UX UI
  37. 37. Base elements UI
  38. 38. Base elements Key screens UI
  39. 39. Base elements Key screens UI
  40. 40. Base elements Key screens UI
  41. 41. Base elements Key screens Specific use cases UI
  42. 42. Base elements Key screens Specific use cases Style Guide UI UI kit available on Dribbble
  43. 43. The combination of Wireframes Key Screens Style Guide will give guidance for the rest of the project UI DEV
  44. 44. Heading 1 Buttons Heading 2 UI DEV Forms
  45. 45. goo.gl/Btttuj goo.gl/wJNcmL Daniel Reis
  46. 46. Approach Process Handover
  47. 47. 4 7 Map the user flow
  48. 48. 4 8 Leave notes and get feedback
  49. 49. Don’t leave them guessing AVOCODE
  50. 50. Screenshot to Lisbon shot em modal goo.gl/Rcr5PI
  51. 51. goo.gl/ZaXv9w
  52. 52. goo.gl/mh5ZnA
  53. 53. To conclude
  54. 54. Final Takeaways Approach, process and handover method can have a great outcome and impact in your work #1 Silk UI is a great accelerator for your work and iterations#2 Reusable and consistent design vision is life changing for your project #3
  55. 55. Thank you!

×