: Resources on producing responsive design wireframes and artwork, for graphics designers We're developers who partner up with a graphic design studio for our project artworks. Some times they even

@Barnes313

Can you recommend some good resources(paid or free) for non-coders (such as graphics designers), to learn about responsive design, how to design assets for responsive design, how to develop sketch ups/wireframes for the customers, how grid works etc?


There are many excellent sites out there. As designers they could get a Lynda.com subscription, watch the Responsive Design course and after watching that have many interesting design courses to look at as well.

I think that YOU - as developers - can explain a lot of key concepts. Designers understand breakpoints very well. What I find that many designers have a problem with is that HTML/CSS works by placing things in containers and that a container that is within another container cannot be easily separated from other items in that container.

+--------+------------------------+-----+
| | | [A] |
| | | |
| | | [B] |
| | | |
| | | [C] |
| | | |
+--------+------------------------+-----+


In the example above the entire right hand column can move but separating item B from items A and C requires a lot more work.

Vote Up Vote Down

@RJPawlick971

They basically want to be able to provide sketch-ups to customers for each device


This never works. Never.

Wireframes aren't responsive. They're approximations of what the code may render. That's hard enough when we're talking a single Photoshop file being converted into a HTLM file, but pretty much impossible when we're talking responsiveness.

The biggest hurdles I've encountered:


If the designers don't know markup, they don't understand document flow. As such, they tend to build responsive wireframes that aren't simply reflowing of content and cause huge JS workarounds and the like to implement.
Because they are separate files, they don't keep consistent style hierarchy from viewport to viewport. For instance, instead of saying that 'at 320, all fonts are 80% the size of the 1120 breakpoint' they end up having 'some at 70%, some at 90%, etc.' which leads to bloated, indecipherable CSS.
Maintenance. It's hard to maintain one set of mockups/wireframes based on client feedback. They now have to maintain 3 or 4 and somehow not only keep them in sync with each other, but ideally in sync with the code base you are using.
Some tools, such as Axure, claim to support responsiveness. And they do in that the wireframe is responsive(ish). But that's a false implementation as there is no correlation to the code Axure makes and the code that has to be built. So you end up with responsive changes in Axure that simply can't be implemented practically in the codebase.


The only way I've seen this work is when wireframes are treated purely as wireframes--meaning they are 'sketches' of the page layout and functionality--not pixel perfect comps.

They can still make a comp--for one particular size--but from that point on, the designers and client should be working off of the markup you're creating and tweaking things in the actual responsive codebase. Not in Photoshop or Axure.

Vote Up Vote Down

@Murray664

Hack Design is a site for people who want to learn about design. I'm a designer and I refer to the site regularly, because they're always adding good stuff. Each lesson is a collection of articles and tutorials.

For responsive design, I suggest the following the lesson "Making the content flow: introducing responsive web design".

There's a lot of other good info on responsive design in the lessons section if you dig around.

Another site that explains the principles of layout is [Responsive Layouts, Responsively Wireframed: thismanslife.co.uk/projects/lab/responsivewireframes/

A great book on the subject is Responsive Web Design by Ethan Marcotte. You can find it on A Book Apart's website.

Vote Up Vote Down