How the logical, mental and virtual structures come together in an app.
"A product architecture is not an information architecture. It is not a set of pages that link to one another, or something that shows modals and describes what buttons do. A prototype will always serve this purpose better. It is a level deeper than that. It is the structure. The building blocks. It shows the objects in the system, and the relationships between them."
Color is still not well understood in digital design.
"Color is infinitely shifty. It's unstable in the presence of nearby colors. It's vulnerable to tricks of the light. It acts like it's moving when it's not. It can act like it's there when it's not. Put another way, color is subject to a thousand kinds of distortion as it travels from an object, through light, through your eye to your (acculturated) brain. Yet the tricky, interwined science and art of color perception still goes under-appreciated."
Style is no easy concept.
"Many people confuse style with fashion, with the surface features of an object. No, good style runs deep. I work in interaction and product design, and the designers I work with think hard about what lies beneath the skin; about the way a product or service interacts with those who engage it; about the value, functions and utility of the design. We go deeply into the essence of the product. This sense of style is one of the fundamentals of great design."
Some would rephrase this as 'Content first'.
"Text is not an afterthought in the design process. It should be your first consideration."
On one thing we all agree, Jakob Nielsen made the hyperlink blue.
"Hyperlinks are the glue that holds the Web together. Without links, the Web would be a very different place, that's if it would exist at all."
Great how resolution can drive design decisions.
"Proper use of color can enhance the user experience of any design as color affects humans psychologically, physiologically, and emotionally. (...) Remember that user experience is overarchingly affective. Both objective and subjective evidence supports the concept that color affects humans psychologically, physiologically, and emotionally. Importantly, these effects come wrapped in cultural contexts. This means that the reactions that color evokes in us can change depending on the culture or cultures in which we were raised, currently reside, or are currently acting as a user. Selecting and using color with thought, purpose, and care can enhance the user experience. We would love to hear your experiences with color use and choice in your designs. Please write your comments below. Until next time, please enjoy the experience."
But the thing is not to fall into the screen is paper parallel.
"With the rise of Web fonts as well as affordable hosted Web font services and ready-made kits, typography is reclaiming its title as design queen, ruler of all graphic and Web design."
If it has structure, it can be modular.
"Grids follow the same principle of modularity we've been considering the last few weeks. In some ways that seems obvious given the terminology modular grids. In other ways though it isn't quite as obvious that they're the same thing. However, when you think about how grids divide space and make it easier for us to make layout decisions, I think the modularity of grids falls right in line with the reusable modularity of components and design patterns. They separate concerns, by dividing the space into modular units. The characteristics of these modular units are reusable and through reuse help us more efficiently place information. Finally, the structure of these units in the grid leads to greater consistency in how content is organized."
Manipulate user engagement? Direct user behavior would be better.
"Information surfacing is to interaction designers what information hierarchy is to graphic designers. (...) Conceptual models are nothing new, but often become unintentionally obfuscated during the design processes. The design team, often dazed and confused, struggles to figure out why the product is now cluttered and unintuitive. A design thinking method I call 'information surfacing' helps to remedy this problem. Information surfacing involves the prioritization of UI elements with an intent to manipulate user engagement."
Everything that pleases the eye.
"To scholars and practitioners in the field of HCI at the early 1990's, the idea that aesthetics matter in information technology sounded heretic. Two decades later, in the early 2010s, this thought has conquered a solid place in both academia and industry."
Keep, hide or move. But are you telling the same story different on the desktop, the iPad or the smartphone?
"Responsive design can have a major impact on your content. I'll tell you how it works, how it can affect your content, and why you should-and need to-care."
Great set of resources all things graphics.
"Graphic Design undertakes the task of translating messages intended for specific audiences through visual communication. Such communication uses various outlets including typography, visual arts, page layout, and Web displays to effectively represent the message of a company, product, or brand. (...) Consider the following resources as you make your way in graphic design. Whether you are a student or teacher, just starting out in your career or simply looking for new information in this exciting field, these articles and resources will assist as you climb the ladder to success."
It keeps coming back to the idea of 'know the material you work with'.
"Interaction design is a multi-faceted discipline that links static communications together to form an experience. Understanding the basic principles of this discipline is core to designing websites that are not only aesthetically pleasing but that actually solve business problems and bring delight to their users. This article just scratches the surface of interaction design. For Web designers of any kind, considering these fundamentals when designing any transaction or interaction is imperative."
Interaction design deals with the behavorial dimension; visual design with the perceptual dimension of the user.
"Interaction designers and visual designers bring something different yet complementary to the table. If you can combine these in a pragmatic way it will enhance the final result and perhaps drive better innovation."
Paradigms from paper technology (like 'The Page') are deeply rooted in our minds.
"Content decisions should be driving the design of each page. As people scan the page, they are looking for content that seems relevant. Following this information scent should lead them below the fold if that is where their target content exists."
Always thought perception was an integral part of feeding the experience.
"Conceptually I believe you can break design into tangible and abstract activities. Tangible design typically draws on the artistic skills of the designer and results in some kind of visually pleasing artefact. This is what most people imagine when they think of design and it covers graphic design, typography and visual identity."
"Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid. In book design, that constraint is defined by the page through subdivision. Book designers take the page, divide it up into a modular grid of spaces. These spaces (called modules) are then combined to create rows and columns. These are then filled with content (images and text). The text feels like it belongs because the columns are related to the physical object: the page. (...) Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They're holding us back. Start designing from the content out, rather than the canvas in." (Mark Boulton)
"Visual communication via diagrams, sketches, charts, photographs, video, and animation is fundamental to the process of exploring concepts and disseminating information. The most-effective visualizations capitalize on the human facility for processing visual information, thereby improving comprehension, memory, and inference. Such visualizations help analysts quickly find patterns lurking within large data sets and help audiences quickly understand complex ideas." (Maneesh Agrawala, Wilmot Li, and Floraine Berthouzoz ~ CACM)
"There's something to this. Something neither the wheels nor the spectrum can explain. It's time to get down to the real source of color: The ridiculous complexity of human beings." (A Smart Bear)
"(...) one of the main issues that we see, but at times ignore, in this field is that most of us try to be jacks of all trades within UX." (Elisabeth Hubert)
"Many people do not read easily. They may have a visual problem or dyslexia. They may have not have had opportunities to learn to read, or be reading in stressful conditions or poor light, or perhaps they are reading in a second language. Is it possible to provide one consistent set of guidelines or approaches that will allow designers to meet all the apparently diverse needs of these people? Or are there compromises to be made?" (About Design to Read)
"(...) five reasons why vertical navigation should not be used and why designers and architects should almost always construct their sites with horizontal navigation in mind." (Louis Lazaris - Smashing Magazine)
"Unfortunately, my observation has been that even when all of the right people are involved, more often than not, the various design disciplines opt to compartmentalize the problem. In other words, they divide the project into an interaction design problem, a visual design problem, and an industrial design problem. Each of these problems is then tackled separately, and the resulting individual design solutions get bolted together at the end. It's a Tower of Babel situation, where huge opportunities are lost because the team fails to work together to come up with an innovative product solution and to employ a single, unified design language." (Nate Fortin - Cooper Journal)
"What can a non-designer do to harness the power of visual design without calling professional help? Quite a lot, says internationally-regarded visual designer Dan Rubin. We called Dan to talk about what design techniques are accessible to mere mortals. He also gave us a preview of his day-long workshop for non-designers at our User Interface 14 Conference, this November." (Jared Spool - UIE)
"About 8% of the male population has some sort of color blindness. The color blind have the inability to clearly distinguish different colors of the spectrum, they tend to see colors in a limited range of hues. Because of this, the color blind have trouble with a lot of websites." (Tom van Beveren) - congrats to tom
"This site was first launched in 1999 to accompany my lectures on the History of Graphic Design. I devised this unique format of presenting the information by topics because I saw that students were overwhelmed by the scope of the topic or most texts I also saw that they learned more when the discussions included direct links to what is happening in design today. It seems to work well for visual artists who are not interested in a degree in art history." (Nancy Stock-Allen) - courtesy of AP
"Interaction design, visual design, and industrial design are distinct disciplines for good reason: Each excels in different ways. Interaction designers must be good at imagining structure and flow, which requires strong analytical skills and a high degree of rigor, especially for complex systems. Visual designers and industrial designers are masters of visual and physical usability but are also masters of emotion: They know how to evoke caution, attract attention, and instill desire for a product at first glance. Users have just one experience of a product, though. All three aspects of the design must work in concert, or the product will fail to satisfy. Integration of the three disciplines is a central theme of Kim’s new book, Designing for the Digital Age." - (Kim Goodwin - Cooper Journal)
"We've all seen arguments in the design community that dismiss the role of beauty in visual interfaces, insisting that good designers base their choices strictly on matters of branding or basic design principles. Lost in these discussions is an understanding of the powerful role aesthetics play in shaping how we come to know, feel, and respond." - (Stephen P. Anderson - A List Apart)
"A common activity at the outset of many design projects is a competitive review. As a designer, when you encounter a design problem, it's a natural instinct to try to understand what others are doing to solve the same or similar problems. However, like other design-related activities, if you start a competitive review without a clear purpose and strategy for the activity, doing the review may not be productive. One risk is that you may find you've wasted your time reviewing and auditing other sites, because you end up with findings that don’t help you design your own solution. Another risk is that the design and interactions of competitor offerings might influence your solution too heavily, whether you intend them to or not. Once you've seen how others have solved a particular problem, their solutions may subconsciously affect your own thinking." - (Michael Hawley - UXmatters)
"When developing user interfaces, designers increasingly use custom graphical elements. As the web browser becomes basic technology for software interfaces, more and more elements derived from graphic and web design replace the traditional desktop approaches to the concrete design of human-computer interfaces." - (Milan Guenther - Boxes and Arrows)
"News websites can be intriguing to examine from a design perspective. Regardless of what type of news they cover, they all face the challenge of displaying a huge amount of content on the home page, which creates plenty of layout, usability and navigational challenges for the designer. The lessons that can be learned from examining how news websites address these challenges can be valuable for designers who work with other types of websites, including ones with blog theme designs." (Steven Snell - Smashing Magazine)
"Recently, I had the opportunity to reflect on common misconceptions about the role of visual design that are still prominent in the beliefs of executives, product leaders, engineering managers, and marketing professionals. Is there anything team members can do to illustrate certain beliefs are wrong? What could they do to demonstrate the truth about visual design to coworkers and stakeholders?" (Luke Wroblewski - UXmatters)
"The whole may be more than the sum of its parts, but without the parts, there is no whole. Lest that sound like some weird philosophical meandering to you, take comfort in observing the finer aspects of creative and appealing user interface design." (Torley Wong - Smashing Magazine)
"RISD: Rhode Island School of Design or Reason, I'm Sleep Deprived?" (YouTube)
"In this tutorial, I describe various common graphic design elements in modern web ("2.0") design style. I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs." (Web Design From Scratch)
"Whether we're designing the user experience for a digital product or a physical one, as UX professionals, we are uniquely positioned to influence the behavior of other people, for good or ill. Our employers or clients charge us with responsibility for not only defining a design problem from multiple perspectives, but also finding solutions that are better than the ones that came before." (Jonathan Follett - UXmatters)
"This website attempts to walk you through the long and diverse history of a particular aspect of human endeavour: The translation of ideas, stories and concepts that are largely textual and/or word based into a visual format, i.e. visual communication." (Elif Ayiter - Citrinitas) - courtesy of mvuijlsteke
"As good design further penetrates the Web, once highly-regarded conventions fall into disfavor and are replaced by more effective ones. Yet some flawed conventions persist. In fact, they persist on some pretty high-profile websites; to their detriment." (Andy Rutledge - Design View) - courtesy of ruurdpriester
"In this tutorial, I describe various common graphic design elements in modern web ("2.0") design style. I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs. It follows on from my Current Style article, and analyses in greater depth the design features of the current Web 2.0 design style." (Web Design From Scratch)
"Bottom line? Visual design is more than styling. It is function. And not only because it communicates, but also because it makes us feel. And between feeling and communication, people find things easier to use." (Stephen P. Anderson - PoetPainter)
"In this column, I'll introduce you to a promising method that just might solve this problem. While this method has not yet been subjected to rigorous peer review or experimental testing, it offers an intriguing solution and is endlessly fascinating to me. And it just might prove to be the kind of powerful technique we've been looking for to illuminate users' emotional reactions to our designs." (Paul J. Sherman - UXmatters)
"Have you ever presented visual design choices to a product team only to have the proceedings disintegrate into an argument about the color orange? Visual designer Nick Myers shows how conducting user research with an eye towards visual design can get your audience to objectively evaluate your decisions and keep their subjective opinions out of the discussion." (Nick Myers - Cooper Journal of Design)
"There is an astonishing amount of disbelief that the users of web pages have learned to scroll and that they do so regularly. Holding on to this disbelief – this myth that users won't scroll to see anything below the fold – is doing everyone a great disservice, most of all our users." (Milissa Tarquini - Boxes and Arrows)
"This article is Part III of my series 'Color Theory for Digital Displays'. It describes how you can apply color theory to application program user interfaces and Web pages and provides many guidelines for the effective use of color." (Pabini Gabriel-Petit - UXmatters)
"To grok something is to achieve an intuitive understanding of it. To grok web standards, we have to understand them as more than a means to an end, more than simply an alternative method of producing a visual design." (Craig Cook - A List Apart) - courtesy of elearningpost
"(...) this article covers most of the current design trends which I recognize as high-quality ones." (Pavel Senko - ontoinfo)
"(...) here are six of those principles, as I feel the advice is still timely for those of you just starting in design/CSS." (Cameron Moll - Authentic Boredom)
"Many articles have been written on what is probably the single most ubiquitous interface element within Web applications today: the form. Forms justifiably get a lot of attention because their design is critical to successfully gathering input from users. Registration forms are the gatekeepers to community membership. Checkout forms are how eCommerce vendors close deals. But what goes in must eventually come out, and the information users provide to Web applications often makes its way back to users in the form of tabular data" (Luke Wroblewski - UXmatters)
"An icon search task that lasts longer than anticipated can result in user annoyance or even premature abandonment. I once changed the mouse settings on my laptop to be overly sensitive, and had a colleague use it to show me a data analysis technique she had been working on." (Matt Queen - Boxes and Arrows)
"Visual designers with experience in or an understanding of business, engineering, usability, or information architecture can better account for those considerations within a product design. This point is especially important when you consider the visual design of a product is the voice of the interaction design, information architecture, and the business." (Joshua Porter - User Interface Engineering)
"During my years as an interface designer, I've worked with lots of different development teams. From big companies to small startups, the interactions between me—the product designer—and developers have been pretty consistent. We work through what interactions and features are possible given our timeframe and resources. We discuss edge cases and clarify how specific interactions should work. We debate product strategy, information architecture, target audience, front-end technologies, and more. We also frequently encounter the same issue: the need to consider what's not there." (Luke Wroblewski - UXmatters)
Part I and II - "Computer monitors display information using the RGB (Red-Green-Blue) color model. An RGB monitor synthesizes colors additively by selectively illuminating each of its pixel’s red, green, and blue phosphor dots at varying levels of intensity. The light from a pixel’s three phosphor dots blends together to synthesize a single color. In additive color synthesis, all hues of the visible spectrum of light are mixtures of various proportions of one, two, or three of the primary colors of light: red, green, and blue. (...) Our perception of hues, values, and chroma levels depends upon their interaction with adjacent hues, values, and chromas, which can result in color-contrast, value-contrast, and chroma-contrast effects, respectively." (Pabini Gabriel-Petit - UXmatters)
"The best websites are highly functional. They are task-focused. Graphic design has an important, though limited role. Don't try and force the Web to be what it's not." (Gerry McGovern)
"This study evaluated the effects of white space on visual search time. Participants were required to search for a target word on a web page with different levels of white space, measured by level of text density. Screens were formatted with one of four types of graphical manipulation, including: no graphics, contrast, borders and contrast with borders under two levels of overall density and three levels of local density. Results show that search times were longer with increased overall density but significant differences were not found between levels of local density. Only the use of contrast was found to be significant, resulting in an increase in search time." (Software Usability Research Lab Usability News 6.2)
"In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions. Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference." (Software Usability Research Lab Usability News 6.2)
"The best way to improve the effectiveness of your company's web site is to let your site's users lend you a hand (quite literally) through the process of paper prototyping." (troy janish - evolt.org)
"The purpose of this document is not to copy the intellectual property of others, but rather as a jumping-off point for your own unique web graphic projects. It's for Brainstorming, if you will." (intersmash)
"(...) a must read book by all kind of designers. The principles of design provided in this book are extremely valuable. This is by far one of the best design books I have ever read. It is organized, well written, concise and a great resource for design references. Not only the book explains each principle carefully, it also provides real world example to help readers visually understand the principle presented." (VisualGUI.com)
"Metacognition is associated with planning, monitoring, evaluating and repairing performance. Designers of elearning systems can improve the quality of their environments by explicitly structuring the visual and interactive display of learning contexts to facilitate metacognition. Typically page layout, navigational appearance, visual and interactivity design are not viewed as major factors in metacognition. This is because metacognition tends to be interpreted as a process in the head, rather than an interactive one. It is argued here, that cognition and metacognition are part of a continuum and that both are highly interactive." (David Kirsh - Dept. of Cogsci, UCSD)
"You can increase the effectiveness of your visual web designs and graphics by getting a little understanding of two human vision systems researched and written about by Margaret Livingston (a neurobiologist)." (Heather Quinn - evolt.org)
"This colorpicker is (...) more compatible - it now works in Mozilla, and should also work in Opera, since I'm using a much better slider control. I've also added 3 more colors, bringing the total auto-generated colors to 9, and the ability to export your colors to a Photoshop color table." (twysted methyd) - courtesy of nathan steiner
"It's time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites." (Douglas Bowman - A List Apart 3.0)
"Successful visual designers well know the audiences they are designing for, and realize that their audiences exist at multiple levels." (Dirk Knemeyer - Thread Inc.)
"By reducing visual complexity at the cost of structural simplicity, you will give your users a hard time understanding and navigating the content of a web site." (Henrik Olsen - guuui)
"A website needs to be flexible. It needs to be able to change as the organization changes. The more change within the organization the more flexible the website needs to be. Too many websites are still being designed from a print perspective; as if they were some once-off brochure." (Gerry McGovern)
Always handy for thinking about color usage on the Web (pixylophone) - courtesy of cityofsound
"Strong visual design is about balance. It requires an appropriate relationship between written content, information hierarchy and the use of visual elements such as graphics and photography." (Dirk Knemeyer - Thread)
"My hope with this site is that some of you that happen to stumble upon it will more realize the importance of colours - to learn that there is more to colours than you used to think. This will be a step in the right direction for colours on the Web." (Donald Johansson - Web Whirlers) - courtesy of lucdesk
"Hand picked by digital design pioneer Clement Mok, these high-quality images are drawn from the best of his acclaimed image collection (...). All we require for registration is your name and email address." (About the Visual Symbols Library) - courtesy of antenna
"We think of colour as an objective thing: Red is red and can't be seen in any other way. But this is not so. The colour we perceive depends on things like the words we have in our language (our culture) to describe it, the other colours surrounding it and what the brain is expecting to see." (Juan C. Dürsteler - Inf@Vis!)
"Preconceived notions are just one of the mistakes people make when they work with a designer." (Will-Harris) - courtesy of kelake
"Graphic designers are asked to perform the difficult task of being creative every single day. Often, our main priority is to feed our client's fascination for originality. We experiment with colors, composition, typography, and photography in order to deliver an original visual solution." - (Maria Acosta - Thread Inc.)
"An experiment in language and interface, Plumb Design's Visual Thesaurus is both an artistic exploration and a tool to explore, study, and analyze the structure of language." (Plump Design)
"(...) an index of the quarterly print magazine for everyone involved in graphic design and visual culture" (Artificial Environments)
And Other Notes of the Distinction Between Style and Design (Adam Greenfield - A List Apart)
"Only that which is understandable can the designer express clearly in his or her work. Clarity of purpose makes him or her determine the media." (DesignArchiveOnline - 20th Century Information Design)
"As a powerful form of communication, color is irreplaceable." (Professor J.L. Morton)
"... Edward Tufte's principles of visualizing information." (elearningpost)
"(...) how our brain draws colour pictures" (Beyond 2000)
"International professional organization with more than 2,500 members" (Contact SND)