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 simple of act 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, simply turn your sketch into something more appealing and visualizing. Designing in the digital space has two parts; one, simply create a black and white outline of your wireframe (like your sketch), with additional annotations, and interactive concepts in your notes. The second, would be to add some filler text, color and placeholder images, to help you imagine your design coming to life!
After hours of initial designs and wireframes, its 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, before you start an coding, it is key to start with a simple wireframe.