How do you wireframe / sketch out a website before you start building it? Do you prefer doing it by hand or do you have some recommended software?
For further actions, you may consider blocking this person and/or reporting abuse
How do you wireframe / sketch out a website before you start building it? Do you prefer doing it by hand or do you have some recommended software?
For further actions, you may consider blocking this person and/or reporting abuse
Yogesh Chavan -
Wiliam V. Joaquim -
Michael La Posta -
Riddhesh -
Top comments (11)
For true wireframing, I've used Balsamiq which was pretty straightforward and easy to use. I've also used Figma recently to mock up a few ideas — it's definitely way more feature-rich and goes well beyond wireframing.
I'm far from an expert though and am looking forward to other replies.
My girl also used Balsamiq. Will check out Figma thanks :)
Wireframing first is great because it gets you thinking about the structure of the page without much sugar / design over the top of it.
If a wireframe looks and feels good, when it then translates to design stage, you can almost be sure it will work well.
We recommend Figma just because it's completely free, it's great for collaboration (real-time collab) and once you've done a wireframe, you can easily create a copy of the document which implements real design elements.
Also, a tip our mentors generally give is to build a low-fidelity version of a design before going all-out on it. Building low fidelity (i.e. all grayscale, stock images) really limits your options and forces you to think about hierarchy properly. This is almost halfway between wireframe and full implementation. Give it a go and you'll see what we mean!
Hope this helps!
I second figma! Use it all the time ☺️
I always use Adobe XD for this purpose. I feel like you can prototype anything in the UI, like navigation, animations. Although it's not that fast to transform your ideas if you don't know Adobe tools/keybindings. If I want to go fast I'll go with the classic paper and pen duo.
I personally use Adobe XD since, well, it's free and fairly simple to use. But basically any mockup tool will do the trick (even Google Draw is fine!).
Beyond tools, let me discuss my (amateur) process in the world of web dev:
Bottom line is everyone has a different approach, so just go with whatever lets you see the bigger picture without getting overwhelmed! Also try to "accordion" your layouts regularly, meaning grab the corner of your browser window (or wherever your software is running) and scale it around to make sure everything stays adaptive.
Anything that can draw a box and lines and text is fine. I like Keynote for that. Of course it depends on team, workflow etc. but if it‘s for the initial figuring out of stuff anything works. Recently I love iPad + Pencil + Notes for this. Just an endless freehand-note.
I usually buy or just use a free theme. But when I really need to do it I use draw.io, it's free and it does the job
Draw.io is great! I think this will be my go-to from now on. Minimalistic, 100% free, and really intuitive. I like it!
Hello! Creating warframes is relevant during the development process. This allows you to show the customer how close to his idea it is, and whether it is worth making changes.
When creating Wireframe, you must first make a sketch that will show the approximate location of the blocks on the page. Then Wireframe will describe them more precisely - here you specify which elements and where they will be located. The final version of what the page will look like, the application tab - mocap.
And when you want to show how the user will see the application interface, a prototype will be used.
But it can be said that the wireframe is an essential part of creating an application.
More information about the Wireframe and its functions and features can be found in the article.
I use Google Draw, sometimes gomockingbird.com.
One of my friends uses justinmind.com, while another uses iPhone note app!