Beta
×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

Visual Communication in Digital Design

samzenpus posted more than 6 years ago | from the read-all-about-it dept.

49

stoolpigeon writes "I remember the first time I saw a program I had written after the interface had been revamped by a designer. I had been pretty happy with what I had made. It worked very well and met the client's requirements. It was extremely functional and I thought it didn't look bad either. But when I saw the new interface, not functionally different, just so much better looking, I was really blown away. My application had gone from useful to cool. (That might be a slight exaggeration, it was still just a database app but it sure looked cool to me.) Since then I've learned to primarily leave the user interface work to the experts in that arena, and I stick to the getting the functionality in place. But sometimes I don't have the luxury of a design team at my disposal. Or when I do, I still need to be able to talk to them and discuss what is going on. I found Dr. Ji Young Park's new book "Visual Communication in Design" to be a friendly and accessible introductory primer in visual design." Read below for the rest of JR's review.Dr. Park teaches on web design and interactive media at the Queensland University of Technology in Australia. His teaching background and interaction with students is a very strong part of the basis for this book. The book is designed to be studied sequentially. It deals with design theory and practice, moving from general topics towards the more specific. The information in 10 of the 12 chapters is accompanied by a "Design Studio" exercise for the reader to practice using the elements explained in the preceding chapter. Along with the examples in the chapters themselves, each design studio exercise provides examples of student work from exercises that followed the same guidelines as the one in the book. This means that this slender volume is full of white space, colors and illustrations. That may seem rather obvious, but it is important to note that the reader is not left to guess what the author means. There are always examples to show just what is being discussed. While there are not narrow definitions for right and wrong when it comes to the exercises, the examples do give a nice indication of what kind of work would be in the right direction.

Dr. Park takes the time to define the basic terminology of visual design. The first few chapters give a nice overview to the elements that make up graphic design and then the book delves more deeply into things like lines and colors finally moving towards typography and the considerations of print verses the web. Since I have no real formal education in graphic design myself, I took the book over to the graphic design team that works in my department. I asked them to look it over for accuracy and they said that it was somewhat basic content but accurate. That was what I needed to know. I didn't want to find myself in a discussion where a term like negative space was used, thinking that it meant something that it did not. The book deals with graphic arts in general, but as the title states, always brings it back around to a digital environment, primarily the web.

The sections that I found the most interesting, and that I will probably continue to visit, were those on layout design, how to impart motion and energy to still images and color. When I was a bachelor, I just bought my clothes to match what the mannequins were wearing at the store. Then I just always wore the same things together. Matching up colors and putting together good combinations is not my strong suit. I was able to learn a lot of handy rules of thumb and general principles as to how to use color. The ability to lay out the various elements and to present them in a balanced fashion is also key. This book provides me with a somewhat guided opportunity to keep working with these various elements and approaches to building interfaces that communicate with more than just plain text. This is exciting for me, especially when it comes to working on projects of my own. There are a lot of tools out there that will give a person a real jump on building a web app. The problem is, that the more popular solutions lead to hundreds or thousands of pages that all look pretty much the same. I feel like with some of the ideas and instruction from this book I have an opportunity to stand out, but not in a bad way.

The book does have one rather irksome shortcoming. There is no index. The table of contents does break things down to a very low level. Of course that does not put the contents into alphabetical order and so looking for a specific term leaves one to either flip through the book hoping, or to scan over the table of contents searching. This really limits the books use as a reference. It is much more a study guide due to that oversight. If it weren't for that I'd have seriously thought about rating the book 9 instead of 8.

The book is nicely printed, the 9.4x7.4 inch size is very easy to carry, keeps it slim, makes the pages large enough for the art and allows the book to lay open nicely without pages flipping over on their own. This is very useful for reading and trying things out at the same time. The treatment is broad and simple. I didn't want to get too deep, I just wanted to get me feet wet and gain a basic understanding of the issues involved in graphic design. The book does a great job of doing just that for the casual observer or beginner. It felt a little artsy and fuzzy at times, compared to what I normally read in technical books, but I guess that was the whole point.

Some of the observations that Dr. Park makes in regards to the associations that people make with certain colors, animals or other imagery are things that I think are pretty well known to be culturally subjective. For example when he states that "As bamboo is associated with moral uprightness and loftiness...", he is informing me of something that I did not know. I'm willing to guess that a lot of people don't know that and I don't think I would ever assume it in communication. But I think readers will be able to easily discern these types of observation and take to heart the underlying lesson of taking into account these types of associations in their target audience.

There are a lot of resources out there for learning how to create attractive and functional interfaces on the web and in other mediums. I think there is also ample evidence that a lot of people are creating applications that show a lack of research or understanding in this area. I think it would be well worth the time of any developer who is hoping to build that next great world-changing application to take the time to do some research and studying at the very least on the level that Visual Communication in Digital Design provides. Or, for those of us who are fortunate enough to have co-workers who have spent extensive time studying and practicing the art of visual design, this provides a nice guide to foster communication if you will. I feel like I can keep up better and stay involved in meetings, where in the past I would have just mentally checked out until things returned to my side of the court. If you feel less equipped than you ought to be in either case, this could be a simple way to gain a little understanding and ability.

You can purchase Visual Communication in Digital Design from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

cancel ×

49 comments

Sorry! There are no comments related to the filter you selected.

oblig. (2, Funny)

Brian Gordon (987471) | more than 6 years ago | (#23656783)

Command-line tools don't need to look good :)

Re:oblig. (1)

elrous0 (869638) | more than 6 years ago | (#23656835)

And that is why you fail.

Re:oblig. (1)

maxume (22995) | more than 6 years ago | (#23657195)

He didn't fail to get his website link right at the top of the page.

Re:oblig. (1)

Brian Gordon (987471) | more than 6 years ago | (#23657671)

why don't you just mark me as a foe and get it over with

Re:oblig. (1)

maxume (22995) | more than 6 years ago | (#23657859)

Where's the fun in that?

Re:oblig. (1)

Dramacrat (1052126) | more than 6 years ago | (#23657721)

this is no longer an issue, n00b.

Re:oblig. (0)

Anonymous Coward | more than 6 years ago | (#23657897)

but they can, if you want them too ...
http://guiliner.sourceforge.net/

disclaimer: I am one of the authors of guiLiner.

Re:oblig. (1)

Hatta (162192) | more than 6 years ago | (#23658593)

Correction: Command-line tools look good by default. You can't go wrong with grey text on a black background.

Fugly (1)

ajlitt (19055) | more than 6 years ago | (#23663983)

10 page usage/help text with no pager, sent to stderr.

This seems to focus on how things look (5, Insightful)

SCHecklerX (229973) | more than 6 years ago | (#23656977)

A UI is a lot more than how something looks. I still think this is a valid reference:

https://www-306.ibm.com/software/ucd/designconcepts/designbasics.html [ibm.com]

Re:This seems to focus on how things look (1)

bubulubugoth (896803) | more than 6 years ago | (#23657069)

But IBM design is so clunky, squared and 80's!...

Take a look at Lotus Notes, big, squared buttons with a drop shadow!

Take a look at web/portlets apps, Arial font, everything rectangular or square... ugly...

Take the UI for Informix or DB... wait, those are text based.. :D

Take smity, for AIX administration... is ugly and that stupid runner that keep falling after all these years....

Look at they hideous all black trow here a pitch of IBM Blue color servers...

No no no... Visual Design from IBM is a 80's joke!

Re:This seems to focus on how things look (1)

SCHecklerX (229973) | more than 6 years ago | (#23657369)

Well...

WPS was quite a good interface. Nothing has been as good yet since, IMO. The java-based firewall configuration tool on the AS400 (yeah, who does that??) is quite nice as well, although having to define everything down to the core objects is initially quite time consuming.

Re:This seems to focus on how things look (2, Insightful)

stoolpigeon (454276) | more than 6 years ago | (#23657109)

Yes - this book is much more generic - and addresses some UI issues but is primarily about aesthetics that are pleasing and meaningful. I think it is a nice complement to the kinds of resources you are linking.

Re:This seems to focus on how things look (4, Interesting)

WorldInChaos (1250700) | more than 6 years ago | (#23657191)

It's amazing how many times I try to stress this fact to the programmers/dev's I work with. I work for a very large industrial company, which unfortunately, has little emphasis on IT, but depends heavily on apps they create. Therefore, our developers are our designers, which is a rough combination. I have a degree in UI/Graphic Design, and have an interest in programming...so I make a very effective bridge between the two sides. However, trying to explain a developer that the usability of something is extremely important:it is the only thing a user will ever know/see, is a hard concept for them to understand. They just care about the programmatic efficiency and architecture, saying all web apps are forms and such. Poor guys. Hopefully this book will help me learn better methods on bridging that gap!

Re:This seems to focus on how things look (3, Interesting)

stoolpigeon (454276) | more than 6 years ago | (#23657277)

I don't know that it would necessarily help you better bridge the gap. It is pretty much an introduction to visual design. I would think the reader, like myself, needs to want to know more because they already know it is important.
 
I guess if they were to read it, it may help them come to that point. I think it does do a good job of showing different ways things can be done. A lot of the exercises have pretty strict rules, yet the example results are pretty varied. That helped me to start looking at things differently.

Re:This seems to focus on how things look (3, Interesting)

MindStalker (22827) | more than 6 years ago | (#23658497)

As a web-programmer who isn't "creative" I'd MUCH rather just work on the programming/functionality, then let a designer make it look good. I have no problem going back behind the designer fixing any bugs that cropped up in the making it pretty. But asking me to make it pretty while I create the functionality is simply a waste of my billable hours.

Re:This seems to focus on how things look (1)

jdbo (35629) | more than 6 years ago | (#23661751)

Don't forget that "making it pretty" is on the same spectrum as "making it usable"... and further along the spectrum is where you're at, "making it work".

Furthermore, "prettiness" often flows from "usable", due to increased usability resulting in better approachability and clarity.

And while its true that you shouldn't have to spend much of your thought process on the specifically pretty aspects of the design, you darn well better be aware of the usability aspects of the design, as those will directly impact your work.

So don't imagine there's a bright, clear dividing line here; a functionality first, prettiness-last approach will result in working programs that people will avoid using. (Just as prettiness-first, functionality last will result in striking programs that don't work).

Re:This seems to focus on how things look (1)

pipingguy (566974) | more than 6 years ago | (#23662789)

And I imagine that it would be a distraction/hindrance for you as well. As a former draftsman, I'd make sure the thing worked first via rough sketches, quick detailed scale mock-ups where necessary, explanatory text descriptions, etc., before sharpening the pencil and making things "look nice and professional".

Re:This seems to focus on how things look (1)

MindStalker (22827) | more than 6 years ago | (#23662961)

Actually I much prefer to be given pages that already look pretty and where I just need to add the functionality. Ok here is our car, now give it an engine approach.

Re:This seems to focus on how things look (1)

pipingguy (566974) | more than 6 years ago | (#23663197)

I might offer you a contract job in the future then, if you have time to work on side projects. Nothing major, of course, just stuff where I know what the outcome to be is and know what the interface should look like and behave.

Re:This seems to focus on how things look (1)

aproposofwhat (1019098) | more than 6 years ago | (#23665625)

Personally, I like to get the UI out of the way first - preferably via a mock-up generated by someone who knows their user base, and with a generalised script of how the app should run from the user's perspective.

I then have no problem with replicating the UI, and can concentrate on the interesting bits under the hood.

Re:This seems to focus on how things look (1)

MindStalker (22827) | more than 6 years ago | (#23666435)

Well yea, thats what I meant.

Re:This seems to focus on how things look (2, Interesting)

camperslo (704715) | more than 6 years ago | (#23658207)

Apple has done some odd things at times, but their old Human Interface Guidelines certainly had a lot of thought put into them. Even those that develop solely for other platforms certainly gain some useful perspective from spending some time looking at the design of and using apps on Macs.
Many of the concepts were very simple, like not adding color unless it had a purpose. "Pretty" is a negative if it is just a distraction.

Changes in user interfaces can have unintended consequences too. In the Mac OS 9 and earlier era, the Finder would not display the same directory in two different windows. (If you opened it in a new one the first would close) Back in the early days of OS X, I was copying files to another volume then deleting the originals. I got distracted and came back, and deleted a bunch of files on noticing them in another window. It turned out that this other window wasn't the backup volume, just another view of the first... I'd thrown away my data!

For the most part web apps have never had the benefit of the sort of research that's gone into desktop apps. I wonder what the web would look like today if Hypercard had been designed to support links between different machines... That might have had an interesting evolution.

Time to go walk the CyberDog...

Re:This seems to focus on how things look (0)

Anonymous Coward | more than 6 years ago | (#23658347)

I'd just like to thank you for that link. I was nodding in agreement throughout the whole piece - not because I know anything about design, but because all of their examples were things I've grumbled over in the past. It's refreshing to read actual acknowledgment of usability issues, as opposed to the seeming status quo of denying there is an problem because the functionality is technically still accessible. ("Wontfix: issue can be avoided by hopping on one leg while clicking. Information to this effect is clearly posted in the locked filing cabinet in a disused lavatory ... .")

"Everything" (2, Insightful)

starglider29a (719559) | more than 6 years ago | (#23657337)

A co-worker who was a programmer on a CAD app, a mathematician and didn't know how to use MSPAINT, let alone PShop once said:

"User Interface is EVERYTHING!

Router UI design (4, Interesting)

mrslacker (1122161) | more than 6 years ago | (#23657439)

I played a considerable role in the UI design that's in our aggregating router. Very broadly speaking, I'm the company's "hardware lead" - I'm actually a software engineer, with considerable low-level expertise, and did considerable parts of architecture design on our product from the kernel up.

I didn't design the of the overall look and layout (colors, fonts, layout) - that was done by a traditional Ajax web developer, but I did make many many adjustments to what he did in order to ensure consistency, make the backend CGI work, make the UI update in a reasonable fashion, and above all, make it _easy_.

If you've looked at the UI of some of the cheap wireless routers out there - linksys, Netgear and especially Buffalo, you'll know they tend to be dire. Some of the other more expensive products like SonicWall, PEPlink etc are better, but tend to be overwhelmed because the options they have are so over the top comprehensive, and there are endless submenus to find everything (reminds me of certain MS products).

Our product feature set isn't comprehensive by any means (but it does stuff others don't do), but we've been told by several customers how easy it is to use and configured. I like to think that's down to the considerable thought we've put into it the UI.

And yes, I deliberately didn't name the product in question; don't need anyone digging up dirt on me ;-)

Re:Router UI design (0)

Anonymous Coward | more than 6 years ago | (#23661271)

And regarding previous post,...and make_it_easy to using software.

That reminds me of similar story I heard in grad school, ... what a student should do if wants to do professional research, finding a 6 figures yearly income later in industry.

Proffesor to cs grad student..UCLA...
Yea, it's all fine, you found a neat problem and you solved it, and you wrote a paper, and I think that's good, and you might even sell the solution if you have some fundings,...but you have to show what you have, no one knows about it,...go to conferences, and give talks and talk and network, and show people what you have sold,... and then something might come,... selling, advertising

so the functionality should be presented

which comes back to UI design which shoud be easy to use, a constanly selling itself visualy and in functions, and make people want it to use it ...

Re:Router UI design (2, Funny)

Anonymous Coward | more than 6 years ago | (#23662567)

that was done by a traditional Ajax web developer
Ajax, a rich tradition since a couple years ago.

Re:Router UI design (0)

Anonymous Coward | more than 6 years ago | (#23665179)

traditional Ajax web developer

LMAO

I don't know about you ... (4, Interesting)

daveime (1253762) | more than 6 years ago | (#23657445)

... but soothing pinks and intuitive greens are all very well for the more "arty" amongst us, but spend 7 years looking at the same damn interface and you'll crave for a bog standard grey, white and black color scheme, with minimal icons that actually MEAN something ...

Half my time as programmer is taken up in making the most used functions topmost and leftmost in the window, and creating shortcuts to make things move faster ... why click on that "forward" button 1000 times a day, when you *KNOW* that is what the user will *always* do anyway ... shortcut it to auto-forward etc.

Software UI is not Visual Design (4, Insightful)

v(*_*)vvvv (233078) | more than 6 years ago | (#23657981)

I find it strange that a programmer is reviewing a "visual design" book and talking about interfaces, because UI is very different from "visual design".

1. Count the rules you depend on. A menu, a toolbar, and what else? The fewer rules the better. The more pre-existing rules the better.

2. Group what is related, and place functionality close to what they complement.

3. Make extensive use of hint blurbs for icons and buttons to describe what they do and show shortcuts. Delay is not necessary. Allow the user to turn them off, but make sure they're there.

4. Good documentation is as important as a good interface.

5. Autocorrection, input validation, and fault tolerance. Don't let users do things that cause errors. Provide ways to undo as much as possible.

6. Make sure things WORK. A great UI cannot fix a broken application, and bugs and quirks are often the most confusing to unsavy users. They might not recognize that something is broken, and blame their actions and panic.

The current UI paradigm is very simple, and innovation is not really that important. In fact, users are locked into many applications that have distinct UIs, primarily MS Office. So if you are building an application for a business, one of the best things you can do is make your app fit in with Office by sharing the same UI widgets. Even MS fails to do this by adopting different UIs for different application groups, and this is very disturbing.

"The best interface is the one you do not notice."

Re:Software UI is not Visual Design (1)

stoolpigeon (454276) | more than 6 years ago | (#23658519)

The two are very different, but I don't think they are completely divorced from one another. I think there is overlap and knowledge of visual design is beneficial.
 
I can appreciate why you may want a consistent experience across all interfaces, but I really doubt that is something you will ever see happen. Humans are just too varied, and what you might think is ideal just wont work for some others.
 
This book is not advocating any UI design- just educating its readers about some fundamentals of design. Something worthwhile for people who want to communicate via visual means.

Visual Design is the problem not the solution (3, Interesting)

Atrox666 (957601) | more than 6 years ago | (#23658253)

Visual design of software and software languages is simply outside the native mode for automated systems. Tactile or kinesthetic would be the correct mode. Audile would be an acceptable compromise. Visual design while pervasive and an industry standard is also fundamentally misguided even though most people are primarily visual.
You can see people starting to pick up on this as categorizing content(Visual) is giving way to tagging(Kino). You can see how much more flexible being able to tag photos is than having to slot them into categories like in a directory tree of folders. Categorization leads to duplication and ambiguity.

http://cultofjim.com/scripture/understanding_media/#chapter33 [cultofjim.com]

Never send an engineer to do an artist's job. (1)

Anonymous Coward | more than 6 years ago | (#23658467)

Speaking as a professional designer that sucks at coding (object-whatnow?) I say kudos to this.

The bleeding edge in application and web design does take some programming geniuses to test the very limits of what AJAX/CSS or whatever your preferred flavour of code can do... But compare Access '97 or 2003 to Bento and tell me that there's not something you'd rather be doing than fighting the application just to plop in a repeating table and a submit button.

I use enterprise database software, and am occasionally forced to read the help file, and I can only assume these people literally have 1s and 0s falling out of their ears. I don't care how many PhDs you have, this product is not a good example for proving the evolution of humanity.

Take a look at the evolution of Gmail for example, and how the interface has changed from working to workable. I always say a programmer is someone that doesn't care whether it's a button or a text link, just make it clickable. If you understand the difference, this might be a good book to help you bridge the gap.

I think the number of comments (1)

deesine (722173) | more than 6 years ago | (#23661503)

say it all. It's at 30 right now.

I call this job security.

Re:Never send an engineer to do an artist's job. (0)

Anonymous Coward | more than 6 years ago | (#23661961)

Most designers are frauds as artists. You know how you can tell? Give them a pencil and a piece of paper and tell them to draw a dog and a tree. Then you can laugh at the deer caught in the headlights look they give you and show them the door.

Re:Never send an engineer to do an artist's job. (0)

Anonymous Coward | more than 6 years ago | (#23664401)

They really are different things. I wouldn't call that fraud. OTOH I *would* say that calling 99% of what's on deviantart.com "art" is fraud.

Re:Never send an engineer to do an artist's job. (1)

dodobh (65811) | more than 6 years ago | (#23679887)

For most enterprise database products, the remote user is a machine. You are a second class user, puny human.

I personally prefer the psql command line to the GUI crap which is access.

Inconsistency in the rating? (1)

Idaho (12907) | more than 6 years ago | (#23658813)

This is confusing; the overview says the book is rated "7", however the review states somewhere halfway through:

If it weren't for that I'd have seriously thought about rating the book 9 instead of 8.


It makes quite a difference to me, as I would read "8" as "probably a good reference work if I need to know the basics about the subject", whereas "7" means something more like "the content is passable, but you probably might as well buy any other general introduction to the same topic".

Re:Inconsistency in the rating? (3, Informative)

stoolpigeon (454276) | more than 6 years ago | (#23660119)

Thanks for the catch. I was going to go with 8 and then switched it to 7. I fixed the score on the submission but missed correcting it in the body. Now - slashdot defines a scale in the submission guidelines and what they say for 7 is, "A good book; better than merely adequate, though not outstanding." With a decent index I'd have gone with 8, "Very good." So I think it is a good book and would be very good if it had that addition to help the reader use it as a reference.

Pretty is good, pretty is important, but... (1)

jddj (1085169) | more than 6 years ago | (#23659229)

It's more important to take a deep dive on user experience (from interface to interaction design to backend software capabilities).

The pretty should go on at the end.

Table of Contents (0)

Anonymous Coward | more than 6 years ago | (#23659551)

Would anyone be kind enough to share the table of contents? There's none in amazon or the summary.

How does it compare with Designing Visual Interfaces from Mullet & Sano?

th1s FP for GNA:A (-1, Troll)

Anonymous Coward | more than 6 years ago | (#23660173)

KNOWS THAT EVER

What They Don't Teach You In Software Engineering (1)

niyam (1099903) | more than 6 years ago | (#23664587)

Am quite startled to note that no college or university in India teaches the art and science of User Interface Design as a mandatory part of its course in software engineering. Have often delivered introductory talks and seminars on this subject across India to students as a guest speaker. Teaching this difficult subject, which has to do with aesthetics, intuition, and more 'occult' :-) arts, is quite a challenge to science and engineering students. But what a joy! It can't be taught. It can only be caught. Ask Kai Krause. Niyam Bhushan

Re:What They Don't Teach You In Software Engineeri (1)

niyam (1099903) | more than 6 years ago | (#23664619)

oops, sorry, the last name was meant as a signature at the end, like this: - Niyam Bhushan

lol (1)

easyemail (1235826) | more than 6 years ago | (#23667335)

lol. well all you programmers out there should just blindly pick a girlfriend because shes there to provide a function. For the guy who says the best interface is best if you dont know it. Well, how will you know if there is one. Really someone walking into a brick wall all your life dude because you cant seem to find the interface.

Re: (1)

clint999 (1277046) | more than 6 years ago | (#23669689)

Well yea, thats what I meant.
Check for New Comments
Slashdot Login

Need an Account?

Forgot your password?

Submission Text Formatting Tips

We support a small subset of HTML, namely these tags:

  • b
  • i
  • p
  • br
  • a
  • ol
  • ul
  • li
  • dl
  • dt
  • dd
  • em
  • strong
  • tt
  • blockquote
  • div
  • quote
  • ecode

"ecode" can be used for code snippets, for example:

<ecode>    while(1) { do_something(); } </ecode>