This document summarizes the speaker's analogy between designing buildings and designing web applications. It outlines the step-by-step process of laying out a building with sketches, plans, and blueprints, and then draws parallels to laying out a web application by recognizing needs, setting plans, defining components, creating mock screens, and coding. The speaker emphasizes that just as you wouldn't build a house without detailed plans, you shouldn't build a web application without thorough planning and mockups to identify requirements and prevent issues.

1. @psybercity
Katerina Skroumpelou
MRes, MEng Architectural Engineer
Front-End Web Developer @ Upstream
from Buildings to Software
-paving the way to construction-
1

2. about me
_Architectural Engineer by training
_Front-End Developer at Upstream (upstreamsystems.com)
_First encounter with Angular: Summer of 2015
_Lives in Athens, Greece
@psybercity
hiG
irly!

3. summary
_Analogy
_Laying out a building
_Laying out a web application step by step
_recap
_reasons why
3

4. Building Software|
4

5. 5
|

6. 6
source: tourbosquid.com source: hackertyper.com

7. analogy
How designing buildings helped me design and -well- build software.
7
With a variety of structural elements.
Steady software
With a robust base.
And a well defined structure.

8. laying out a building
Task:
Make a community centre
_Which houses specific activities (theater, library, cafe, etc)
_No more than 500sq.m.
_Local Municipality guidelines (accessibility, appearance, branding)
_Quiet, family neighbourhood
8
problem/task
parameters
You start drawing.

9. laying out a building_sketches
9

10. laying out a building_plans
10
large scale finer scale

11. laying out a building_detailed blueprints
11
cross section of concrete slab cross section of concrete slab, concrete wall,
exterior and part of window
detail of window frame and shades
even finer scale

12. laying out a web application
Step by step!
__recognising the needs
__setting down the plans
__scaffolding
__defining components (structural elements)
__creating mock screens
__start coding!
12

13. laying out a web application_a web house
13
<building>
</building>
<chimney/>
<roof>
</roof>
<attic-window/>
<brick *ngFor="let brick of stack”/>
<wall>
</wall>
<insulation/>
<beam/><beam/>
<attic/>
<window>
<frame/>
<glazing/>
<handle/>
<apron/>
</window>
<door>
<frame/>
<handle/>
</door>
<column/><column/>
it’s a joke

14. laying out a web application_the step-by-step approach
digital portfolio
14
requirements:
_list of my projects.
_add a new project
_edit an existing one
_delete any embarrassing ones from first year in college
_any user, should be able to view details for each project
_user friendly (to attract future employers)
problem/task
parameters
You start drawing.

15. planning/sketches_navigation tree
15

16. planning/sketches_application-root (bearing structure)
16
__header
__menu
__content container
__footer

17. planning/sketches_front-page
17
__header
__menu
__content container
___list of projects
__footer

18. planning/sketches_about-page
18
__header
__menu
__content container
___text
___photo
__footer

19. planning/sketches_contact-page
19
__header
__menu
__content container
___contact form
___map
___social media buttons
__footer

20. Now, let’s see some mock-ups
Disclaimer: This presentation is NOT about user interface / user experience design.
All elements are from the Material Design sticker sheet.

21. mock-ups/plans
Rough mock-up screens are put together
Initially, they can be just a laying out of elements, a draft to make sure nothing is left out
Large scale, no need for fine tuning and attention to detail just yet.
21

22. mock-ups/plans_front-page
22
<list-item>
<add-button>

23. mock-ups/plans_about-page
23

24. mock-ups/plans_contact-page
24
<social-media-button>
<map>
<editable-element>

25. mock-ups/plans_details-page
25
<carousel>
<edit-button>

26. mock-ups/plans_new-project-page
26
<add-button>
<edit-button>
<button>
<editable-element>

27. mock-ups/plans_lessons learned
Draft mock-up screens:
-reveal elements/components that we never thought were there
-help us plan out our code better
-keep us prepared and informed about what to expect
-reveal the need for a UI/UX designer
(just as you wouldn’t go about building a house without the plans,
or the architect)
27source: picpng.com

28. finer detail mock screens - live demos, etc
28

29. start implementing the plan!
29
Autodesk AutoCAD 2017 atom editor

30. recap
30
atom editor twitter

31. reasons why
What is helpful in this approach is:
_you plan your work in detail
_the planning makes a task easier
_it helps you have better estimates of how long anything is going to take
_it prevents you from unanticipated issues.
_scalable - easier to maintain - easier to change
Angular gives you he tools for that. So why not use them?
31
“the programmer has to grab a pen and paper and the planner has to write some code”
- Manolis

32. reasons why
32
“In the field of software development, the term build is similar to that of any other field.
That is, the construction of something that has an observable and tangible result.”
wikipedia: software build

33. recap
_There are skills in different industries that cross over
_Building design is a very old discipline
_The process of designing a building is very similar to that of designing an application
__you need drafts, detailed plans, structural elements, and a full, fine scaled blueprint
>these are the components that Angular gives you!<
You wouldn’t build your home without planning it out first. So, why do it with your homepage?
33

34. 34
Just remember, it’s not necessary to build software that actually looks like a building.
Or a group of buildings.
source: Jurassic Park (1993) Universal Pictures | fsn (file system navigator), SGI

35. THANK YOU (:
Katerina Skroumpelou
Front-End Web Developer
@ Upstream
@psybercity