I do strategy and production at @wearehanno. I'm trying to build our agency to do things a little bit differently, and better! We focus on delivering high-quality design and lean UX, with solid, maintainable code to back it up.
RAPID UI DEVELOPMENT FOR WEB APPS
FIRST, A LITTLE ABOUT US
BUILD IT BETTER
- Transparent - involve clients at every point
- Lean - build faster + get better feedback
- Iterative - use this feedback better
- Ship - do it sooner
Rapid != Fast
Design = problem solving
Rapid = Strategic
Unearthing problems quickly
HOW IT STARTS
"Hello, Hanno! I want to build a new website for Frontenders in Valencia, called FrontendBook. It'll be just like Facebook! How much would this cost?"
GETTING TO KNOW TONY
- Who is he?
What does he 'really' want?
Talk about the project
- Teach him about the process
- Find out about his vision for the app.
- Get the budget and timeframe
MAKE SURE THE FIT IS RIGHT
BE PREPARED TO SAY NO
IDENTIFY THE PROJECT FEATURES
- Which are most important
- Which of them would be nice, but aren't essential
PLAN A PRODUCT ROADMAP
- The Core
We use Trello
Not necessary for the first iteration app.
Potentially implemented through effective use of budget.
So let's see how it works...
WHERE ARE WE AT?
✔ Client is happy
✔ Roadmap is approved
STEP 3: BUILD IT!
But, where do we start?
Where to start?
- Don't waste time on the basics - leave these till last
- Build quickly, explore, get feedback.
Which pages are important for FrontendBook?
A Frontend Framework
Why use a framework?
- Quicker to build prototypes
- Quicker to experiment with UI components
- Clean, generic design - help clients to focus on structure
- It doesn't matter which one you choose
- But to prototype quicker, you need to know it well
More experience with a framework = quicker prototyping
- More design flexibility - easier to design on top
- It's mobile first
- Most importantly, we can build faster with it.
A very rough first step
Working transparently and collaborating with your client
- Build the page
- Commit & push to git repo
- Automatically deploy to development server
- Get feedback!
Use post-commit hooks
- DRY: Don't repeat yourself
- Automate the process, so you can build quicker!
We automate with
- Specific feedback
- General feedback
Build → Get Feedback → Iterate
LAYERING THE STYLE
- As the app's structure becomes clear, we can look at styling
- Style is layered on top of structure
- Styling is iterated too
Efficient time to look at visuals
Visuals in the context of the structure
Creating a common visual language
Translating client vision
Steering vision into focus
The Style Tiles
exploration, navigation, discovery
Evolution of Moodboarding
Assembling a visual tool kit
reinforce design objectives
Here's a quick moodboard example...
App style and UI elements
It's not a one-way street
ITERATE UNTIL YOU SHIP
Ship it, and gather data
Build it better
Rapid UI Development for Web Apps
By Jon Lay