Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front-end up front

127 views

Published on

Aleksandra Hristova's presentation at JavaSkop 2019.
Topics touched:
- Using pattern libraries to improve the communication between designers and developers and the importance of including the whole team and the client into the planning phase.
- How to plan and build components that can be used in different contexts and within other components with examples from real projects.
- How we have used UX design principles to ease our front-end implementations with code examples using the latest CSS features and Angular.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Front-end up front

  1. 1. Aleksandra Hristov 30.03.2019, Skopje @ JavaSkop A case study of re-re-building the international train traffic coordination system Front-end up front
  2. 2. The legacy project 3 2004/2005
  3. 3. 2014/2015 Next Generation 6
  4. 4. User Experience 7
  5. 5. Source: uxpin.com
  6. 6. Prepare
  7. 7. Briefing & Users IM Infrastructure managers RU – Passenger Railway Undertaker RU – Cargo / Freight Railway Undertaker RFC Rail Freight Corridors
  8. 8. Give responsibility
  9. 9. …and deal with politics
  10. 10. Documentation / track of progress
  11. 11. Source: bradfrost.com
  12. 12. col-xs-1 col-xs-2 col-xs-1 col-xs-8
  13. 13. col-xs-1col-xs-2 col-xs-?col-xs-2col-xs-3 col-xs-1col-xs-2 col-xs-3col-xs-2col-xs-3 col-xs-1
  14. 14. col-xs-1 col-xs-2 col-xs-1 col-xs-7col-xs-1 col-xs-8col-xs-4
  15. 15. 30px flex-direction: column; flex: 4 35px; (1) 30px 30px flex-grow: 20; (5)
  16. 16. 29
  17. 17. Envelope Concept 30 2016/2017
  18. 18. 31
  19. 19. www.thesprintbook.com
  20. 20. Usability testing IM Infrastructure managers RU – Passenger Railway Undertaker RU – Cargo / Freight Railway Undertaker RFC Rail Freight Corridors
  21. 21. 38
  22. 22. Methodology Development process Issue tracking in Jira Change Requests Code reviews UX & RE Technical/functional RE
  23. 23. for developers :) User Experience 40
  24. 24. Source: uxpin.com
  25. 25. Grid calendar 42
  26. 26. 44https://codepen.io/alexhris/pen/djbrBP
  27. 27. 60 … September 2019
  28. 28. Current team (in order of joining :D ) 61 Aleksandra Hristov UX Architect Jana Karcheska Senior Software Eng. & RE Valerija Velinovska Senior Software Eng. Hristijan Dimitrieski Senior Software Eng. Aleksandar Cindrikj Senior UX Engineer Ignatij Gichevski Software Engineer Trajche Naumoski Senior Software Eng. Gorazd Titizov Project Manager Many others Sys, Clients, ex-Team…
  29. 29. Things to mention §Enhancing in order HTML → CSS → JS §Accessibility (for public web applications is a must!) §Storybook.js (for building pattern libraries) §Web components (waiting on browser support) 62
  30. 30. 63 Thank you! aleksandra.hristov@netcetera.com @alexhris

×