Using wireframes for UI design and front-end development

Question

I created this wireframe/sketch to have a UI designer bring it to life, however I have some questions about the wireframe and grid system:

Link: http://postimg.org/image/npt5zlvu7/

1) Would I be able to approach a UI designer with the wireframe/sketch above?

2) During the UI design (feel and look), should we pay attention to the fluid grid system or is it relevant only during the development?

3) Would it be more consistent if my UI designer is the front-end dev as well or not necessarily?

4) What are the concerns that I should have between wireframe -> UI design -> front-end development?

Thank you.

Answer 1

It really depends of what you want to achieve. Do you need a responsive web site? Do you wnat to cover mobile devices?

1) Would I be able to approach a UI designer with the wireframe/sketch above?

Yep, why not. It contains all the elements. I.e. the content inventar

2) During the UI design (feel and look), should we pay attention to the fluid grid system or is it relevant only during the development?

I'm not sure what you mean by UI design. If that's something that you do in Photoshop then the answer is yes. Your design will be later sliced to html and css and yes, you should think about this process before to design something. A lot of things are not exactly doable with simple and efficient html/css. From the other point of view it is extremely easy to make them in Photoshop.

3) Would it be more consistent if my UI designer is the front-end dev as well or not necessarily?

Definitely yes. As I said, I believe that if you make web sites/apps your designer should be a web designer. Not only designer. So, he/she knows about html and css. How they work, what is possible and what not.

4) What are the concerns that I should have between wireframe -> UI design -> front-end development?

The most important thing that you should know is that the last one front-end development actually shows you how the end product will look like. The wireframes and static UI design is good to give you some ideas and to present how the things will probably act. However, once you put your designs into the browser you will get the real feedback.

Answer 2

1) Yes, particularly for what you call a "sketch". Note, the terms "sketch" and "wireframe" mean different things to different people. Both of your diagrams are useful, but the sketch is more useful.

2) If you want it fluid, you must keep in mind how it will look narrow. Ideally, that means making a sketch for a narrow view also. In a responsive design, you want a fluid motion, so make sure the wide and narrow layouts are interconvertable. i.e., elements shift around in a logical way, mostly with horizontal motion, or horizontal series becoming stacked.

3) Zero need for the UI developer to be your front-end developer. Different skills.

4) You have done most of the UI design, though always stop to think about the site from your user's point of view. You have basically defined the UI you want, so now you need a designer to make it look clean and appealing.

Front-end development also means different things to different people. If you just mean getting good html/css markup, there are many freelancers and services which specialize in only that task. Your main developer should be able to work with any valid HTML.