Understanding the Modern Front End Development Workflow

1. Understanding
the
Modern
Front End
Development
Workflow

2. Presentation: 30 min
Q/A: 30 min

7. So lets quickly
break down how a
Front End dev works today….

8. Lets split the
steps like this:
Consultation and
Collaboration
Analysis
Structuring Data
Styling Presentation
Develop Interactions

9. Structuring Data
We begin coding the HTML
markup for the project.
Based on the component
mapping, and over all page
structure, we start building
the sematic structure for
each element, and the page
templates as a whole.

10. Styling presentation
Once the content and
templates are structured, we
then start translating the
designs into the
presentation.
We attempt to leverage as
much presentation in pure
CSS as possible, using
images only in content, when
possible.

11. Develop
Interactions
Once all the visual and
markup pieces are created,
we can start creating more
complex interactions and
service driven data
presentation using
JavaScript.

12. Tools of the Trade

13. Jade
HTML Templating Language
Allows you to write files that
compile to pure HTML, with
awesome feature like
modularity, iteration,
variables, and other
functionality.
Sass
Syntactically Awesome
Stylesheets
Allow you to write files that
compile to CSS with a ton of
awesome features like
modularity, variables, and
other functionality

14. Why do we use
Jade and Sass?
Both tools allow us to use
programming conventions like
variable, iterators, templates
(mixins), and functions to more
write more manageable,
flexible, and scalable HTML and
CSS.

15. Codekit
Premium Build Tool and
Server
Gulp
Open Source, Customizable
Build Tool and Server, based
on Node

16. Why do we use
build tools?
We use build tools to compile
our final HTML and CSS from
the various Jade, Sass, and JS
files that make up each page of
a project.
Because we are dealing with
many small pieces of code put
together, and we may have
more than one dev working on
a project, we use these tools to
allow individual devs to one on
one small piece of code, and
not block anyone else.

17. When we code:
We take the split up
components of a web page
from the wireframes and
designs, and build them in
separate folders containing
Jade files for HTML, SASS files
for CSS, and JS files for any
JavaScript.
Our build tool, Codekit, pulls all
the pieces together as needed
to be presented in a final HTML
file that can be viewed in the
browser.

18. So…What are the
challenges we face?

19. Front End faces the challenge of
resolving the rigidity of static
Photoshop images, with the fluidity
and inconsistencies of a multitude of
browsers.

20. We Build (Largely)
CMS Driven
Projects and web
applications
This means we are build
client customizable
systems of data
presentation and
interfaces comprised of
lots, and lots of pieces.

22. Additional, with
Responsive Design,
its not only the
number of pieces,
but they have to
change
presentation and
sometimes
functionality across
a myriad of screen
sizes.

23. <nav>
<ul>
<li><a
href=“/”>Home</a></li>
</ul>
</nav>
<header>
<h1>This is the
header</h1>
</header>
<article>
<p>This is the article</p>
</article>

24. UX and Design
needs to reflect the
modern web:
• Modular
• Data-driven
• Interface driven
• Performance is a
priority
• Device agnostic

26. So how can we get there?

27. What we are
asking for….
Design deliverables:
• elements types (buttons,
lists, text treatments, etc..)
• grid-sizing
• Component patterns, made
up of elements
• scale & sizing of elements
• padding and margins on
individual elements and
components
Each of these should be able
extend.
Elements can align more clearly
as units that can be built into
larger UI Components and CMS
components.

28. “For today’s Web design process, I view Photoshop as a high-
fidelity sketchpad: expensive, I realize, but it does everything we
need it to and we’ve used it for ages. It’s a tool that we’re quite
proficient and efficient at. Whereas it used to be our literal
canvas, Photoshop can now become our “palette,” as the browser
becomes the canvas. We prototype designs in the browser, but
turn to Photoshop every so often to ideate, and eventually
implement those quick creations in code, concurrently.”
- “Repurposing Photoshop” – smashingmagazine.com
http://www.smashingmagazine.com/2013/04/22/repurposing-
photoshop/

29. Tools like Sketch 3 (Mac),
InDesign (Mac/PC),
And Fireworks (Mac/PC) can
help bridge the gap between
visual design elements and the
browser.
They offer layout, sizing and
element creation that maps
closer to the browser.

30. Style Tiles
“Style tiles are a flexible starting
point that define a style to
communicate the web in a way that
clients understand.”
- “Style Tiles and How They Work” – Samantha Warren
http://alistapart.com/article/style-tiles-and-how-they-work

33. Pattern Libraries
Pattern Libraries helps integrate modular thinking into the
design process right out of the gate, and helps demonstrate
responsive patterns to create.
UX and Visual designers can use Pattern Libraries as a way to
see how each module works in a responsive environment
and also to keep track of all the design's raw materials.

37. We do understand…
Many clients still want full page comps of pages. We feel your pain.

39. We do need to very quickly
present working prototypes that can
be tested across devices, and
iterated through design deliverables
with the team, and even the client.
And they can be iterative, works in
progress.

41. Stick with me now….

42. The Modern Front
End Developer is
highly invested in
helping to solve
complex UX
problems, while
supporting the
creativity and
ingenuity of IAs and
designers.

43. We’re not
interested in the
business of saying
“no”…
We prefer “tell us
the problem you are
trying to solve, and
I’ll help you get
there”.

44. Empathy

45. Information
Architect
Designer /
Interaction
Designer
Front
End/Javascript
Developer

47. “Here’s what we really need:
UX/designers who can design the hell
out of things and developers who can
develop the hell out of things. And we
need them all to work together
seamlessly.”
- “We don’t need more designers who can code” – Jesse Weaver
https://medium.com/re-write/we-dont-need-more-designers-who-can-
code-b81483d2a0e6

48. My hope
is that we:
- Show respect and care the
valuable work each of us do
- Recognize that the iterative
based process has become
the standard
- That we need a level of
overlap in awareness of each
others skillsets.

49. Thanks!
Questions?