Family on the Move

Project Details

Web Design and Development
Adobe Photoshop, HTML, CSS, PHP, WordPress, Thesis Theme dev.maddon.net/fotm

Mike was moving to Spain with his wife and kids.

They had never been to Europe, but they were going there, sight unseen, fully committed to staying.

Furthermore, he was planning to stay there for at least six months before having to find a job. He would live off his side businesses, travel in and around Europe, and have the time of his life with the people he loved most. All while documenting the journey on his blog.

Below is a case study that details my web design process for this project. You might already know that I use the term web design very differently from other web designers. I believe it involves much more than visual design. So I work closely with my client every step of the way—from discovery to design to development to launch.

Discovery

In this initial stage, we discussed the client’s vision, target audience, and goals for Family on the Move. With the help of my website questionnaire and a few follow-up questions, I was able to understand what he had in mind for the project.

His core objective was to build an audience with whom to share his journey. He thought the blog could be like their very own reality show: Would they make it through the long trip with two kids? What would they do when they got there? Would they like it? Would they run out of money?

The website would feature blog posts and video content on various related subject matters: personal experiences, long-term travel, travelling with children, lifestyle design, minimalism, and more. The client and his wife, who would also contribute to the content, were especially enthusiastic about telling personal travel stories.

To go deeper into the project, I did research on the client’s peers in the niche, and on the niche as a whole. As it turns out, there’s a thriving online community of digital nomads and travelers, although relatively few who travel with small children.

Planning

I proceeded to plan the website based on the research and requirements I’d gathered. First, I designed the website blueprint. Then I created a content plan that would help achieve the project goals.

Since the project focused on a blog, this stage was designed to provide a starting point, not a conclusive plan. The blueprint showed the pages I was initially going to set up, but the client would be able to add more pages later on. The content plan would serve as a reference, but he would of course come up with his own ideas as well. The website would come with a CMS, so he would easily be able to add, edit, and remove web pages, blog posts, photos, videos, and more whenever he pleased.

User Interface Design

The client would write his own website copy and content, so we didn’t include a Copywriting stage. We proceeded to User Interface Design.

In this stage, I designed wireframes to determine the visual structure of the website’s individual pages.

Home Page Wireframe About Page Wireframe Blog Page Wireframe

Since the website’s core objective was to build an audience, the number-one call to action for visitors was to visit the blog and read the posts. This is why the latest blog posts are prominently featured on the home page.

For the interior pages and individual blog posts, I used the two-column layout the client preferred.

While the home page also has two columns, it doesn’t have the same sidebar width and position. I wanted this page to look like its own destination—to make the website look more like a website-with-blog, not just a blog. This was in line with the client’s request to lean toward static content on the home page. The layout variation also adds some visual interest, which I thought would be beneficial.

The client was happy with the wireframes, and agreed that the website-with-blog look was what he’d had in mind. After a few minor additions, we proceeded to the Visual Web Design stage.

Visual Web Design

In this stage, my goal was to craft a winning website design custom-made for the client’s personality, brand, and objectives.

In visual web design, I use layout, texture, imagery, and typography to communicate with visitors, appeal to their senses, and gain their trust. For any website, the goal is for beautiful design and engaging content to come together, creating a remarkable experience that will turn visitors into customers, clients, or lifelong fans.

It all starts with branding.

Branding

The client wanted to convey travel, expat life, family, minimalism, and a multicultural lifestyle.

With these in mind, I carefully chose typefaces and colors for use in the web design.

Typeface Choices Color Choices

After much deliberation, I selected Gotham for the logotype and Nevis for headings. These two typefaces were bold sans-serifs that worked well with the minimalist theme.

I selected Georgia for the body text. It’s a simple but beautiful serif typeface that’s very apt for storytelling.

I created a color palette with warm and earthy colors particularly suited for travel and adventure.

Color Palette Style Guide

Visual Web Design

I then proceeded to work on the visual web design.

After experimenting with a few ideas and elements, I came down to a design concept based on the client’s needs, preferences, and target audience.

Initial Home Page Design Notes on this design:

  • For the header, I used an old-style world map to emphasize the theme of travel and adventure, and to set the stage for a storytelling atmosphere.
  • I used weathered design elements to give the site a more human touch. Travel often has an element of ruggedness, which I wanted to reflect somehow.
  • An intro section on the home page serves to welcome visitors and introduce the people behind the website.
  • Below the header, it’s mostly clean and minimal. The client preferred a white background, and I agreed—it’s easy to read from, and makes an excellent canvas for photos and videos, which would provide the majority of the visual interest when the site was up and running.

The client’s impression was generally positive. He did have a few points of concern, though.

For one, he felt that the modern font clashed a bit with the old world map.

Also, he wanted to brighten up the colors a little. I had tried to find a balance between earthy-with-bursts-of-color and his request to avoid too-bright-and-flashy. I did plan to use bright colors for links on hover (not shown in the design comp), but even then, I may have erred on the side of too subdued.

Revisions

Revisions are a normal part of every web design project. After some clarifications with the client, I proceeded to work on the revisions and improvements.

I tried the client’s suggestions and my own solutions on the old world map, but the results were lackluster. Finally, I decided to remove the map altogether. This gave me an opportunity to explore new ideas that would also brighten the colors a bit.

I designed a new concept.

Home Page Design Notes on this design:

  • I went with the concept of a suitcase with travel stickers on it. While it still emphasizes the theme of travel and adventure, the mood it creates is a lot more fun than an old world map—perfect for a website whose subject matter includes children. The stickers also added bright colors to the design.
  • All the same, I tried to keep it clean and to continue using warm and earthy colors.
  • I made the intro section’s background lighter in order to call more attention to the welcome note.
  • All in all, I wanted to make the brightness just right—still considering that the client was going to post media later, which would provide much of the color in the main content area.
  • In the comp, I also highlighted two links, “Blog” and “Learn More,” to show what they would look like on hover.

The client was very happy with the second version. We were definitely on track.

About Page Design Blog Page Design

I then designed the interior pages. He sent his approval, and we moved on to the Web Development stage.

Web Development

Blog Page in Default Thesis Theme In this stage, I developed a WordPress theme based on the visual design.

The client requested that I build on top of Thesis, a WordPress theme framework known for its efficient code, good SEO capabilities, fast load times, and a powerful customization system.

Blog Page in Custom Theme I worked on a custom Thesis theme, using hooks, filters, custom stylesheets, and custom functions to make it look and work as close to the design comps as possible.

In line with best practices, I made my theme future-proof so that the design wouldn’t be affected if Thesis was upgraded in the future. In theme development, future-proofing is important if you want to have the latest features, capabilities, and security upgrades without having to rewrite custom theme code.

When it was done, I presented the website on my staging server for the client’s approval.

And then it was Launch time.

Launch

I transferred the website files and database to the client’s server. I then configured the server and tested everything to make sure the website was working properly. Soon enough, the website was up and running.

Of course, I provided a free technical support period during which I would answer any questions, help with the website, and fix any issues if they arose.

The client was very pleased with the website. It would serve as his platform to tell stories and build an audience.

How about you?

Whether you want a website for your small business or a blog for your life’s passion, you need a web designer who knows what she’s doing, cares about your goals, and works with you every step of the way. I’d love to help.

Click Here to Get in Touch