Wireframe It Up!
If you’re a designer, or just happen to be somehow who is fascinated by website design and user experience design, you may be familiar with the art of wireframing. For those who are new to the whole field, here are some essential tips when it comes to starting off your design process.
Start with Sketching
It may seem like you are traveling back in time to your childhood to the days of drawing and coloring, but this is one of the most important steps when it comes to wireframing. The simplicity of this connection between paper and pen, sketching out boxes for a layout can help you visualize what your website or app may look like.
Once you are happy with your pencil sketches of your design, turn to the digital space, whether your favorite tool is photoshop or illustrator, turn your sketch into something more appealing and visualizing. Designing in the digital space has two parts. First, create a black and white outline of your wireframe (like your sketch) with additional annotations and interactive concepts in your notes. Then add some filler text, color, and placeholder images to help you imagine your design coming to life!
After hours of initial designs and wireframes, it’s time for you to test how your website or app would function. There are many apps and tools available for you to get a head start in testing the interaction between the pages.
Here are a few to get you started:
Remember, for your next upcoming project: it is best to begin with a simple wireframe before you start coding.