4

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?

Improve this question

1 Answer 1

Reset to default
6

  1. I don't see any reason that you couldn't approach a UI designer with the linked wireframes. However I would include some idea of what the product concept is when presenting your ideas. I see that you have a lot of piecemeal interactions (header like pinterest, layout like revision 3, etc) so you should make sure your pieces are serving your user in achieving the goal of your product.

  2. If you're designing a responsive site, then you should definitely pay attention to how the site and interactions are going to change as you scale the browser window. Know what platforms you're trying to support. Is this interface you've designed going to look good and be useable on an iphone? How about a tablet? It helps to design with your target platforms in mind so that you know how the layout will change and at what breakpoints these changes will occur.

  3. You can go either way on this, I feel. If you can find a UI designer who is also extremely good at front-end development then you're set - but things will take longer as you have 1 resource working on both the design and the development. Pairing a designer with a dev is a little more typical, but having the two communicate and work through problems between the design and how it's implemented is essential to developing a good product. Design, develop, test, repeat.

  4. Their are a multitude of concerns within the process of creating a product, and too many to list here. A few things to look out for:

Sketch the hell out of your wireframes. If you can, test them with potential users to see if they understand the interface, and if the layout, menus, different sections are clear and navigable to a user prior to diving into UI Design. If you dump a lot of time into putting polish onto a wireframe that was wrong to begin with then you're just wasting time. Something can look good and still suck if it wasn't designed well from the start.

Your designer should be working with the developer throughout the design process to verify that their designs are technically feasible.

Make sure that your developer is using the right technology for the job.

Prototype interfaces to make sure they function the way you want before wiring them up. Prototyping your interface and interactions quickly and testing them can be less time consuming than developing a full product to find out that your design and interactions suck and you need to start over again.

Hope some of that helps.

Improve this answer
1
  • As a front-end developer, I agree on the points you gave to #2. It is extremely beneficial if we are able to see how the wireframe looks across different breakpoints. We can then begin planning out the structure of the site with that, and refine it further once the high level UI mockups come in.
    – kretzm
    Aug 31, 2013 at 3:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.