Now We’re at the Starting Line
In the last entry in this series, we talked about the initial steps Pleth goes through when preparing to design a website: the discovery meeting that sets the tone for the entire process, content collection (and its importance), scaffolding of information architecture and navigation, and the documentation of your design inspirations.
Now that we have all of this information, even if that process took a while, we’re at the starting line. Ideally, we’ve developed a groundwork of content and inspiration — an end goal that we can work toward. And if we don’t quite have as much information as we want, we’ve identified where the hurdles are and are prepared to jump them. In this post, we’ll give you more insight into where we go from here.
I’m going to talk mostly about how I do my job. Every designer does things differently.
A Note About Designers
I think it’s important to mention that the tools that a designer uses doesn’t define them. At work, I have one of those huge, 27-inch iMacs. At home I have a Windows desktop that I built myself. I run Photoshop on both and the work I produce is, for all intents and purposes, identical. A good designer is platform-agnostic and should be able to produce something that meets the project’s goals, regardless of the methods used — even if they have to sketch and make a mockup with paper.
And We’re Off...
The first thing I do is choose the size of my design document; the Photoshop file that will later become the proposed design of the website. StatCounter says that the most common screen resolution for desktops is 1366px by 768px (on 11 Aug, 2017; I’ll get to mobile devices later). Since websites scroll vertically, I don’t worry much about the vertical size. As I continue, though, I keep in mind that all of the content will need to look great on all screen sizes.
From there, I’ll take the content, navigation, and design notes that we established and discussed and begin adding components to the design — header and navigation, hero image , interior content, page footers, posts, images, and so on. Each component is designed with resizing in mind. We don’t have time to make a mockup for every device, so we normally start with a home page mockup, an interior page mockup, and a mobile design mockup (at 320px in width; Ivo Mynttinen has good information about iPhone screen sizes for web development). Every choice that I make in the design is decided through careful analysis of all of the information we collected at the beginning of the process — who is this for, what will it do, and what is the goal.
Once we’re finished with a design, we export the mockups as flat images and present them to our client via a previewer that allows them to see the designs in-browser. They give us feedback, we give an explanation and validate proposed changes, and we update the design. This collaborative effort yields a product that everyone is excited to build into a website.
Passing the Baton
We take care in preparing our designs for our development team. We note information such as the fonts and colors used, and the sources of the images (including cropping them to the correct size) in as much detail as possible. The work that we do here seems recursive, but spending time on this step allows our developers to work quicker and more efficiently.
The website is developed on a staging website (usually the URL the client has chosen followed by “.pleth.net”) and when it’s close to completion, we share it with them. They see a feature-complete, fully functional website, browse through it, take notes, and give feedback, which we apply.
Once development is complete, the designers review the website and mark any inconsistencies or bugs that may pop up during the development phase, which are corrected. The website is finally complete and ready to launch.
Crossing the Finish Line
Surprisingly, launching a website isn’t as much of a crowning achievement as people would expect. That’s because our work isn’t over. After the launch of a website, we enter a grace period of 30 days in which we allow changes to the website, sometimes even large changes, to make sure that the website works as intended and achieves the goals it’s intended to achieve. We also do a code review to make sure that the website is clean and efficient as possible, post-launch.
Soon after launch we schedule training sessions that will teach the website maintainers to update content, add pages, add menu items, and more; all for no extra cost. After training is complete, we will check up and help maintain and occasionally update the website’s systems.