4

We're developers who partner up with a graphic design studio for our project artworks. Some times they even bring in the clients themselves and we both cooperate to get a development project done.

  • They develop the website artwork, develop the sketch ups for the client to decide etc.

  • We develop the website(code it and the rest of the technical stuff).

They have recently asked me to recommend them some good resources to read on the subject as they no longer want to design only for desktops. I have told them there are plenty floating around on the Internet, some paid and some not.

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?

They basically want to be able to provide sketch-ups to customers for each device, how the grid will break on different devices, how to design their assets/artwork etc. It's a matter of cutting us out of the loop and design on their own the whole project, then deliver the wireframes to us and the artwork and we could easily take it from there.

  • Online courses are ideal.
  • Short books ?
  • Maybe interactive courses like what Codecademy does for programming?
  • Anything else you think will help non-coders to get the basics
  • As for learning about responsive design, I wrote a post a while back aimed towards developers learning the basics that could be helpful – Zach Saucier Jan 25 '15 at 0:04
2
+100

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.

  • This is the type of answer I'm looking for - but I somehow disagree..Approximations are not bad - and maintaining documents is not so much of an issue - The customer decides on a 'rough' mock-up of how it would look like and then it is passed to us. The next iteration doesn't have to get updated on the sketch-ups. We expect and encourage that each iteration should involve only minor changes to the design. What we need is for them to provide a rough approximation of how the design breaks down on each device, which is certainly better than no approximation - – Nik Kyriakides Jan 25 '15 at 20:32
  • @NicholasKyriakides I could go either way on that. It really depends on the designers. I've seen approximations helpful for different viewports, and also approximations that are impossible to practically implement. I'd much rather have talented designers leave it to talented developers to make the call as to how it should work in different viewports, and then tweak from there. – DA01 Jan 25 '15 at 23:55
  • I get the point - What is your suggestion then? What would you tell to our partner designer studio, if you were in my position? – Nik Kyriakides Jan 26 '15 at 1:14
  • 1
    I'd ask them to get the visual design approved by the client in one viewport. Then to work with you directly to come up with the other viewports. – DA01 Jan 26 '15 at 1:32
  • sounds legit - I'll leave it as unaccepted for a couple of days and if nothing better comes up as an answer, I'm accepting this. – Nik Kyriakides Jan 26 '15 at 1:34
1

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.

  • I think that YOU - as developers - can explain a lot of key concepts - this is what made me upvote - I was thinking about this as well – Nik Kyriakides Feb 25 '15 at 19:00
0

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: www.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.

  • 1
    1. The second link doesn't work 2. The first link seems to deal with how a developer implements responsive design, not dealing with how to create design wireframes and artwork for graphics designers – Zach Saucier Jan 25 '15 at 19:35
  • Sorry about that. I've updated the links above. – Kurtis Beavers Jan 25 '15 at 19:41
  • Nope, this is at the very least targeted towards web designers - not graphic designers. – Nik Kyriakides Jan 25 '15 at 20:36
0

What you could do is use something like Edge reflow, which makes responsive design real easy for demonstrating purposes, but the code is just aweful.

Else take a deeper look into Macaw

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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