Quick and easy question today. What wireframe process are you using in your web design process? I’m on project 4 of the responsive web design section, and this will be the first time I draw up a wireframe to start with. I’m curious what this forum recommends, as most articles about wireframes that I have found are written for people who are already familiar with the practice and are looking for a change. I am of course just looking for recommendations on where to start with this.
Appreciate any responses! These are a few thoughts I have if they are helpful for responding:
I think that sketching or using a whiteboard might be the best way to start out with wireframes so that I can make changes easily, and I don’t need to learn wireframe software while also learning wireframing. This could have the downside of getting comfortable with sketching and not being familiar with cloud software solutions later on, meaning I essentially learn wireframing “twice”.
I’ve found a lot of good articles on best practices for naming conventions, CSS Grid, Flex, and more. I can’t seem to find good articles on wireframing. Is this done just however you want to sketch it out, and there are no important “pieces” to include other than the outline of the website and a few sections named?
I’m wondering if there are solutions that are universally accepted in production teams that I should learn now, or if I’m good to use whatever I enjoy and the skills will transfer over easily.
If you know CSS Grid, you can probably come up with something less generic, but that’s just a post layout I remembered off the top of my head. This May Help.
Most companies I work for use Photoshop for wireframes. However there are other solutions people use. I like Balsamiq myself but only used it while I was freelancing.
Thank you for the feedback. I am currently using wireframe.cc and it was pretty quick to pick up. I don’t believe it’s worth the cost they want for premium so I am still looking into other options.
I look on the wireframe stage as just a very basic layout . To give you an idea of what is needed on the site, how it all fits together responsively, ideas on how it functions. For this I just use google sheets as it’s quick to use, and does what is says on the tin. Might seem a little basic but this is what your wireframe should be
Any design aspects and prototyping can then come in the next stage.
Thanks for the suggestion @Alveek! Figma looks interesting and I’ll have to check it out. Your example looks like a fully designed page, far beyond wireframing, but if it can do that then I assume it can do wireframes as well.
I will keep this in mind for the future. I won’t invest money at this stage in my learning, but the license being one price of $89 sounds a lot better than the monthly subscriptions most other sites offer! Thanks @jameskomo.
Do you use borders on google sheets to create your wireframe? Do you have an example by any chance?
What does this next stage look like for you? Is there software you use for this step?
Yes to the borders and all of sheets functions. I’ll do mobile viewpoint then desktop viewpoint on each tab showing the responsive change. Each tab then represents a page in the site
Design /prototype stage all depends on who you doing the site for and what their requirements /knowledge / needs are. By this I mean how much like the end product it needs to look , and function. There is a multitude of tools on the market.you could use here almost to many. I’ll use anything that’s free so gimp or Inkscape or one of thousands of online free trials you can get.