Design Process: From Pencil To Pixel

Every designer has a process to help them tackle a project and come up with a killer solution. Here you’ll get a peek inside my brain with a basic step-by-step look at my process. As an example, we’ll be using an infographic I designed for our Rush River Brewing Co. case study.

Step 1 – Research and Inspiration

BlogImage.1

After a quick brief of the project, the work begins. I typically start with research and inspiration, which amounts to a lot of Google searching and hitting my favorite design blogs.  I do this to get a better understanding of the project, see what’s been done before, and imagine what could be.

Step 2 – Sketching 

BlogImage.2

Now that I’ve got a few good ideas floating around my head, it’s time to get them down on paper. Sketching is one of the most important steps, allowing for rapid-fire ideas, without all the roadblocks of the computer.  I try to keep these rough, as not to get too attached to any one idea.

Step 3 – Taking to the computer

BlogImage.3-(1)

Once I’ve narrowed my sketches to the best of the best, I’ll take them to the computer and bring them to life!  Sketches don’t always translate perfectly from pencil to pixel, so it takes some tweaking and playing around to get things looking right. During this step I’ll also find the right typefaces and develop a color palette to work with-lucky for me this work was already done! All throughout this process I have others check out my work and give me their thoughts. It’s always good to have a fresh set of eyes and on a project you’ve been staring at for hours.

Step 4 – Finalizingfinal-infographic

It’s time to cross the t’s and dot the lower case j’s. In other words, check the details. While this is my least favorite part of the process, it’s an essential step to take a design to the next level.  Check everything, make sure it’s perfect and then check it two more times. And that’s it! By this point I have something I’m happy to show the client.

Process For Quick Turnaround Projects

Things can move quickly in web publishing. There are unannounced code updates that create bugs, critical pieces of information that need to be released immediately or looming deadlines that cause you to suddenly realize you need an extra hand (or several) on a certain project.

At WerkPress, we handle projects like this regularly.  Unfortunately, a comfortably distant deadline that allows for well-paced milestones doesn’t always happen in the real world. When your site needs to go live as soon as possible, we find a way to make it work. 

planThe Plan.

This is the most important aspect of any project, and doubly so when quick turnaround is a requirement. Start with identifying the problem. What is the desired behavior and how does that differ from what currently exists?

Example: The hover state for portfolio thumbnails should contain a title and excerpt on a light grey background. Currently there is no information displayed.

Next, try to imagine your user scenarios and account for anything you can think of. We may chime in during this step to make sure everything is clear.

Example: The title should display centered, in all caps, 16pt Arial bold, underlined. The excerpt will be limited to the first 40 words, 12pt Georgia and left-justified. All text will be in #000000.

When the cursor moves over the image, the text and background will fade in rather than “pop”. When the cursor moves away, it will fade out. If the reader clicks anywhere on the image they will be taken to the portfolio page.

This behavior only applies to the homepage. No hover states should be added to the portfolio thumbnails on internal pages.

buildBuild and Implement.

With all of the scenarios and details described, we can get right to work. Our developers incorporate all the necessary changes in one round of development. The code updates are deployed to your server and we’re ready to move into testing.

testTest.

Testing your updated code involves checking each of the required new elements to ensure they are present and implemented correctly, as well as accounting for scenarios that may have been missed during planning.

Example: Testing reveals fade behavior prevents links from functioning on tablet and other touch-enabled devices. Remove custom hover state from touch-enabled displays.

launchLaunch.

Once you have signed off on all the updates, the project is complete! You may opt to do a ‘soft launch’ at this point if your schedule permits, but often it’s necessary to move live right away. For this reason, we recommend carefully monitoring your site in the days following the launch so bugs don’t sit unattended for a long period of time.

maintainMaintain.

After launch, we typically stay on-board for an additional 7 days to ensure nothing was missed. Reporting bugs early on in the maintenance period helps give you the most stable release for long-term use.

If you’d like to learn more about quick-turnaround projects you can read about the Waterfall Model development process. It will help you identify the important steps to go from problem to solution in no time.

Sign Up

Sign Up for our newsletter here. We’ll send you cool WordPress tips, tricks, and news. No spam, we promise.

  • This field is for validation purposes and should be left unchanged.