How to understand UI design's relationship with or separation from graphic design?

Question

There is no question that User Interfaces and User Experience are design considerations —

Design as a noun informally refers to a plan for the construction of an object or a system (as in architectural blueprints, engineering drawing, business process, circuit diagrams and sewing patterns) while “to design” (verb) refers to making this plan. No generally-accepted definition of “design” exists, and the term has different connotations in different fields

So if we have UI/UX design and graphic design, and we all know that a graphic designer is not a UI/UX designer, and vice-versa (though a person could perform both), how do we understand where the line is?

(Each of the topics now have their own SE site, as well)

Graphic design certainly has the connotation of "making things look pretty", but at the same time it seems like how things look is intrinsically connected with how the user is able to interpret and interact with it.

One of the core tenets of UI/UX is considering how apperance conveys meaning. As Steve Krug says in Don't Make Me Think^[1]:

For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs.

So, when does design leave the UI realm and become graphic design? Can UI "experts" (as this site defines it's audience) really ever be fully separated from visual design? And really, how do we define UI design in relation to graphic design?

Also if any of the assumptions here are false, please put in your two cents. All viewpoints are helpful in understanding this issue.

Answer 1

I don't believe there is a line, but more of a gradient transition between the concepts. Graphics design, usability, workflow.

A color choice and accent can make a world of difference in getting a user's attention. Is there one specific color that will work, no. Often there are a variety of color palettes that will work. Could a color choice be made in a vacuum...sure, but depending and the visual components, certain colors do start getting excluded. For example, certain types of components will demand certain colors that could constrain a palette (red/green alerts, use of known symbols like street signs).

The same is true of an icons or basic graphic elements. You can design a functional layout and attempt to add the graphic elements independently. However, layout sizing constrains graphic element features or richness.

Next on my list would be behaviors/animations. Choosing a behavior independent of layout and color can create some interesting animation artifacts if things pulse, blink or just spaz out.

I could continue this concept with any particular aspect of the UI. In a simple every day world where you are just building another version of the same application or web site paradigm that is well established, yes, could can separate these concerns and build your interface on an assembly line of different workers. For most people, this is enough. However, if you are doing something, anything, that starts breaking out of the traditional molds, you increasingly need to bring these disciplines together into a unified design.

Answer 2

Graphic design concerns graphics or the 2-dimensional appearance of products and materials, namely the use of space, color, font, and 2-D shapes. Graphic design overlaps with UI design when the graphics are applied to the user interface of a product. Determining the colors, spacing, and shapes or other images of a web site is both graphic design and UI design. Determining the same for a physical poster is graphic design, but not UI design.

Within UI design, graphic design is distinct from other parts of UI design in that it is concerned with the detailed implementation of the appearance of the UI, rather than overall structure and basic behavior. Interaction design includes determining if tabs should be used on a web page, while graphic design includes determining how those tabs will look. Graphic design seeks to effectively communicate to the user, rather than necessarily interact with the user. Graphic designers have an artistic background. They know how subtle differences in space, color, font, and shape can profoundly affect the user experience. Another UI designer may decide that tabs should look like physical tabs, but the graphic designers will know how to use light and shade to accomplish this. They can change two pixels in an icon and make it much clearer. They know a change in color saturation will make the site feel more peaceful and comforting. As artists, they may be more concerned with the emotional impact of your product than designers with more scientific or engineering proclivities.

Graphic design does not generally include the determination the task characteristics, user goals, or product objectives. It does not include doing systematic user research like contextual inquiry or usability testing. These are the responsibility of other team members.

I’m not sure there is any meaningful difference between visual design and graphic design. I think it’s like comparing usability engineering with user-centered design.

Answer 3

Third type of answer (and disagree with JoJo):

Graphics design is part of UX design - the most visible part.

Generally, I'd define: Graphics = how stuff looks (in detail and as a whole), UX = how it works from a users POV.

Graphics is an important part of the latter:

• Consistency within the app and with the platform to help the user learn and apply previously acquired knowledge
• Distinctness to guide the users attention to the more important information
• General appearance to tap memories and evoke emotions (e.g. simplified, Okudagrams = Star Trek = geek-cool futuristic)

---

Of course the line is neither fixed, nor infinitely thin.

The actions on the tabs are non-graphic UX design (NGUX??), the look of the tabs is Graphics.

Whether to use tabs or to use pages is NGUX in my understanding - but I can understand and work with opposite opinion.

---

Also your stack might place the line differently. Switching between tabs and pages might require a source code change and thus is beyond the access of a graphics designer. Or it is just an option in the skinning package, which makes this choice accessible to the designer.

Company setup (i.e. who reports to whom, who makes what decisions, who gets blamed) might even draw another line. To illustrate:

We can agree on the shared part, yep, that's definitely greaphics design. However, the overlapping parts are kind of "up for grabs", especially if the administrative definition isn't strict and enforced.

Answer 4

I believe that there is no overlap between a graphic designer and a UI/UX designer.

Interfaces start with the conception of a UI design. This UI design is then realized with a graphic design. It can't go the other way around and the UI design process shouldn't be cut short by the graphic design step. The two are distinct steps.

In your example with tabs having to create a visual impression, the UI designer has to say "the selected tab should be styled differently from the other tabs; the selected should look like it's in front; etc..", but he does not say "make the selected tab purple" for it is the graphic designer's job.

It's true that many UI designers are also graphic designers. I believe that since the tasks are distinct, it's more efficient for a company to have a person that can do both. Unless the company has many projects going on simultaneously, it is a waste of time for a graphic designer to wait while the UI designer is blueprinting. In summary, it may be the same designer, but they are not the same tasks.

Answer 5

I'd argue there is no line. There are fuzzy boundaries that change based on the project, the team, the team members, and the skillsets involved.

Every aspect of the UX process should have some consideration for all of the other aspects. Designing wireframes in isolation of graphic design in isolation of user research will always lead to conflicts that will make the UX less than ideal.

What makes this debate fuzzy is the definitions. Neither UX/UI design nor graphic design are terribly specific definitions.

A lot of people consider graphic design 'that's the photoshop part when they pick colors and fonts'. But it's really more than that. Graphic Design is typically considered visual communication and, I'd argue, very much about UX.

In too many organizations UX is treated as a factory floor. Research passes it to Wireframing who passes it to Graphic Design who pass it to UI dev who pass it to Copywriting.

That simply does not work. UX is the exact opposite of an assembly line with distinct steps staffed by narrowly trained individuals.

To take the factory analogy a step further, compare it to an auto plant.

To have a new automobile produced, a team of engineers spend years designing it. Then they send it to the factory floor where a step-by-step process produces thousands of said autos.

UX is applicable to the engineering phase of that process...not the assembly line. UX is building one product. Typically one piece of software. The assembly line in that model is the web server, or the CD duplicator.

And a good auto has to be engineered by a team working in parallel.

I think Apple is a great example of proper UX. They don't have hard lines between the OS team, the hardware team, the software team, the UX team, the marketing team etc. An Apple product is designed as a whole rather than piecemeal in stepped processed.