Download - Modern ux-workflow-presentation
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.
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.
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
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 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.
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”.
“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.