A new website for a new venture

My selfie

James Turner,

Tags: Web design Web development

It's not often these days that a designer gets to work on a brand new business venture. For this reason, I felt privileged when my friend and former colleague, Steve Giles, approached me to work on his new website, Real World English (see Figure 1), and I was determined to do a professional job.

The Real World English home page, desktop view
Figure 1: Content is the star on the Real World English home page.

The brief and kick-off

Steve's needs for this project were fairly simple. He wanted an online presence with which he could promote his language training business, advertise his publications, and write about his ideas and philosophy towards international communication. In essence, he wanted a blog with a few added features, but he was keen to avoid a “generic Wordpress site”.

Early on in the process, I asked Steve to do a card-sorting exercise that I adapted from Margot Bloomstein's Content Strategy at Work (2012). I gave Steve a long list of adjectives that might describe his vision, and I asked him to pick five that described what he wanted Real World English to be, and five that described what Real World English definitely wasn't. We discussed his choices in detail, and I tried to coax as much information out of him as possible. I came away with some fantastic insights into Steve's concept, and all through the project, we came back to this exercise, probing and cross-checking to make sure our ideas were in alignment.

Regular communication kept us focussed

One thing that stood as potential barrier to finishing this project was that both Steve and I had full-time day jobs when the project began. For this reason, I got into the habit of emailing an update to Steve once a week or so, and we also caught up on Skype every two weeks. We didn't always have much progress to report, but it was a good way for me to double check the finer points of Steve's vision and to prioritise next actions.

Content first

Designing a site with placeholder text isn't ideal. What if the headings end up being much longer or shorter than expected? What if the final content includes special characters that cause an error in the CMS? What if posts need to contain not just text but images, videos, or tables of data? What if, what if, what if.

I encouraged Steve to write up content for the site as a matter of priority. I came up with an Excel spreadsheet with a list of the elements on each page for which he needed to create content—headlines and body copy for each page, as well as teaser text, blockquotes, alt text for images, and so on. I also included a few editorial guidelines, like an approximate word length for each element, and hints such as “This teaser will appear on the main ‘Blog’ page, as well as in search results on sites like Google.” This tool gave Steve an insight into exactly what was required, and he was able to manage his workload accordingly.

Mockups and prototypes

Should we, as web designers, roll up our sleeves and get coding from the outset, or should we design everything meticulously in Photoshop or Sketch first? My approach to Real World English was somewhere in the middle. I started with a few low-fidelity sketches to show mobile, tablet and desktop sizes. I then created a mockup using w3.css, which demonstrated the navigation and content of the final site, but contained minimal visual styling.

Once Steve was happy with the functionality, I got on with the visual design. The conversations we'd had about the tone of Real World English were really important here. It was essential that all choices, from the typefaces to the colour scheme, said something about Steve's vision. I was at this point that I started work on the logo, too.

A place called home

Sometimes, a project requires a few leaps into the unknown, and sorting out the hosting for Real World English was one such leap. Steve had already registered his domain name, but he needed a hosting service. For long-term simplicity, I felt it would be better to have the domain registration and hosting in the same place, so I recommended a provider and helped Steve transfer his domain across. It wasn't a straight­forward process—it involved several Skype calls and a week or two of crossed fingers while we waited for the transfer to take place—but we managed it in the end.

Work in progress

As far as I'm concerned, Real World English has only reached Phase One. There are things that I'd like to do with RWE in the near future that I need to brush up on. As it stands, the site is a static set of web pages that I can update quickly using Jekyll (which is a great tool for nerds like me, but not one I'd recommend for non-techie clients). Steve emails me new content, and I add it to the site within an agreed turnaround time. Not ideal, but it works for now.

The next stage is to implement the site with a CMS, such as Wordpress or Drupal. After a mishap early in my web design journey, I want to make sure that I don't just know how to install and use a CMS, but that I know how it works behind the scenes. Once converted to a CMS, the site will have the same look and feel as it currently does, but Steve will be able to write, edit and publish his content in an instant.

Conclusion

As first client projects go, Real World English was an incredibly smooth ride. On Steve's part, he was patient and had faith that I would deliver a high-quality website. On my part, I tried to be conscientious and to maintain an open channel of communication. The result is a site that solidly fulfils the brief.

The about page on Real World English.
Figure 2: The ‘About’ page on Real World English.
Skip to navigation