Freebie Friday: UX Responsive Notepads

In 2015, search queries from a mobile device outpaced searches from desktops. The fact that most queries begin on a phone or tablet means that your website needs to be responsive to reach your potential customers. In addition to providing a superior user experience, responsive sites usually rank better in search engine results and load faster. When redesigning an existing website or launching a new site, designers need to consider how a website will display in different environments.

Updating Sketches for the Digital Age

In a time when digital reigns supreme, the art of sketching often gets pushed to the back burner. Some designers can become discouraged based on their lack of confidence with their drawing ability, but a sketch doesn’t have to be perfect. A basic sketch made up of shapes is more than enough to get the ideas across. 

The design team here at Monkee-Boy sees the necessity of hand-drawn sketches and wanted to create something to aid in our website redesign process.

The result was a series of UX notepads that focus on responsive web design. These tools often come in handy when a quick, but legible, wireframe is needed, be it to use on the go or during a meeting. They allow the designer to increase the efficiency of their wireframe sketches, especially with the use of a UX stencil. Ideas can not only be transferred to paper quicker but also with greater precision.

What follows is a brief explanation of how we use these UX notepads to improve our design process and client deliverables.

Research

The first step in any website redesign project is to gather client information. Collect as much information as possible since this will enable you to have a better final product. After you have reviewed the material provided by the client, it is time to start researching. Look at what the client’s competitors are doing, and make sure to also look for ideas in other industries. Starting collecting examples of elements to include, whether you print them out and put them on a bulletin board or keep track of them digitally on Pinterest or another visual platform. Although this isn’t the most glamorous step, the more research you do, the more ideas you can incorporate into the final design. The result of this research will help better inform a unique and contemporary design that stands apart from the competition.

Sketching

When you look at a website, it’s hard to remember that at some point it was merely a sketch. Multiple versions were created; some good, some bad. It’s important to remember that your first idea is rarely your best, so don’t stop when you think you have created a masterpiece on the first go around. Create as many variations as possible and pick and choose different aspects from each iteration to arrive at a final set of options for your client.

From Paper to Digital

Once your sketches are complete, it’s time to go digital! Now your vision can begin to take shape.

Testing

Even though you might think your design is perfect, it’s important to keep testing different elements to see which will best suit your client’s personas. No matter what, there is always a way to improve. Start off by performing a user test with multiple people that fit your targeted audience. Have them go through all of the scenarios that might create a less-than-ideal user experience  and see how they react. As they explore your prototype, record all their responses and adjust your design accordingly.

Final Product

Once you have gone through this process, you will have a well-thought-out design—one that has a purpose and reflects the intent of your target audience.

This Monkee-Boy designed UX notepad was created with the needs and priorities of designers in mind. The templates work in unison with any standard UX stencil and allow the designer to create wireframe sketches with ease. There is also a slightly heavier dot that runs down the middle of the screen grid, making sure the user doesn’t waste precious time struggling to find the middle of the template. The simplistic design keeps the focus on the sketch and leaves ample room for notes.

Download Our UX Responsive Notepads

If you need help getting started with your project, Monkee-Boy has a printable PDF of our UX wireframe template for your own use. The notepad includes an area to make notes, as well as fields to list the project name, client name and version. Interested in the stencils themselves, here's our recommendation.

Need a responsive website? Monkee-Boy can help! 
Give us some more information about your project, and we’ll be in touch!