WIREFRAMING
Wireframes are like blueprints for your website. They're lo-fi examples of what you’re trying to create. From boxes, lines, ands scribbles brainstormed and sketched on napkins to more detailed digital renderings, they can look different depending on the context. For what we’re talking about here, they’re basic sketches that show the layout and structure of each page illustrating how you’re going to accomplish your goal for that page. It’s helpful define a goal for each page first, for example if I’m designing a website for a jewelry company, the main goal for the home page is to spark interest and engage users further into the site while the goal of the about page is to share the companies story and build relationships with customers—everything added to that page should contribute to reaching those goals. Whether you're starting from scratch or evolving an existing site, this is the first step.
Wireframes serve as a map of how you want your site to function, planning out where to place text, buttons, call-to-actions, and images to ensure you're communicating what your business is about and reaching those goals effectively. Basically making sure the function is there first and then moving on to the look & feel once that’s done. Using apps like Figma or an iPad and Apple Pencil have made it pretty easy to create these digitally but they can also be scratch paper sketches (my forever fav method). Starting on scratch paper is helpful because it’s easy, it lets you focus on letting your ideas flow instead of getting caught up focusing on the tech.
Creating wireframes can be time consuming, tedious, and divisive— a lot of designers like to jump in to designing straight away. While this might work for them and is cool if you’re creating for fun, I would not recommend going that route for time-bound projects or for beginners unless you want to end up 4 hours in, knee deep into 3 different designs, going back and forth between font choices with absolutely no thought given to the flow and efficacy of your site. Wireframing is important because it allows you to plan out the user flow, strategize how you’re going to reach your goals for each page, and identify any potential issues before you get too far into the design process, saving you loads of time, energy, and and money now and down the line. All that to say, it’s just too easy to get lost in the weeds. By investing a bit of time and energy into creating wireframes before diving in, you can ensure that your website is interesting, easy to navigate, and that users can find what they're looking for quickly and easily; then you can focus on the arguably way more fun part (look & feel) confident that your function is fire.
