Understanding the

Modern Front End

Development Workflow

Presentation: 30 minQ/A: 30 min

So lets quickly break down how a

Front End dev works today….

Lets split the steps like this:

Consultation and Collaboration

Analysis

Structuring Data

Styling Presentation

Develop Interactions

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.

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.

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.

Tools of the Trade

JadeHTML Templating Language

Allows you to write files that compile to pure HTML, with

awesome feature like modularity, iteration, variables, and other

functionality.

SassSyntactically Awesome

Stylesheets

Allow you to write files that compile to CSS with a ton of

awesome features like modularity, variables, and

other functionality

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.

CodekitPremium Build Tool and

Server

GulpOpen Source, Customizable Build Tool and Server, based

on Node

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.

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.

So…What are the challenges we face?

Front End faces the challenge of resolving the rigidity of static

Photoshop images, with the fluidity and inconsistencies of a multitude of

browsers.

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.

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.

<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>

UX and Design needs to reflect the modern

web:

• Modular • Data-driven• Interface driven• Performance is a

priority• Device agnostic

So how can we get there?

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.

“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.comhttp://www.smashingmagazine.com/2013/04/22/repurposing-

photoshop/

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.

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

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.

We do understand…

Many clients still want full page comps of pages. We feel your pain.

We do need to very quicklypresent 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.

Stick with me now….

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.

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”.

Empathy

Information Architect

Designer / Interaction Designer

Front End/Javascript

Developer

“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 Weaverhttps://medium.com/re-write/we-dont-need-more-designers-who-

can-code-b81483d2a0e6

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.

Thanks!

Questions?