Streaming live at 10am (PST)

Getting started checklist


#1

Hi
Just started on building a site with webflow. I find my design is being shaped by my skills or (lack of) in webflow.

I feel I need to go back a bit and work out some of the design elements first.

Should I work out items like colour scheme, fonts, section dimensions first before going to webflow?
What is a good check list to have before beginning the build in webflow?
What design/layout decision should be finalised before starting?

paddy


#2

1. It's possible to design right away in Webflow, but...

There's what's I think is a rule and I would be surprised a lot of people can prove it wrong: If you design directly in Webflow, your code is going to be a bit of a mess. More importantly, it's going to be so badly optimized that maintenance is going to be difficult, and it is going to affect your will and capacity to fine tune your great design. And fine tuning makes the difference.

But as it's often said here, Webflow is self cleaning. When you have achieved a nice section, you can redo it from scratch just below and erase the draft version. Later, clean the unused classes in the class panel and you're back with a clean structure.

2. it's preferable to follow a better design route and ignore the final design tools beforehand

Start with a pen, you've surely read that everywhere and that's hyper effective. Gather your references and inspirations and draw. You can scan and continue in a design tool.

With that approach only you can decide beforehand how you'll compose your elements, the number of nested blocks you need and how to spread the styles among levels. It would be really hard to come up with a clean structure with design on-the-fly in Webflow.

Once your structure on paper, the work on WF is replication. It's fun and quick as you know where you're going. Once done yo have a clean structure to work with for your interactions and you don't have to debug the structure to make them work.

So, the design and layout decision to take before Webflow:

  1. full visual layout and visual hierarchy of blocks (what's the main
    reading path and what's secondary, tertiary...)
  2. structure in term of : sections / containers / columns / structure
    of nested divs / links blocks / text and images elements. It's a
    good time to decide what HTML5 kind of IDs the upper elements will
    get (Header, section footer...).
  3. Given the structure, decide where to apply the main shared styles
    and their structure (button, button.wide, button.blue, etc) so you
    take advantage of what CSS hierarchy is. You also define a clean
    text hierarchy, H1 to H5 and all your p in order. Designing the
    extra content will be so cool and easy if you achieve that right.

Hope this helps


#3

Could you elaborate on this @vincent please.


#4

Hi Vincent,

Thanks for that, really appreciate it.
Im a graphic designer and not really skilled in coding, (hence the value of webflow). I am used to simply dragging and dropping elements to where I wish, and the whole CSS framework is throwing me off a bit.

Just a quick clarification on this....
"When you have achieved a nice section, you can redo it from scratch just below and erase the draft version."

Should I just copy/paste elements and ad more sections further down the canvas. And when its correct, then simply delete them from the top.

Thanks again, Paddy


#5

@Amreet_Gill the requirements Webflow needs before they accept templates to be sold helped me immensely.

I have no intention of selling templates but the guide helped me understand the structure of a good site.

Click on the link and scroll to the Template Requirements section:
http://template-info.webflow.com/submission-guidelines

Hope it helps you too in addition to @vincent's strategy.


#6

thanks @TStanwood !

That article is exactly what i was looking for ! smile


#7

I think building straight in webflow is good only if you really know the interface well. if not, you will find yourself stuck on small meaningless things instead of going through with the creative process...

start outside, than move everything into webflow, if you get stuck, at least you got the creative process done and you can play with the interface as much as you like.


#8