Can you tell me the right way to do wire-frames?

Thanks for support from HAWK that approved the idea to create sub-forum for new people in UX World to create fake project or actual project to develop their UX Skills.
Now, i have working on it and i am on step where i need to do wire-frames, and i have some problems with it.

i know wire-frames is to make UX Designer see the potential issue in their apps and fix it before it become complete product. i have learned techniques including user flow, (low, mid, high) fidelity wire-frames. i saw a lot of people doing low-fidelity WF by using paper and pen and they create so many design before they choose one of those to proceed to mid or high-fidelity WF. but, for me, i always end up doing it in my Adobe Illustrator instead of paper and pen. i dont create so many designs too. i only go with my first design (usually what come to my head). Usually i always get new design after i designed my first design in Illustrator.

so my question is :

  1. is it okay to go with your first design instead trying a lot of design ? in this case, i dont know too much interfaces, so i just go with interfaces that i have seen before (i have Japanese dictionary in my phone called Kabuto and i use that as reference)

  2. is it okay to do low-fid WF in illustrator instead doing it in paper and pen ?

Thanks for reading my post. :slight_smile:

Great questions. :slight_smile: Here is my opinion:

1 - I think you need to consider this on a case by case basis. Your designs should be based on what your potential audience want or need, not necessarily what you think will work best. If your first design meets the brief, then good on you!

2 - Definitely. There is no wrong way. If that works for you, go for it. The only time I could see it being a negative would be if it took a really long time, which isn’t necessary at that stage of the process. Doesn’t sound like that’s the case here though.

wireframes in paper or illustrator ? :wink: the big question, I think paper is used because is faster, you can create so many options specially in the beginning, that is useful just to draw a rough wireframe and then test the elements I guess…and THEN you can go to illustrator or any prototyping tool to continue with the lo-fi…I need to practice more "paper and post-it technique :wink:

yeah. i know a lot of people use paper because it more faster and you can doodle everything that come up to your mind pretty easy with paper.
but for me, the idea come after i see how my first design looks like. after i see it how it works and looks, so many ideas come up to me and i start up making it in my illustrator while looking for another idea.

recent example is when i created my game design idea for game design contest. i came up to doing 3d spy game in android. after i created the first design, i feel its pretty hard to use in android because the UI is get on the way of player. so, still on my illustrator, i changed it into top-down PoV so it wont get on the way player play. after i finish with the design, i think that the design is too plain and there is no charm on it. i changed it again with 2d side scroller. that design is really make me feel satisfied and i submitted the idea.

right now, i am building UX design with my fake apps and i am still using that way. :smiley:

My two cents :slight_smile:

  1. Generally the ideas behind trying to come up with as many designs as possible are that you might come up with something truly unique, you can give more design rationale behind your choices, why you are doing something over another option. You can test it with potential users to quickly and easily see what will be problems, and what are good solutions. You also don’t become married to one design. I agree with @HAWK it does very much depend on your potential audience though! Generally it can be a good idea to show them multiple options and get feedback. I think this might also depend on experience, because if you have worked on a lot of projects, and have a lot of research to back you, you may be able to provide more design rationale off the bat, and not go down the road with ideas you know don’t work as well - but this would only be to a certain degree because everything is specific to your audience.

  2. Not usually done, not to say that you can’t. @visualbug was quite correct that it is a time thing. It means you don’t get stuck in pixel perfect world, creating something that looks wonderful before you’ve actually fully thought through the ins and outs of functionality and whether it will be a great experience or not. The other problem with illustrator is that it is harder to create lower fidelity, and then people think that you are closer to the solution than you might be, then they have different expectations around your timeline. No one thinks that a paper and pen sketch is the finished product (unless you are awesome with sketches) :wink:

Thanks for the reply, Natalie. :slight_smile:
i always think doing it in pen and paper is more better. because it faster and not spend too much time.
but like i said, the idea come to me after i make the design. if i just think and doodling in paper about the design, sometimes i cant come up with good idea. i think i still need to know how UI design work and to know more about UI layout. do you know where i can learn more about UI layout ?

i want to ask about lo-fi wireframes too. i saw video about UX designing, and in that video, it showing that lo-fi wireframes is when you finish with the user flow and you move to paper to create bunch of design ideas. after that you choose 1 that you think really suit with app then you can move to mid-fi or hi-fi wireframes. Right now, i am trying make UX design based on fake app. i follow Ed Lea portofolio about UX design process ( in there, lo-fi is happen after the whole mock-up already made. so now, i am a little bit confused which one is lo-fi.

No problem Kibou :slight_smile:

What kinds of things do you want to learn about UI layout? Do you mean things like design principles such as the Gestalt, or actual design?

There can be a bit of confusion around terms with UX. In particular I think that mockups, wireframes, and prototypes can be confused together, and when you bring in fidelity that can also cause confusion.

Generally fidelity is the level of… “polish” I guess that your design has. So low fidelity are generally things like sketches, balsamiq mocks etc. Things that aren’t pixel perfect and can’t be considered the final design. High fidelity is generally when your design is finished or you need a high level of polish in order to present your idea. So it depends on your audience and what asset you are supposed to be giving them. For instance, if you are showing a storyboard and trying to sell an idea, you usually use high fidelity designs.

[B]Wireframes: [/B]These are about functionality, such as navigation, spacing and prioritisation of content, and placement of different elements. They generally don’t include any styling, colour or graphics.

[B]Mockups: [/B]These are generally done after wireframes, they are more of a final result of what your product/solution will look like. These can blur into prototypes as some people do them in design programs, while others jump straight to html and css.

[B]Prototypes: [/B]These can be low or high fidelity. These are generally used to test functionality, behaviour and interaction. They tend to be click through either images, or even html based.

So in terms of the process that I am used to, after you have completed your research, defined the problems you are trying to solve etc, you then move to ideation, where you come up with IA, journey maps etc. Generally after you have an idea of what you are trying to achieve and for whom, you can start sketching out ideas. After you narrow them down to several solutions you can then move to wireframing them.

I hope that helps.

i look at the site again. it does said “Lo-Fi Mockup”, so that happen after they make all of the wireframes, right ?
actually, i want to learn both. but right now, i think actual design is good for me. because i learn with doing practice and look at real thing rather than read theory. i am lack of knowledge about UI layout because i dont see many apps UI layout. so, i get the idea from the layout that i already see.

your explanation really help me, Natalie. now, i understand between wireframes, mockups and prototype. i talked to my friend yesterday about UI/UX in game and he said that UI/UX designer need to have skills to make prototype of their UI so he can look at what problem occur in their UI design. i understand about the process too. i need to learn about fidelity too now. so, i can make different between low, mid, and high. :). Thanks for explanation. :slight_smile:

i am making UX process of fake app based on Ed Lea portofolio. Can i show it to you after i finish with it ? :slight_smile:

We have an amazing wireframes article/vid that has been in the publication schedule for a while … it’s just waiting on a couple of things before we can release it. Hopefully soon!

Of course! Looking forward to it. :slight_smile: