My Journey to Be Hired by Webflow

Learning by Teaching

Each day I try to help others by answering questions in the Webflow forums because helping others has proven to help me: I get a more well-rounded understanding because some issues I have never thought about, I get to explain my process to others which makes more solid for me, and it pushes me to become better in order to be a credible source.

Sometimes I’m of no help. An issue is above my current understanding which gives me the opportunity to read about solutions from other members that I wouldn’t have been able to provide. That’s the best. Learning from other seasoned designers and developers who are pushing the limits with Webflow.

Does it make a difference?

Of course it makes a difference! Not only am I putting myself out there to be seen as an expert in the field, I am also allowing myself to learn from people who are way smarter than I am. It makes a huge difference to the people I help.

And it makes a huge difference in my day-to-day work. The solutions I read about translate into new functionality for the website I am maintaining as well as the redesign project I am a part at Hunter Engineering (learned more about utilizing the tab element from a question on the forum which is now a new component in the website).

Overnight Success

It won’t happen. Just a slow-and-steady push for progress. That’s the best that I can do. That fact is what will lead to my future success.

Stay tuned each workday to hear my journey to be hired by Webflow.

Icing With Interactions

I love microinteractions. They are the little cute changes of elements that a user doesn’t expect, but love. The name “micro” makes it sound as if it is an easy thing to think up and implement, but microinteractions take a lot of empathy.

How to Get It Done

As a user-experience designer — I’ve got to place myself in the shoes of the user as they try to reach their goals on the site I created. And after I know their route to their goal, I’ve got to place some magic along the way that not only helps them reach their goals, but is also intriguing. Just the right amount, like cake icing. Too much, and it can ruin the entire cake.

In other words, microinteractions have the potential to magically bridge the gap between the user and technology through an emotional and human connection, while also encouraging them to keep coming back for more.

What Do the Super-Pros Say

Dan Saffer, author of the book Microinteractions and VP of Product for Mayfield Robotics, defines microinteractions as “contained product moments that revolve around a single use case — they have one main task.

Check out Saffer’s one-page cheatsheet on microinteractions.

According to Saffer, microinteractions are good for:

accomplishing a single task and a single task only
interacting with a single piece of data, such as the temperature or rating a song
controlling an ongoing process, such as the volume for a song on Spotify
adjusting a setting
viewing or creating a small piece of content, like a status on Facebook
turning a feature or function on or off

Still Learning, and Still Teaching

Microinteractions take a different thought process, as we’ve noticed.

Today, I was able to help Sebasgaes, an awesome Webflow user, who wrote in the Webflow forum. He was working on a hover state microinteraction for a restaurant website.

He wanted to replicate the following:

And, what I enjoyed most is that I wasn’t 100% sure of the solution when I started, but as soon as I looked at it within the Webflow Designer interface — I knew what I was the easiest way for me to knock out the microinteraction:

After a little bit of testing I was able to recreate the interaction in Webflow. To do so, follow the following steps:
1. Add a wrapper div
2. Place the line and button within the wrapper
3. Create an interaction where the wrapper moves from 0% opacity to 100% opacity when the user hovers over the Div Block
4. Then, create an additional interaction where the title moves up 10px on hover and back down 10px when the user hovers out of the fotos container

You can view the steps in the following quick tutorial: https://drive.google.com/file/d/0BynZs0dQwPd_aEtKOFlfNVp2QmM/view

Use Your Icing

Now, as the chef of the web experience — use your icing. Use it sparingly, but use it with flare ;-)

Webflow and DNN

For the past 3 months I have been working on a redesign for Hunter Engineering. With the redesign I had a couple framework options — Bootstrap, Foundation, and a few other bare-bones frameworks. Then, Webflow became a viable option. I could use their exported CSS as the backbone, then build elements/functionality on top of it.

So, I took the plunge. New job, new framework, new gray hair lol.

To be honest, the process has been way easier than I expected. Everyday, I use Webflow to add, upgrade, or build an element to reach our redesign goal. But, there are some things that I am just not smart enough to complete. And, today I ran into one of those things.

Slider Within a Modal

Alright, quick backstory: each day a couple stackholders meet with me to go over where we are in the process, and to evaluate our next steps.

Today, one of the stackholders wanted to display an image in a modal, but there was an issue — the image would be more wide than tall. This is an issue because the image would be very difficult to view on mobile.

I felt there could be another way to tackle this with the little knowledge that I have about Javascript. Maybe we could create a slider within the modal. Sounds good, but we would need to make the slider dynamic.

So, first I created the modal and slider with Webflow, then we integrated the elements into our site.