Catch up on stories from the past week (and beyond) at the Slashdot story archive

 



Forgot your password?
typodupeerror
×

Visual Communication in Digital Design 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.
Visual Communication in Digital Design
author Dr. Ji Yong Park
pages 218
publisher YoungJin.com Inc.
rating 7
reviewer JR Peck
ISBN 978-89-314-3434-7
summary A friendly & approachable guide to the art of visual communication.
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.
This discussion has been archived. No new comments can be posted.

Visual Communication in Digital Design

Comments Filter:
  • oblig. (Score:3, Funny)

    by Brian Gordon ( 987471 ) on Wednesday June 04, 2008 @02:52PM (#23656783)
    Command-line tools don't need to look good :)
  • by SCHecklerX ( 229973 ) <greg@gksnetworks.com> on Wednesday June 04, 2008 @03:04PM (#23656977) Homepage
    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]
    • 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!
      • 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: (Score:2, Insightful)

      by stoolpigeon ( 454276 ) *
      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.
    • by WorldInChaos ( 1250700 ) on Wednesday June 04, 2008 @03:15PM (#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: (Score:3, Interesting)

        by stoolpigeon ( 454276 ) *
        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 lookin
      • by MindStalker ( 22827 ) <mindstalker@@@gmail...com> on Wednesday June 04, 2008 @04:32PM (#23658497) Journal
        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.
        • by jdbo ( 35629 )
          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
        • 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".
        • 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: (Score:3, Interesting)

      by camperslo ( 704715 )
      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 a
  • "Everything" (Score:3, Insightful)

    by starglider29a ( 719559 ) on Wednesday June 04, 2008 @03:27PM (#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 (Score:4, Interesting)

    by mrslacker ( 1122161 ) on Wednesday June 04, 2008 @03:32PM (#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: (Score:2, Funny)

      by Anonymous Coward

      that was done by a traditional Ajax web developer
      Ajax, a rich tradition since a couple years ago.
  • by daveime ( 1253762 ) on Wednesday June 04, 2008 @03:33PM (#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.
  • by v(*_*)vvvv ( 233078 ) on Wednesday June 04, 2008 @04:05PM (#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."
    • 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
  • by Atrox666 ( 957601 ) on Wednesday June 04, 2008 @04:20PM (#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]
  • 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 occasional
  • 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: (Score:3, Informative)

      by stoolpigeon ( 454276 ) *
      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.
  • 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.

E = MC ** 2 +- 3db

Working...