[UX] What is the best wireframe tool for UI design?
Recently there are lots of UI design tools. However, there are not so many agreements which design tool is the best. They support lots of functions for the collaboration, but we still need to talk about other points about the tool. I believe this is the reason that each company just require so much different skills of the tools at work.
Mostly when we talk about this topic, I have seen many of articles considering only wireframe work. I know that work is mostly shown to counter-workers or decision makers, but we need to discuss more than just wireframe work.
As I said in the previous posting, wireframe work is one of the work for all steps in the project. I think we can improve our productivity of the work more than just drawing that.
Of courser, some people can say that some of wireframe work tools are the best. I don’t mean I disagree with that, but I think that may not be the best tool for all steps including communicating with counter-workers like developers or testers.
There are lots of reviews about just wireframe tools, so I am not going to do the same things at this time. I would rather say how to use PowerPoint as the tool than others in this posting. (I have thought this tool, PowerPoint, has been always the best tool to me on all steps in the project.)
I leave some websites that reviewed and compared wireframe tools just in case. https://thedigitalprojectmanager.com/wireframe-tools/ https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
1. Draw wireframe
Do you know you can draw most of the shapes and lines? This means we can draw almost everything that we want.
After you draw some lines or shapes, you can change their properties like type of lines or color to fill in. For now, we can set the color transparency, that must be so much powerful to draw the wireframe. We can even give the transparency when we set the color gradient. (I really love this options though.)
For more information, we can change lots of properties of textbox. I think most of wireframes are consist of labels or layout including some shape and lines, so this tool is very important for sure. (Plus, here is the tip that you can use the square shape instead of the textbox tool. Choose the square and type any character from your keyboard, it will be same with the textbox.) I surely set the margin 0 of the text option when I use this function. You can be less interrupted by textbox overlapping with the option.
Moreover, we can edit the shape like vector way, but this doesn’t mean the shape is changed to the vector shape. This function can be very powerful with flipping and grouping the shapes. We don’t need to use Illustrator to draw some complex shapes.
When I draw some flowchart, I sometimes use the group of textbox and shape more than just text in the shape option. If you want to show the one-lined text in the shape, group the textbox and shape. After you do this, you can save some spaces for that more than just extending the shape to show the one-lined text in the shape as below.
Lastly, when you copy some objects, use the hot key. You can choose and add the object while pressing the control key on your keyboard, and copy the object with control and shift key on your keyboard to keep the same vertical or horizontal line. (This is very useful to make your wireframe well aligned for sure.)
2. Make the relations
PowerPoint have the functions to add the hyperlink and move to the pages, but I don’t use this one so much. I think this functions is very good to show just the concept and move the pages, and lots of wireframe tools focus on this kind of functions. By the way, I haven’t seen so much counter-workers who use the functions to understand the documents because this is still so much time spending work to view all of them, and I can’t imagine that the page relations is changed. That must be sick and tired of all workers to review all of them.
What do we do for this? Surely, that is necessary to make the document for sure.
I would rather use the find functions and page title hierarchy. In this approach, I create the title text without any redundancy, and then I state the title text in the document with the different colored highlight. If so, other counter-workers can recognize this is related to other pages and they can search the title text and move to the page directly. This can be very expandable and easy to move the pages. When you use the hyperlink function, you should make the screen fully and presentation mode. That must be very tough to others, that is not so much helpful to the productivity for all workers. However, in this approach, you must be a little bit creative to make the title hierarchy. Create the title text intuitively by using the hierarchy or some numbering. (I use the numbering when I need to make more than one pages in the same topic.)
3. Manage the version
When we let people know which part is changed and what your comment is, that is always hard for all workers. I mean we may know them easily and used to the wireframe tool, but other workers are not responsible for that tool so much. This can be the hurdle when we communicate with them, and that is very time spending sometimes. That’s why I have been thinking how I can be efficient to share this information, and get their opinions from the same document. Long time ago, I tried to use the collaborative tools based on the server and client, that tool was very good to share the opinions, but that is not good to other work like wireframe or independant work. (I have to always check in to change anythings or I need to connect the server as always. That must not be so much efficient for all workers as well.)
First, when you have any changes from the current document version, add some comments with the memo function. You can move the memo icon wherever you want, and your co-workers can comment on it as well. This function is very powerful to find out the pages that has been changed. When you press next memo from PowerPoint, that leads to the pages changed.
Second, leave the history of the document in another pages as below. You can double check the history and which pages are changed in each version and page.
Be sure one thing to be done on this way. After you distribute the new version of the document, you should delete all memos from the previous version of the document.
4. More discussions
As I mentioned, there are lots of good wireframe tools and I agree with that, but that is not always best to do UI design work. Of course, if there are lots of resources in your team, and you just need to do wireframe design, there is no doubt considering the best wireframe tool. However, I haven’t seen such a dream team, and I haven’t heard of the best story at work. UI design role is always more than just designing the wireframe to me. In this point, I wanted to share my experiences at work, and hopefully that can be helpful to you guys somehow.
In the next posing, I would like to share my requirement analysis ways. That must be a very important step to start of any kind of IT service projects. See you next time.
P.S. I don’t have any connection to Microsoft, and I am not just fan of the program for sure, by the way. Please don’t be aggressive about that.
댓글
댓글 쓰기