Intro to webflow

webflow.com

nelson abalos jr

• Digital Experience Designer
• Illumina
• 15 years experience
• 2 Awesome Dogs
• Awesome Wife
• Wish I was Iron Man

man-made tools

tools for writing

typography tools

web design wysiwyg

WYSIWYG frustrations

• Elements look different in the preview window
• Elements dramatically render differently cross-browser
• Code output for pre-programmed interactions is bloated
• Not very flexible for developers

workflow before responsive design

1. Asset Gathering
2. Wireframe
3. Photoshop Mocks
4. Photoshop slicing
5. Front-End Coding
6. Publish Website

desktop / mobile workflow

1. Asset Gathering
2. Wireframe
   1. Desktop Wireframe
   2. Mobile Wireframe
3. Photoshop Mocks
   1. Desktop Mock
   2. Mobile Mock
4. Photoshop slicing
5. Front-End Coding
   1. Desktop site
   2. Mobile site
6. Publish Websites

current workflow

1. Asset Gathering
2. Wireframe
   1. Desktop Wireframe
   2. Tablet Wireframe
   3. Mobile Landscape Wireframe
   4. Mobile Portrait Wireframe
3. Photoshop Mocks
   1. Desktop Mock
   2. Tablet Mock
   3. Mobile Landscape Mock
   4. Mobile Portrait Mock
4. Photoshop slicing
5. Front-End Coding
6. Publish Website

What if there was a modern tool to
make the workflow more streamlined?

workflow with webflow

1. Asset Gathering
2. Wireframe
   1. Desktop Wireframe
   2. Tablet Wireframe
   3. Mobile Landscape Wireframe
   4. Mobile Portrait Wireframe
3. Design / Code in Webflow
4. Publish Website

Overview

• Design in browser and in the cloud
• Codes everything while you design
• Publish Instantly
• No more WYSIWYG frustrations

...thats nice and all, but I like to control the code.

- a web developer

Webflow can't make you a

better designer or developer instantly

Webflow can help you learn how to become a 

 better designer or developer faster

beginners

• Learn HTML5 semantics
• Learn CSS2/3

intermediate

• Create simple interactions
• Create simple animations
• Create more unique layouts

advanced

• Create complex interactions
• Create complex animations
• Create CRAZY layouts with your own code

learn and create
more beautiful websites

with Webflow

Thank you

nelson@pxlgk.com
@thepixelgeek

cspace.io
pxlgk.com

READY?!

One Hour(-ish) Workshop

One responsive webpage with:

• Navbar
• Hero Image
• Main CTA button
• 3 Column info row
• Google Map Embed
• Contact Form