The marriage of web design, interaction, and content

By Quinn Zeda 9 Comments

In our first post, “How to Build a Brand and Start a Movement” we uncovered what Never North is, who its for, and the logo design process we went through.

Once you develop the look and feel of a brand the next step is to create the words and set the foundation for the site. This includes the content strategy, content, information architecture, and site map.

At the end of the day, it’s about consumption, connection, and engagement.  When design, interaction, and content work together in harmony, it’s a beautiful thing. It becomes an experience that meets the goals of the user and the business creating an awesome #win #win situation.

Too often these steps are an after thought, but if we want to make the web a user friendly place to be, this needs to be of upmost importance. If you do not set up a solid foundation, it will become chaos later.

I have almost all of my clients restructure their information when I redesign a website because they did not think about these things. Do it right from the beginning and save yourself a huge headache later.

Once we have a solid foundation here, we can begin the design process. So let’s get started.

Words are the heart of the internet

Being able to understand good copy and write a clear call to action is a very valuable skill to have as a designer.  These days, we are overwhelmed with content. A headline that attracts the right audience is more important than anything else when you just have a few seconds to catch their attention.

Justin Jackson says, “The most powerful tool on the web is words.” Words give you access to the heart and you can slam them right in the feels. The people you want on your site.

Too often as designers we take the clients copy and just slap it on the site, no questions asked. I believe this does a disservice to the client. It is our job to educate them because by getting them results they value our work more.

If words are the most important thing people connect to, we better start paying attention to them if we want our designs to get results.

Design is just an amplifier.

Developing a headline

When writing a headline it’s important to understand how you want to position the brand and how your audience likes to be spoken to. In our first article, “How to build a brand and start a movement” we went over the audience research we did for Never North. This research will give you an enormous amount of data that will help you understand what readers are relating to and how to speak to them better.

Since writing launch post I’ve found a lot of clarity. It’s okay to not have everything perfect, you just want it ‘good enough’ so that you can refine and adapt over time. Before launch I only had audience data from other sources. Now that we’ve launched I’m speaking directly to you guys and learning where I messed up and where I hit the nail on the head.

This allows me to focus the site and zoom in on the exact people we want in our community. I want people who are going to take action and make bold changes because that’s what it takes to find freedom in freelancing.

What is the number one thing that Never North readers care about?

Working on this headline for Never North was really difficult for me because I was so immersed into it that I lost perspective. I just couldn’t pinpoint it down into one sentence that encompassed it all and I was lost. This. Is. Hard.

With the help of Ramit Sethi I was able to narrow down what Never North is into three things in order of importance:

1. Doing great work and finding our freedom
2. Conscious creativity – Doing something good for the world
3. Community – Being surrounded by others doing the same.

Hello clarity. Thanks Ramit.

Before I found this clarity I was focusing heavily on the “why” behind the site and the message got a little lost in its vagueness. While we all want the world to be a better place, our BURNING PAIN is getting our soul sucked away in crappy work. We don’t really care about money, we want a freelance business that gives us freedom. Freedom to work on projects that inspire us. Freedom to live life on our terms. Freedom to live out some epic adventures and do some traveling.

Now we can start to focus the message on the site.

It went something like this:

1. Research and exploration
2. Write endless headlines (300+)
3. Have brainstorming sessions with Sukhneet, Trista, and Jess.
4. Bang head against wall. Repeat steps 1-3.
5. Sprinkle Magic Fairy Dust
6. The words magically appear.

In all it’s glory, here it is.

Art school never prepared you for the unwritten rules of design and business.

At Never North we demystify the process so you can find freedom in freelancing.

It’s still a work-in-progress, but I feel it encompasses the site good enough for right now. When I started finding meaningful work it unlocked my creativity and my best work starting coming out.

I started my freelance life right out of art school and it didn’t teach me anything about what I was to face or how to do great work. There were a lot of things that freelance sites don’t teach you about a creative life or they have tired advice that only led me astray rather than help me level up.

Never North is a community that wants to innovate, learn, take action, and grow together as we navigate our freelance careers to get the results we want.

I feel that the headline speaks to that. While not everyone went to art school, I think everyone can relate to what the headline says… 

What do you think? I would love to have your input in the comments to make it even better.

Content First.

Content should be first priority when designing a site and independent of design. We need to design for the content, not try to cram content into whatever space you decided to design it in.  (And yes, I know it’s hard to get content in advance, but you’d be surprised what a good process and explanation will do to a client’s behavior—more on that in a later article.)

What is Never North’s content strategy?

The idea behind Never North is to flip your switch and reset your creative compass. In order to do real life changing stuff I believe we have to cover the whole-self. Creativity is so fickle. If we are in a bad environment it can really take a toll on our creativity and work. If we aren’t productive we don’t get anything done. They all rely on each other.

This is what they don’t teach you in art school.

To do this our posts are divided up into six main categories. 

• Design – This is where you’ll find case studies, creative processes, and learn about how and why design decisions are made. I will walk you through exactly how I think like you are working right beside me to demystify the creative process.
• Productivity – We need to reliable in our duties and therefore we need to be productive in our work. We teach you how to tap into the time and stay in the creative zone.
• Entrepreneurship – It’s about time we start thinking ourselves as entrepreneurs, not just freelancers. Let’s build something we want, not a plethora of crappy projects. The moment I declared myself an entrepreneur is the moment I took control of my biz. We do not blame external circumstances here, we figure out how to create what we want.
• Skill Development – Always be learning. You want to specialize, but you also want to be a jack of all trades. Being able to speak other ‘creative’ languages will only help you grow. We go out and figure out what you need to know in a wide-range of skills so you can be a master at creating amazing digital experiences. In the age of technology, adapt or die.
• Lifestyle – Creativity suffers when your life is not in balance. We’ll talk about a lot of things here to get us motivated to make real and lasting change in our lives. We also promote travel. It makes you a better person.
• Community – We are all in this together and the pie is big enough for everyone! Here we’ll feature interviews and our fellow northies to inspire and lead the way.

Never North is a lot of things, but most of all it’s an education in how to live a healthy creative life.

Artisanal Quality

Quality is incredibly important in today’s world. There is soooo much content out there and it grows larger every second as more and more people are uploading stuff. Our attention spans have reduced from 12 seconds in 2010 to 8 seconds in 2013. Did you know a goldfish’s attention span is 9 seconds? That has to say something. ¹http://www.statisticbrain.com/attention-span-statistics/

By focusing on high quality, well-written blog posts with lots of supplemental graphics, charts, and sweet comics… we stand out from the rest.

If you don’t plan a foundation for the structure, it leaves it open to chaos down the line. To have a good experience the information must be organized in a logical way and be entertaining to read. This is something we’re working hard on at Never North.

Sure our content may be coming out slow during launch, but we’re setting ourselves up for long-term success by figuring out all these details beforehand. I still have some things to map out for content to ensure it comes out in the most logical order for you guys. I’m not just gonna throw things out there like a dart and hope one sticks. I want a community of creatives that get results and to do that we have to play smart.

Almost every new blog or website out there skips these crucial steps to come up with some sort of plan for their content and site architecture. Don’t you be one of them.

Site Architecture

When developing a site you must think about the path a user will take and the pages you want to lead them to. Design isn’t just about creating the look and feel, it’s also about creating an experience that is simple and easy to understand.

Never North just launched so we don’t have a lot of content to think about, but setting up the site with a good foundation will ensure that over time it retains its simplicity.

Simplify Navigation

Imagine going to a Chinese restaurant where there are 100+ meal choices to choose from. Takes you a long time right?

What if you were handed a menu with just 6 choices for lunch, how fast would you be able to choose then?

The same concept applies to websites except if users can’t make a quick decision, they just leave. Remember that part about attention span? If users don’t know where to go, they get frustrated and it’s easier to make no choice. Perhaps they go back to google and refine their search rather than searching through your site.

I like to have around 5 items on a header menu generally and sometimes more (depends on the site). From there everything else can go in a footer or secondary menu elsewhere. I do not use dropdown menus unless absolutely necessary. They annoy users.  ²http://www.nngroup.com/articles/does-user-annoyance-matter/

Don’t make simple and avoidable navigation mistakes. If you lead them through a logical order that is easy and simple to follow, stats increase and page views go up. These are results clients love and help increase your value as a designer.

Below you will find Never North’s site architecture. It’s still a work-in-progress and many of the pages here are not even created yet.

For this illustration I used this UX Kit on creative market which helped me create a fast, high quality presentable document to show clients in less than 30-minutes. Well worth the $29 for the time saved. 

Typography

The first thing I do when designing a website is pick out the typography I want to use for the content. There are great tools out there like TypeCast to make this process more streamlined.

We choose Tisa as our body copy text because we felt it encompassed the fun playful vibe of the brand, was easy to read, and matched well with our headline font Proxima Nova. I really wanted to use DIN for the heading copy around the site, but it was not easily available for web use. Proxima Nova was a distant second choice. At first I shed a tear for my loss, but Proxima Nova quickly grew on me as I accepted the situation and my OCD laid to rest.

After much deliberation and research we decided to have a larger than normal font size on the site. It makes our content look massively longer, but makes it easier for you to read. We want people at Never North to do the work and we require you to invest the time. The least we can do is provide a pleasurable reading experience.

Design Skills evolve over time

The inception of Never North started much much earlier in my life, but I began designing the site for the first time about 3 years ago. Unfortunately, life had different plans for me but it allowed the idea to evolve into what it is today as I learned, pushed my creative skills, and hustled.

This is a great demonstration of how my work has progressed in the past 3 years since I ‘quit’ my crappy clients. My old clients dictated everything I should do and placed little value on my advice. This is when I started to take things into my own hands and test new techniques until I got the results I craved. It’s a step-by-step progress that develops over time. At Never North we don’t promise crazy results in ridiculously short periods of time. This stuff takes work and a long-term dedication to success.

So let’s get started at the beginning of Never North’s design journey.

Never North Design Version One

I was obsessed with pirates. Never North was gonna be about pirates. Pirates are awesome. WTF? Was I thinking. This is embarrassing.

Why is all that useless stuff on the page?

Do you need more awesome? Do you want to sign up for more epicness? lol. That’s placeholder text, but still.

Done laughing? Wait until you hear the AMAZING songs from when I had a bunch of artists on fiverr make theme songs for Never North. This was the creme of the crop… the others are hilariously bad. 

Lulz.

Never North Design Version Two

Never North was laid to rest for about a year while I was dealing with some serious medical and personal issues. My skills continued to develop and when it was time to pick back up the project, I started over from scratch.

Things going wrong here: too complex, too designy, too much useless stuff on the page. Developers probley want to punch me in the face for all the useless design things I put in here that have nothing to do with the user experience.  Responsive? don’t even get me started… Back to the drawing board again.

Never North Design Version Three

I really liked the design in the last version but it needed to be simplified. I wanted the design to be flat, simple, but have some sort of uniqueness to it that other sites don’t have. The 3D gives the site a small performance hit, but since our audience is designers I went for it anyways. It’s different.

The idea was to have the site be playful and enjoyable to spend time on. We believe that life is a game and there’s no point if it’s not fun so we wanted that to be reflected in the design and user experience.  The 3D makes the site a bit more playful, dynamic, and fun.

This is not a complete comp, but I did not feel the need to design further out or do the responsive versions. Never North’s developer, Henry, is also a good designer so he was able to visualize and complete the site for me. This was awesome because I was slammed and needed the help. Part of being a successful entrepreneur is knowing when to delegate and where to focus your energy.

I know that people say design “mobile first” but I just can’t wrap my head around that concept when I’m designing. I have to design the full version first and then go from there. However, I do take mobile into consideration in the wireframes and sketches beforehand. We’ll go into this process in more detail later when we work through a client project live on Never North next month.

This post is already long enough, so in our next post we’ll go over how we took this comp and turned in into code working with Henry. You’ll see how and why we made changes so you can learn how to better work with a developer and design better responsive websites moving forward.

P.S. Click around “start here” “the code” “the blog” and “about” pages to see the AWESOME new sketch illustrations Piotr created. We weren’t able to get everything done in time for launch, but we’re slowly rolling out the rest of the stuff. : ]