Wireframes & UI as a developer - DIY vs Outsource
Hey!
I posted about starting my project a week ago, with a question about MVP. you can check it here:
https://www.indiehackers.com/forum/post/-Kv9k0xtYwuU7EJPuJAl
I got some very good tips. I'm basically want to help one-person Psychology clinics to run their business with a light CRM.
In order to validate that there is a product/market fit, I made a survey, sent it to some psychologists, collect data about their problems and willings.
Following Patric tip form my post, my next step is to create wireframes, - and let some future users play with it.
I started to prototype (in proto.io, a great product), but I feel it will take too much time creating 10+ screens alone, given I'm not a good or even know how to design.
So I check on Fiverr for some designers who can help me, but I want to hear from you guys some tips about making wireframes/UI before the rush to decisions.
Should I outsource this or take the time and make it by myself?
Something that has helped me with my side projects and work is https://zeplin.io/. It allows for fast and easy wireframing and it can help with the frontend design a bit, gives helpful semi complete CSS. Personally I think it would be something good to learn but this is up to you.
Best of luck.
Thanks Allan! Didn't know that exist. Cool one!
First of all, I think you should do it yourself first.
When you hire somebody, you'd want to be very clear about what it is he/she needs to deliver. The best way I know to achieve that clarity is to visualize how I'd like the system to work first.
I like patrics' recommendation to start on paper. It's quick and let's you get a quick overview of the screens needed and how they're interconnected.
For each screen I'd also jot down, what information should be available, what input the user should enter (if any), and what the preferred next action is.
Also, for each screen jot down what other screens should be accessible from this screen.
This will help you create a more refined prototype afterwards. If you're familiar with Powerpoint or Keynote use that for your refined prototype (one screen per slide).
To make the prototype interactive you could either do it directly from within Powerpoint or Keynote or for more refined interactions use a tool like InVision
Yap, a meta-description will be really helpful for each screen. Great advice.
I'll check Power point out (didn't think before it can be used for mockups also..)
Thanks Flitzr!
It's probably best if you do it yourself since it would also take some time (and half a dozend iterations) to communicate what you actually need and want to a freelancer. Especially if you are low on budget you (mostly) end up with people wo are not english native speakers, have a hard time to understand, etc.
It might make sense to draw the 10 screens on paper first so you only need to re-create the final ones in your prototyping tool afterwards. Paper?! You know, the funny flat things which are made out of dead trees and have a kind of ancient touch ;-)
Although my write and sketch with pen & paper skill is really bad, Im starting with that.
Thanks for your help! I really appreciate it.
Do it. You would not want to see my scribbles for early stages... #kindergarden Style ;-)
Mostly it takes a 2nd Iteration to be useful ...
Take the time to make it yourself. You can build wireframes in Balsamiq in a weekend.
PS. Sounds like a great market! I think you will be successful :-)
Yes, I think after the first paper ones I'll try Balsamiq. Thanks Zack! (Btw, love the work and transparency on codeforcash. Following your process for some time..)
Hi. I can tell you how to create a Wireframe.
When you create a project visaulization, you have to follow the sequence. First you make a sketch that shows the general plan. Then you directly create a Wireframe, which shows the structure and functionality. After that, the final mockup of the visual component is the Mockup. And when it is necessary to show the dynamics of the interface a prototype is used.
Read more about creating a Wireframe in this article