Responsive visual design and visual elements for non-coders

Feedback & Problem Solving
#1

Hi

Problem: A lot of designs coming off the designer table for desk and laptops, are really best viewed on large screens or high resolutions. Somewhat consistently: a primary nav might be dominating vertical space, page headings steal real-estate and more generally, large sizing and margins seems to misattribute priority to elements, or pages appear cluttered.

Of course, this is only really caught once coded. I think the reasons for this are:

  1. The design itself won’t necessarily look cluttered or weirdly sized. It’s designed perfectly for the photoshop environment.
  2. The client only see’s the rendered JPG and views it at full width, which when taking into account that elements in a flat image scale uniformly, is ‘close enough’ to how they were designed unless being viewed on very wide screens.
  3. The devs generally translate PSD elements to pixels rather than %s and R/EMs.

on the point that sometimes pages look cluttered. I think this happens because particular elements keep their pixel size assigned in the PSD, but not all the spacing between them is ‘coded’ - but rather just emerges from the coding process.

Designers: I work with visual designers that have no experience coding and for one reason or another, let’s assume this will remain the case. They’re designing based on wireframes I’ve given them (not necessarily to scale), or based on component requirements they’ve designed numerous times. They’re also using Photoshop.

Coders: They don’t communicate with the designers and for one reason or another, let’s assume this will remain a fact. They receive PSDs and work from those. They don’t have much interest in design and let’s assume (you guessed it) this will remain a fact.

Question: I am wondering how you obviate this problem, or have tackled it in the past?
As I see it there are potentially a few solutions.

  1. The designers just keep this in mind when adding elements to their PSD.
  2. They use different software that changes the relationship between “designing for web” and the designer.
  3. Devs extract %s and R/EMs from PSDs rather than pixels.

For any of the above (or any other solution you’ve found), can you please help me out?

2 Likes
#2

hi @mrcni
IMO your post has a bunch of questions and it requests a lot of scenarios to evaluate.
Anyway I can tell you that some of this communication problems could be smoothed by using standards as much as you can.
Standards are, by far, the best way to clarify cross topics and share decisions with all the stakeholders involved.

I will give you a super hi-level example:

  • web app in html 5 - you have already guidelines to follow
  • responsiveness - define the break points you want to cover and use a framework for components and widgets (ex. bootstrap)
  • custom UI elements - extend the framework/style guide starting from JPG and or PNG with information as size, padding, margin and so on. We use massively confluence to do that

I don’t know in which environment you are working (agency, product company, provider etc) and which methodology you use to deliver your service/product. I strongly suggest to promote collaborative design sessions. Somehow you should convince team that a real team work is the best tool to provide great products!

I wish you good luck :slight_smile:

#3

So yes, at the heart of the matter I agree, but totally not the reply I was hoping for :smile:
The message below is to document how I’m going to move forward.

I see that I hadn’t thought enough about linking specific practices to specific problematic outcomes. I think I want to narrow it down to these issues

  1. Crowded designs (large items amid less space)
    This is definitely an issue on how developers interpret designs. I should be able to spin up a conversation with them - cover some of their questions, provide some literature on responsive design to them and the designers… they (and I) need to speak the same language.

  2. Large Items
    This is a tough one that I don’t understand well… maybe it’s because I’ve designed and coded, but I can’t see how we’re having this problem. Designers and developers just aren’t on the same page.
    A) To Designers: Please design a little smaller? Mark off in photoshop our target viewport height?
    B) To Developers: Please use current responsive techniques (do they still involve %s and R/EMs?)

Is there a particular software that is known for making it easier to design across breakpoints? Anything that spits code? This could give everyone a peek into the other’s domain.

Thanks for reading @dopamino

1 Like
#4

Now I’m very confused.

  • Engineers have to interpret design deliverables?
  • How those deliverables are showed to the engineers?
  • Which kind of pixel perfect deliverables are available for them?

We work for digital products, there’s no room for interpretation.

For instance a specific margin is a value (it doesn’t matter if is pixel, em or whatever).
Maybe there are some user cases that are not covered or not supported (ex cross browser topics) and in my opinion this is part of the design strategy.

more than a software I would suggest to work with a proper framework (es https://material.angularjs.org/latest/) that shows design, interaction and live code example

I hope it helps