Jump to content

Teaching graphic designers about web design


Joss
 Share

Recommended Posts

I am working with a designer who's experience lies mostly in print.

So, I have written a document explaining the fundamentals of modern adaptive web development. This is not a technical manual, but rather looking at what needs to be considered by the creative designer when coming up with something that a developer can deal with well.

Since we have a good assortment of multi-disciplined souls here, would a few of you care to read it and suggest anything I perhaps should add, without making it heavier or much longer?

Some of you may find this useful for your own purposes too and you are very welcome to use it.

UPDATE

I have done a new draft, removing the adaptive idea which kind of got lost as I wrote - the trials of writing an essay off the top of my head with no planning whatsoever! Silly me.

It is now called Responsive Websites :)

UPDATE 2

Cleaned up version - the chat about flat icons is now shoved at the end as an after thought

Responsive Websites 2.pdf

  • Like 11
Link to comment
Share on other sites

Adaptive, also known as responsive design, uses one design idea and then adapt it for various devices. The site looks familiar on all devices, while changing interface controls to suit the different user environments – there is much less of a wrench from one use to another.

 

Adaptive websites use breakpoints to target for specific viewport widths, while responsive uses percentages for elements to adapt to the width of the container where it lives in.

Adaptive and responsive can work nicely together, but the terms aren’t interchangeable.

  • Like 7
Link to comment
Share on other sites

Joss: glanced through this quickly, and so far I'm liking it. Your terminology is a bit "unique", but that's partly about semantics -- adaptive is actually not the same thing as responsive, etc. Apart from that, this seems like a very good starting point for someone with limited knowledge.

Anyway, it's possible that I just missed it, but you might want to cover some common responsive patterns, especially navigational ones. That's one of the areas where even seasoned web experts tend to struggle. Google has some pretty awesome resources on patterns and a few other things you might want to check out for ideas.

  • Like 2
Link to comment
Share on other sites

I only scrolled quickly to the bottom but I've seen something that shouldn't be there in my opinion, the flat design part. As a non-graphic designer talking to graphic designers I would suggest you just avoid talking about design at all.

Link to comment
Share on other sites

Yes, I realised I was a bit ambiguous about responsive and adaptive and so on - I will look at that.

Diogo - the flat design bit was addressing a particular problem and a question that came up about clean design from the designer in question.. Although it is a little out of context here, I was keen make sure that it is not just the structure that is addressed but issues about clarity and so on. You and I can take any website and squeeze it onto a mobile, but that does not mean it will be usable. I need to get the idea of thinking simpler across, not just in layout terms, but in design terms too.

I might take that bit out for a more generic version.

Link to comment
Share on other sites

Here is a more personal thing I guess:

For me mobile first is more about content then about graphical decisions. There was a trend, (i'm happy that it's mostly gone) is to just hide stuff in the mobile environment if it wont fit the viewport as mobile was a thing people implemented as afterthought. While I think mobile is as important as desktop and should be developed in parallel or strongly kept in mind how to handle. Then there's always my question: When information is not important enough to show it on mobile, what is the importance for this info for the desktop. I do not say it's always a good practise to use the same content everywhere as the environment where the content lives has it's own properties.

Edited by Martijn Geerts
sorry going a bit offtopic here.
  • Like 2
Link to comment
Share on other sites

There is a problem with TV and radio advertising in that all of us who do it always say if we had a longer commercial then we could explain our proposition so much better!

But the reality is that the client comes along and says "since you have an extra thirty seconds, here is a ton of copy about my pet dog I want to get in there."

When we only have a short commercial, all elements - audio, pictorial, text and so on have to work really hard and keep to the plot. If that is then translated to longer commercials, then you increase the power. if you simply add to it, you reduce the power.

I think mobile first thinking is the same. In a way, it is an excuse to make sure all design elements work hard since size and space removes the luxury of "oh, they will get it by the time they get to the bottom of the page."

In that respect, the look and feel of the design is part of the content as it not only frames the content, but is part of the brand and the company ethos and image that explains the content. 

  • Like 2
Link to comment
Share on other sites

if we had a longer commercial then we could explain our proposition so much better!

Yes, but nobody would listen anymore.  :(

Sorry for going off topic.

EDIT:

Had a look a the document. From my impression it's to ambitious to serve as a guideline. It requires much attention to figure out what I (the graphics person) should do/not do. I would suggest to bring it down to some simple rules and point to tutorial websites in case further explanation is required.

Link to comment
Share on other sites

Oh, I don't know - the few times I have worked on two minute commercials, we have even managed to hit official ratings!

You can have a lot of fun and even build up a following - but you need VERY good writers, not just the same old stuff made longer.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...