1 of 56

Life is not static — your designs shouldn’t be either

A primer for evolving design workflows

Presented by Dan Arbello at No Code Conference 2019

Access this presentation at danarbello.com/ncc-in-medium »

2 of 56

Senior Front-end

Designer & Developer

Print & Digital

Designer

Since October 2019

Since 2005

3 of 56

Agenda

Definitions

Introduction

The Pitfalls of Static Design

The Benefits of In-Medium

Action

The Mindset (of in-medium)

The Styles (CSS)

Summary Conclusion

Resources (for later)

Q&A

4 of 56

Definitions

5 of 56

Designers

A designer brings together sociology, psychology, aesthetic, and contemporary trends to create context-relevant experiences.

6 of 56

Developers

Builds the experience by balancing the designs and the technology behind it (performance, maintenance, compatibility).

7 of 56

Everyone

Create for the sake of as many users as possible; all bodies, minds, and desires.

8 of 56

Introduction

9 of 56

Static

vs

In-Medium

10 of 56

The Pitfalls

Of Static Design

11 of 56

12 of 56

13 of 56

14 of 56

15 of 56

16 of 56

This is what static reviews look like.

17 of 56

This is what in-medium review looks like.

18 of 56

The Benefits of In-Medium

19 of 56

Stop designing inside of a vacuum. Take the user’s seat while you are designing, not after development finishes.

Design like you’re the end user

20 of 56

Artboards = Time x 3

Trash your artboards. You don’t need several artboards for every breakpoint per page design.

21 of 56

Speak the same�language

Instead of beating around bushes with static designs, wireframes,�and artboard-based prototypes,�use in-medium to speak the same language as developers. You will�see visual designs, the developers will see function and code.

22 of 56

Show the product sooner

Instead of waiting for development to produce what you’ve designed, generate a functioning prototype that will feel virtually the same as the end product. This allows:

strategy to sell an idea with more meat before too many resources are burned,
clients to review and approve things without wearing�a creative’s hat,
engineers to estimate and plan earlier,
and design to be more thoughtful and environment-/-platform-aware.

23 of 56

Supporting Strategy

Your team has a great idea. But there�Are no examples in the wild, or sharing that example isn’t an option. Help your team express breakthrough concepts beyond words in a proposal.

So, say you have an idea but nothing in the wild to illustrate it. In-medium will let you show, not just tell.
As an example: For Draper’s 50th anniversary celebration of their efforts in the Apollo moon landing, my team and I at Third & Grove used in-medium design to express grand ideas that had no examples in the real world, especially not as it pertained to their content: which had been top secret until earlier this year.
Copious documentation and meetings with all vendors, stakeholders, and creative teams weren’t getting the job done; often leaving everyone scratching their heads trying to imagine what we were dreaming up.
To illustrate our ideas we naturally turned to Webflow, entirely skipping wireframing, and showed exactly what we meant. Not sketches, not videos expressing interaction, but actual minisites that were accessible to everyone on the team on any of their devices.
This allowed all parties involved – as well as our own content strategist – to explore and learn on their own; getting a better understanding of the ideas on the table.

24 of 56

The 10hr Visual Sales Pitch

Take preliminary findings from user data, basic psychology, competitor research, and intuition to ideate and develop a single, but powerful, feature optimization or addition.

The ten hour visual sales pitch is a trick that I have used in conjunction with several strategists.
It has allowed us to run, and win a couple bouts, with the big dogs in proposals we probably appeared a bit too small for.
It has always helped my teams build better relationships with existing retainers, pushing for important work that was too complex and multifaceted to simply write up in proposals.
I’ve come to refine this “ten hour sales pitch” with the following tried and true core tasks:

Use basic user analytics like geolocality, behavior flow, time and day peaks, and defined personas (when available) to construct a “slice of life” model for the majority user. (Singular is key here. Don’t strive for the usual three personas.)
Predict that model’s desires and expectations with contemporary understandings of psychology. What does this persona want.
Establish context with a surface level understanding of the client’s place in the market.
Use your unique intuition to ideate and design a single feature optimization or addition. The quicker the win, the more applicable the sale. (Again, singular is key. One feature. One win.)
Use the designed prototype that results from this work in proposals as a powerful illustration for how you ideate, plan, design, and execute seamlessly.

25 of 56

User testing,�but for real.

You don’t have to choose between sketched wireframes, static comps, half-static prototypes, or going to dev quickly when it comes to testing designs. Stop relying on the polar opposites of options and test your actual in-medium designs with real people.

In-medium, again more specifically Webflow, is a powerful tool for user testing, as well.
Why show user testers art boards when you can show them the real thing?
In 2016, Quicken asked my team and I at Third & Grove to ideate and design optimizations for their dot com product and product comparison pages.
Of most concerted effort and debate was the Product Comparison Page. This page needed to allow users to compare the various levels of products/subscriptions against each other, while being able to switch their OS, and consume more details about each feature if desired.
Through several versions of live, in-medium designs, we provided Quicken’s user testing vendor with live designs that felt so real that some users instinctively started entering their credit card details after progressing through the entire checkout process.

26 of 56

Convincing the team

Will this take developers jobs? No.
As a designer, will I be expected to contribute to production code? Let’s hope not, but also maybe a little 😏
How do I get training beyond Webflow University? Many, many options.
What is the average training time? 1-2 months
Is this helpful for my resume? Leveling up is always a plus.
Is doing this with design workflows unique? So far: very.

Will this take developers jobs? No. Platform specialties will still be a thing, especially with complex builds. This does not kill the dev.
Will I be expected to contribute to production code? No. This is another reason why I like referring to this as in-medium as opposed to mentioning code with no or low-code. However, over time, as you get comfortable, you might feel inclined to dip your toes in.
Training: There are several online tutors and programs, some of those I will link at the end of this presentation. Large team tutoring may be available in the future as a consulting service, as well.
Resume? Heck yeah. You are upgrading your capabilities.
Training time: 1-2 months for individuals just slightly familiar with digital design. This is from no in-medium experience to being able to build designs relatively comfortably in Webflow.
Is this way of using Webflow unique? So far, in the 4 years since I’ve started this workflow, I’ve only met one dude in Scotland that is doing this with his team.
Money argument: Run a report and remove the time spent explaining designs, or just reduce it. Might also want to remove the bulk of wireframing and flow and interaction documentation. This alone should be convincing enough.
Communication argument: As mentioned previously, this eases communication. Think about all the times company relationships have been tested by lack of or faulty communication.

27 of 56

Action

28 of 56

The Mindset

29 of 56

The circle box of life

There is a semantic rhythm to the web… in the form of boxes. Everything is a box, but that’s okay. Clean up after yourself by packing boxes appropriately.

30 of 56

The Family Nest

</div>

</div>

/* You can use “pseudoclasses” to do cool

things like this */

.egg:nth-child(2) {

background: blue;

}

In HTML, there are parents and children. Children are also siblings to each other.

31 of 56

The browser is a flexible window.

Internet browsers aren’t fixed into set widths and heights foretold by breakpoints (mobile, tablet, desktop, and so on). Rather, it is fluid and flexible.

32 of 56

Use breakpoints where it makes sense

You are not restricted to the Designer view breakpoint UI. In CSS, this break-�point is declared with media and then the value of the browser window width when you want the change to start occuring.

Inside an HTML Embed element:

Webflow breakpoint UI buttons:

<style>

@media (max-width: 768px) {

.classname-to-change {

font-size: 20px;

}

</style>

33 of 56

If… then… or else…

Design for real world content.

The world is not one size fits all, and neither is content for the web. Ensure your designs consider variation and scalability.

34 of 56

Medium limitations are

crucial to designing anything worth experiencing.

35 of 56

Sketch the markup.

36 of 56

Sketch the design,

if you must.

37 of 56

Move to in-medium

to design and perfect.

38 of 56

Don’t get it twisted

Unless you are building a Webflow-hosted instance, remember to treat your designs�as what they are: designs. Do not get stuck in the particulars.

⚠️

39 of 56

40 of 56

Inheritance

Styles will naturally inherit those set�on its parents. This can be used to�your advantage. Refrain from repeating yourself and “set it and forget it” whenever possible.

41 of 56

Giving a class a name makes it unique and reusable.

/* CSS Styles */

.apple {

sweet;

red;

tangy;

tree-fruit;

}

</div>

42 of 56

43 of 56

We can start to say things about elements (children) of an apple.

/* child classes */

.apple__stem {

woody;

brown;

inedible;

}

.apple__leaf {

crisp;

green;

translucent;

}

44 of 56

But, not all apples are red!

/* modifier classes */

.apple--green {

green;

sour;� grandma’s;

}

.apple--rotten {

unhealthy;

smelly;

moldy;

}

45 of 56

Bring it all together to create complex designs.

</div>

/* CSS Styles */

.apple--rotten {

inedible;

smelly;

Moldy;

/* nested styles */

.apple__stem {

shriveled;

black;

}

.apple__leaf {

dry;

brown;

opaque;

}

46 of 56

47 of 56

What this looks like in Webflow…

48 of 56

Positioning

Since free dragging and placement isn’t an option we are given properties that allow us to break out of this flow.

49 of 56

Controlling the display of flow

There are five important display values used to specify the basics of how that content (or its children’s content, in the case of flex and grid) should be rendered.

50 of 56

Now that’s what I call display 😎

Don’t be afraid of flexbox and grid. They are the present and continued future of layout design… and there is more to come.

51 of 56

Conclusion

52 of 56

Three good reasons to go in-medium:

👯‍♂️ Get ahead of the curve and bring digital medium into your design workflow. Show the product sooner to benefit your team, sales, and user testing.

🤳 Up your design game by experiencing the design sooner,�in turn allowing for a better understanding of how your experiences will actually be experienced in the wild.

❤️ Have better relationships with your team and clients by speaking the same language.

53 of 56

Resources

54 of 56

🙅‍♂️ Multi-user Support & Team Versioning

Multi-user collaboration — similar to how developers maintain their collaborative and synchronous workflow — is not yet a feature of Webflow. Until it is, only one individual can work on the site at a time.

There are two wishlist tickets up for this. Put your votes in!

55 of 56

📚 There’s more material in the wild…

📓 Webflow’s own 10 reasons why design teams should use Webflow »

📓 Free learning library: Webflow University »

📓 Download Firefox and use Inspector when you get stuck: Demo »

📓 Design Code’s ($) Webflow Course »

📓 Nelson Abalos’ Live Streams »

📓 Get great ideas and see how the person made it: Codepen »

📓 Extensive code syntax and specifications: MDN web docs »

📓 Ask the world for solutions: StackOverflow Questions »

📓 Jennifer Parson’s extensive list of resources »

56 of 56

Q & A & Thank You

Access this presentation at danarbello.com/ncc-in-medium »