Graphic designers ruining the web?

nilhg

One you guys/gals might be interested in.


http://www.guardian.co.uk/technology/2012/feb/19/john-naughton-webpage-obesity


Good looking easy to navigate sites are a joy but on the odd occasion I have to use the web from a slower connection I sometimes feel like going looking for the browser button to block all images I had to use back in the olden days.

Giblet

Large images + overuse of scripts to do simple tasks is the problem.

smash

Kind of goes back to the thread about careers in web design. I'm still a firm believer that if you don't know front end code then I don't consider you a web designer, you're just a graphic designer. And graphic designers shouldn't be allowed near code at all. And they should stick to print unless they have a knowledge of how the web actually works and what the constraints are.

Placebo

The BBC News front page had 115 items; the online version of the Daily Mail had a whopping 344 and ITV.com had 116.

What do you expect for a media rich multimedia news site?
Is connection really an issue at this day in age? Modems are out,
and for 3G - mobile friendly sites exists, or even apps [BBC APP]

I dont think its really an issue, its only noticeable because of bad/overload of scripts.

DonkeyStyle \o/

Engineers fume at the appalling waste of bandwidth involved in shipping 679kB of data to communicate perhaps 5kB of information.

It isn't just 5kb of information though.
Images/embellishments are also a form of communication, in a marketing sense at least.
If they help to sell your product/service (even if it's only eye-candy), then they are a legitimate business need and not a waste of bandwidth.
The same applies to extra scripting for making the UI more fancy.
If people genuinely preferred fast-loading sites that look like shít, then that's what we'd already have. It's naive to think companies aren't paying attention to what people respond to and that somehow an egotistical designer is fucking everything up.

Such a troll article.

p

Wow - that was published! Tech journalism in mainstream newspapers is a pain to read. The average quality of posts here is better than that piece.

I'd like to see a 'size of webpage' vs 'average speed' to see if there's any practical difference. I see he made not attempt to figure that out, since it might contradict his completely biased opinion.

28064212

Graphic designers ruining the web?

Laying all the blame at graphic designers is incorrect. A designer's job is to design something that is user-friendly, marketable and eye-pleasing. It's a developer's job to make it as stream-lined as possible. A designer doesn't need to have any consideration of caching, AJAX, jQuery etc, it's a dev's job to implement them.

This is the stupidest line of the whole article. After complaining about designers and unnecessary UI, he goes on to bemoan:

Photographers love the way their high-resolution images are now viewable on Flickr and Picasa

The high-resolution images are the content. No matter how stripped-back you make the Picasa and Flickr UIs, the high-resolution image-sharing is the point of the website. You might as well say there's too much text on the Guardian website, lets put a word-limit on every article. This guy's column would be a good place to start

smash

28064212 wrote: »

A designer doesn't need to have any consideration of caching, AJAX, jQuery etc, it's a dev's job to implement them.

It's a designer's job to design a site in such a way that it will cater for AJAX, jQuery etc. A developer can not implement something that's just not possible.

28064212

smash wrote: »

It's a designer's job to design a site in such a way that it will cater for AJAX, jQuery etc. A developer can not implement something that's just not possible.

Should a designer say "use flash to display a slideshow of images here" or just say "display a slideshow of images here" and leave the implementation up to the dev? Designers have to know what the UI is capable of, they do not need to know how it's actually implemented.

pixeldesign

Even though I'm a web developer I have to say that I should take care of how fast the website loads not the person who draws the website.
Especially now when we have HTML5 and CSS3 some images(backgrounds, buttons) and animations made in flash or jQuery can be replaced.

Also javascript and css files should be minified and compressed, remove useless code from pages. Lets say if you need a pop up box on index page its no point to import that javascript file in all pages...I saw this kind of problem on most websites. The same with css, if you only have 5 divs in index page, its no point to import the entire css files.

Images can be optimized for web aswell and many developers still doesn't do that.
Using bad selectors will also slow down your website.

There are many things a developer should know to optimize the website, not the designer.

smash

28064212 wrote: »

Should a designer say "use flash to display a slideshow of images here" or just say "display a slideshow of images here" and leave the implementation up to the dev?

Depends where you work. Where I work, the designer codes the HTML/CSS/jQuery once a design is signed off. Then they'll integrate it into the CMS. That's why we consider them web designers and not graphic designers. The developers only get involved if there's something tricky to be done.

28064212 wrote: »

Designers have to know what the UI is capable of, they do not need to know how it's actually implemented.

Knowing what the UI is capable of is part of creating a design that will cater for AJAX, jQuery etc.

28064212

smash wrote: »

Depends where you work. Where I work, the designer codes the HTML/CSS/jQuery once a design is signed off. Then they'll integrate it into the CMS. That's why we consider them web designers and not graphic designers. The developers only get involved if there's something tricky to be done.

I never meant to imply there was anything wrong with being multi-field, nor say that one approach was better than the other. My issue was with the author saying that it's graphic designers' fault that the web is bandwidth-heavy when there are plenty of inefficient developer practices out there that need pruning.

smash wrote: »

Knowing what the UI is capable of is part of creating a design that will cater for AJAX, jQuery etc.

Tbh, I would have said the complete opposite: Knowing what AJAX, jQuery etc is capable of is part of creating the UI. A designer only needs to know that an image can slide, they don't need to know anything about

$(this).hide("slide", { direction: "down" }, 1000);

It's entirely possible to create a brilliant, user-friendly, marketable interface without ever knowing a line of code

smash

28064212 wrote: »

My issue was with the author saying that it's graphic designers' fault that the web is bandwidth-heavy when there are plenty of inefficient developer practices out there that need pruning.

To be honest, a site can be as light or heavy as you want it. It depends on your target market and what they want so he has no right to slate anyone and especially in today's age where your basic mobile phone coverage is now faster than your net was 10 years ago.

28064212 wrote: »

Tbh, I would have said the complete opposite: Knowing what AJAX, jQuery etc is capable of is part of creating the UI. A designer only needs to know that an image can slide, they don't need to know anything about

$(this).hide("slide", { direction: "down" }, 1000);

They need to know that it can slide, but they also need to know that websites are modular. I've never worked with a graphic designer who designs websites but doesn't code but I presume they know this. I have however worked with graphic designers from the print industry who have come up with concepts for websites and have been quickly slapped on the wrist for creating designs which just will not work.

28064212 wrote: »

It's entirely possible to create a brilliant, user-friendly, marketable interface without ever knowing a line of code

I know it is yea. It's also entirely possible to draw an awesome house, it's building it that's the problem.

tricky D

The line between designer and developer can have quite a bit of blur between them. There is rarely a black and white separation. I've worked with plenty of designers, some who just hand over psds to ones who can do everything including coding. Likewise, I've seen developers who have produced some fine visual designs as well as the coding which would be their main function. As long as the the limits are known, there's usually no problem, it's more a management matter. The biggest problem I've had with graphic designers is when they refuse to get the fact that the website viewing media sizes are variable, not fixed at four corners of a page or a static display screen. They insist on pixel perfection with no room for manoeuvre and the result suffers unless the project leader prevents that.

jmcc

p wrote: »

Wow - that was published! Tech journalism in mainstream newspapers is a pain to read. The average quality of posts here is better than that piece.

Yep. I still remember the review that gobsh!te gave to Gerry McGovern's New/Caring Economy book. Wonder if it will make its way to the Oirish Times technology section in the next few weeks?

Regards...jmcc

alastair

smash wrote: »

I've never worked with a graphic designer who designs websites but doesn't code but I presume they know this. I have however worked with graphic designers from the print industry who have come up with concepts for websites and have been quickly slapped on the wrist for creating designs which just will not work.

That's a different matter then. Under-informed print designers are (contributing to) ruining the web. Not graphic designers per se. There are many graphic designers working on web, interface, onscreen design etc, who have a clear understanding of the constraints of code/technology/bottlenecks, but who don't pretend to have coding/development skills.

BarackPyjama

smash wrote: »

I'm still a firm believer that if you don't know front end code then I don't consider you a web designer

Ignorant rubbish.

Cork24

Graphic designers never heard of the slice tool in photoshop large images should be sliced down into 8 or more bits cuts down on bandwidth load time

jmcc

Cork24 wrote: »

Graphic designers never heard of the slice tool in photoshop large images should be sliced down into 8 or more bits cuts down on bandwidth load time

Any chance you'd explain that? (I think it would technically increase bandwidth and load time.)

Regards...jmcc

BarackPyjama

Oh dear God.

Giblet

You get limited connections, plus the overhead of making that connection. It's best to combine assets to reduce requests if possible (if applicable), not split them up.

Cork24

Inside photoshop u have ye slice tool when you slice an image save it for web..

This will increase load time on client side since every thing is on server side it is wise to use png format while using pictures.

You can have great sites with images

Giblet

PNG is a lossless indexed colour format which should only be used on images which contains large areas of repeating colour, limited colours, or uniform shapes and colour gradients. This is because the algorithms used for compression can make big gains when compressing these types of areas. For complex images, the compression will not be optimal and will result in bigger sizes than JPG. PNG has advantages over JPG when it comes to being able to use either indexed transparent colours (ie: multiple opacity pixels defined in the index) and full 8bit channel opacity. It isn't the optimum format to use for photographs or anything with complex patterns and colouring. GIF is similar except it only allows 256 different colours in the index and only 1 transparent pixel.

jmcc

Cork24 wrote: »

This will increase load time on client side

That's a big problem. Now webdevs with tiny brochureware sites on shared hosting won't even notice the problem but any slowdown for the user is, by definition, bad.

On large sites, the aim is to minimise everything (code, images, requests and DNS lookups) where possible. (I run a large site (a few hundred million webpages) with about 275K pages in traffic per day.) When you slice an image into eight sections, you are creating eight files - that's eight downloads whereas previously you only had one. Now the additional bandwidth overhead may hardly be noticable but it is there. The advantage that you think that the user sees is the speed at which the smaller image sections render. The image slicing thing is counter-intuitive because the people advocating it often are thinking in terms of page rendering speed rather than bandwidth.

Regards...jmcc

Placebo

Cork24 wrote: »

Graphic designers never heard of the slice tool in photoshop large images should be sliced down into 8 or more bits cuts down on bandwidth load time

LOL, 1 http request is better than many. Which is why we use sprites :rolleyes:
same way they used them in older games, snes, sega

smash

BarackPyjama wrote: »

Ignorant rubbish.

Hardly. Go find me a job there that's currently on the market for a web designer without coding required.

BarackPyjama

smash wrote: »

Hardly. Go find me a job there that's currently on the market for a web designer without coding required.

What employers are looking for and what makes a good web designer are often very different. The best designers I work with don't code at all. They're aware of what's possible technically and know how to design usable and beautiful interfaces but they can't code well... if at all. Just my experience.

tramoreman

web designers should know code at least html and css because it will be handy to know

p

tramoreman wrote: »

web designers should know code at least html and css because it will be handy to know

Good point.


HyperText Markup Language (HTML) is the main markup language for web pages. HTML elements are the basic building-blocks of webpages.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.





Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicitly presentational HTML markup.[1]

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

BarackPyjama

Haha. Touché.

Giblet

I'd rather the designers kept well away from the code thank you very much!

tramoreman

not a chance designers and developers of the web should know code its a disgrace if they dont there is no excuse

came across this article very interesting

should designers know how to code html and css yes and so should developers

http://marcdrummond.com/comment/104

BarackPyjama

Some of the most talented web designers in this country don't touch code (front-end or otherwise) so the assertion is utterly, utterly, utterly wrong that you can't be a good web designer and not know code.

Whether they should know code or not is another matter. However I'd much rather work with a talented designer who doesn't know code than a hack that knows code inside-out. <- basically... not a designer. Just someone who designs badly and knows front-end code.

smash

BarackPyjama wrote: »

Some of the most talented web designers in this country don't touch code (front-end or otherwise) so the assertion is utterly, utterly, utterly wrong that you can't be a good web designer and not know code.

You can be a good designer, but you're job is redundant to most companies.

BarackPyjama wrote: »

However I'd much rather work with a talented designer who doesn't know code than a hack that knows code inside-out. <- basically... not a designer. Just someone who designs badly and knows front-end code.

These people don't usually get hired by any reputable company so I don't know why anyone would end up working with them.

BarackPyjama

smash wrote: »

These people don't usually get hired by any reputable company so I don't know why anyone would end up working with them.

Em... yeah, they do. Trust me on this one.

smash

BarackPyjama wrote: »

Em... yeah, they do. Trust me on this one.

Na, I'll go with my own experience of people we hire.

BarackPyjama

smash wrote: »

Na, I'll go with my own experience of people we hire.

Fair enough. I'll go along with the experience of some of the top agencies in Ireland and across the globe who are producing the best work.

smash

BarackPyjama wrote: »

Fair enough. I'll go along with the experience of some of the top agencies in Ireland and across the globe who are producing the best work.

So these top agencies will employ a "hack that knows code inside-out" but can't design?

BarackPyjama

smash wrote: »

So these top agencies will employ a "hack that knows code inside-out" but can't design?

No. They wouldn't. That was my point.

Singed Icarus

This is all running under the assumption that a site is designed by one person.. most web design agencies employ programmers and graphic designers.

It is possible to do both at a stretch and the reality is that there are plenty of validated html templates out there for graphic designers to use - just swap out images and colours.

Most bad websites are exercises in bad planning with no clear purpose defined in my humble opinion.

smash

BarackPyjama wrote: »

No. They wouldn't. That was my point.

We'll you said:
"However I'd much rather work with a talented designer who doesn't know code than a hack that knows code inside-out. <- basically... not a designer."

And I replied:
"These people don't usually get hired by any reputable company so I don't know why anyone would end up working with them."

And you followed with:
"Em... yeah, they do. Trust me on this one."

Giblet

From my experience, the best designers are the ones with some knowledge and awareness of what is going on, rather than someone who has no idea, just because their designs will take a few things into account than say a pure print designer would who hasn't worked on web stuff. At the end of the day, they most likely aren't going to be implementing any of their designs and especially any server side or client side scripting (where I work anyway!)

BarackPyjama

smash wrote: »

We'll you said:
"However I'd much rather work with a talented designer who doesn't know code than a hack that knows code inside-out. <- basically... not a designer."

I think we have our wires crossed.

p

I think we should all just take our small limited experience of working in a handful of companies, and extrapolate from that, that we can speak about the entire industry and generalise about every possible type of web designer, and web design company.

Trojan

p wrote: »

I think we should all just take our small limited experience of working in a handful of companies, and extrapolate from that, that we can speak about the entire industry and generalise about every possible type of web designer, and web design company.

Damn those graphic designers and their tiny fonts!

tramoreman

came across this at http://csswizardry.com/2011/09/do-designers-need-to-code/


Is a web designer really a web designer if they can’t code?

A lot of the arguments revolve around the (false) fact that ‘designers can’t understand what they’re designing if they can’t build it’. This argument suggests that a web designer who can’t code is a fake who’s just blagging their way if they don’t know/understand how to actually build the websites they design…

This is wrong. By this token I should understand MySQL and programming and Project Managers should understand design theory and programmers should be able to manage clients. There’s a reason we have different job titles; people do different jobs.

A designer who can build websites is a designer–developer, a designer who can’t write HTML/CSS is a designer.

Designers should work with developers

One reason, I think, that people believe that designers should be able to code is that they need to honour their designs, they need to be sure their designs are buildable by being the ones who have the responsibility of building them.

The problem is not that designs need to be buildable, it’s that developers should be permitted to send designs back and make compromises. Designers and developers need to collaborate, not be combined. Designers need to keep pushing the envelope, making tricky and outside-the-box visuals that push the work of the developer forward. The developer needs to be able to work back the other way, show the designer the boundaries that cannot be broken. Designers shouldn’t lead developers, developers shouldn’t lead designers, there should be a happy middle ground where teams work together, specialising in their respective areas but understanding and appreciating each others’.

A designer who codes badly is less use to a developer than a designer who can’t code at all. Developers need designers, not bug making machines.

But the client was shown a PSD that needs to be honoured…

I think this may well be one reason why people believe designers should code; the situation where the client has seen a PSD and thus expectations are set. A developer hasn’t seen the visuals and is all of a sudden expected to build something he’s had no input in. For the most part this may not be the case at all, but it definitely could be…

The remedy here might be to make sure designers only create things that they can build, achieving this by making sure designers can code.

This is fixing the wrong problem, the problem here is a lack of communication and a lack of collaboration, not a lack of skills. Designers and developers should work together from the outset, working in the browser to ensure that a) the team is working as, well, a team and b) that a client is never shown a PSD (showing a client a PSD in 2011 is just foolish).

The recurring theme is collaboration… Designers and developers need to coexist, not be one and the same.

HTML and CSS isn’t easy…

…but it is easy to do badly. I know loads of designers who can make the most stunning visuals but their code is not a strong point. Sure, they can write HTML and CSS, but it’s not where they specialise or excel, in much the same way a lot of developers have no design sense.

A designer who writes bad code is less use than a designer who can’t code at all. Once a designer writes poor code then either a) a decent dev has to come along and spend time bug fixing, or b) poor code becomes a tangled mess off spaghetti CSS and browser hacks.

Do not undervalue the importance of HTML and CSS, they are easy to do badly, but hard to do excellently. You need excellence in both design and development, so leave each role to its respective person.

These rules introduce restrictions

If a designer needs to code what he’s designed then he’ll design to what he can do, not to what can be done. This is a fundamental mistake to introduce.

A designer who isn’t restricted by a secondary skill set will produce things outside the box, push the envelope and keep innovating. A designer who is limited by their dev knowledge is hemmed in, scared of pushing the boundaries for fear of creating themselves work they cannot complete.

By forcing one thing you are restricting another, this is not a good thing to bring into your team. What you need to do is keep the contact and collaboration (there it is again) between design and build to ensure that everyone is achieving their full potential.

Cork24

i think Web Designers go all out on images and fancy drawings.. and Flash :mad::mad:... what is the point in having a web site build in Flash.

Web Designers dont really know how the Client-Side & the Server-Side work.. .PNG helps alot.. i saw one site before that a Lecture showed us before that used their images in RAW:eek::eek:

jmcc

Cork24 wrote: »

i think Web Designers go all out on images and fancy drawings.. and Flash :mad::mad:... what is the point in having a web site build in Flash.

Interactivity. There are some things for which Flash is better than simple HTML/CSS.

Web Designers dont really know how the Client-Side & the Server-Side work.. .PNG helps alot.. i saw one site before that a Lecture showed us before that used their images in RAW:eek::eek:

I tend to be somewhat cynical when it comes to lecturers. This is based on the fact that web design is actually still a developing discipline. Lecturers are often way behind the leading edge of technologies and there's a perception, sometimes justified but other times not, that they are lecturing because they can't hack it in the real world. The web is far more complex than many people think. Some sites are masterpieces of design but completely fail to convey information. Some look completely amateurish but work better because they convey information simply and effectively. However to write off all Web Designers like you just did is quite wrong.

Regards...jmcc

Cianos

tramoreman wrote: »

This is fixing the wrong problem, the problem here is a lack of communication and a lack of collaboration, not a lack of skills. Designers and developers should work together from the outset, working in the browser to ensure that a) the team is working as, well, a team and b) that a client is never shown a PSD (showing a client a PSD in 2011 is just foolish).

OT, but how else would one ensure that the clients expectations are being met, and that they aren't going to come back with big change requests that require almost starting from scratch?

Isn't it easier to nail the design at the concept stage and build from there, rather than later on when more work has been done?

Cianos

I'm a designer that doesn't touch code. This is for a few reasons;

1. I have a background in art, and feel that that is where my strengths are. I would rather focus and build upon my strengths to offer a higher standard in design, than try and be a jack of all trades.
2. By the time I catch up to an acceptable coding standard, my knowledge will be out of date.
3. Coding doesn't excite me, and I want to work at something that I enjoy for the obviously selfish reasons, which in turn keeps the quality of work higher.

I appreciate the need to be mindful of the development work that will come afterwards, and so far most of my sites have actually been conventional in terms of structure.

I don't think anyone except the designer benefits when design is used for the sake of design. Sure it'd be fun to try a lot of crazy different concepts etc, but it's better all round to keep things simple.

tramoreman

The remedy here might be to make sure designers only create things that they can build, achieving this by making sure designers can code.

This is fixing the wrong problem, the problem here is a lack of communication and a lack of collaboration, not a lack of skills. Designers and developers should work together from the outset, working in the browser to ensure that a) the team is working as, well, a team and b) that a client is never shown a PSD (showing a client a PSD in 2011 is just foolish).


totally agree with you my own view is that sketches should be drawn first and shown to the client first. the design shouldent begin until the clients give the go ahead.

all web designers should know at least html and css i have read a few articles from around the world and there is a view out there that they should know html, css and javascript at least.

web designers should use what software they are comfortable with.

coding or not coding comes down to the main fact how fast does the client want the design.