About Services Process Resources Contact Blog Teach me! Log In

Semantic Design:

A Science-Based Approach for Creating Content that Works

Semantic Design

 

Introduction

Create Content People Trust and Use

Based on Proven, Science-Based Guidelines for Effective Content


The term “semantic design” simply refers to design that means something. While the term is most often used in the field of software development, the concept is used in all fields – industrial design, architecture, manufacturing, education, and, of course, information design.

In information development, semantic design helps readers and users understand content more quickly, more accurately, and with less effort. It makes information easier to find, read, understand, use, and remember. Semantic design is a critical component of instructional, technical, and high-value business content. It's focus is practical (rather than theoretical), and provides specific guidance for making design decision based on science – the science of how human beings naturally perceive and process visual information.

Results

When Others Succeed, You Succeed!

Advance Your Career, Garner Support, Improve Outcomes

Tired of Being Undervalued, Underpaid, and Overworked?


More and more technical communication positions require a broad skill set that includes some form of design. Even a quick online search for “technical writing” positions shows that employers are looking for people proficient with graphic design, video production, web design, print layout, illustration, presentation design, data visualization, and more.

When you become proficient in science-based design, you can:

  • Earn more money.
  • Qualify for more positions.
  • Demonstrate your value.
  • Become the in-house expert your people rely on.
  • Get a “seat at the table.”
  • Get people to focus on what you want them to do.
  • Develop high-quality content faster.
  • Gain the support of key decision-makers.
  • Express your ideas more effectively.
  • Facilitate compliance and productivity.

 

Benefits

A Practical, Scalable, and Repeatable Approach Anyone Can Master!


There are many myths around design, and not many people – even professional designers – understand that design guidelines are based on how we, as human beings, derive meaning from what we see. Learning design the traditional way can be confusing and overwhelming. There is a massive amount of free information and advice floating around about how to learn design. Too often, however, expert designers give advice that isn't very helpful – advice like "Use proper alignment" or "Use a logical color palette." But how do you know what proper alignment is, or what logical colors are? By understanding the direct connection between perception and design!

Good design doesn't have to be a mystery. It's not about creativity or self-expression – it's about problem-solving! It's a discipline based on the science of how human beings perceive and process information – A discipline you can master!


For example, you can transform a dense spreadsheet with more than 100 tabs of valuable (but nearly incomprehensible) information into a beautiful, easy-to-use, interactive online infographic.


From This...

 

To This!

 

 

Why Design Matters

Understanding What Works, What Doesn't, and Why!


Did you know… if you want to create content that works – content that inspires trust, engagement, action, and success – then you need to become proficient in design, as well as writing?

The term design has many connotations these days. Many people think that design is about art, self-expression, or making things “pretty.” In fact, design is a form of problem-solving, as outlined by leading design scholars and practitioners at places like Stanford's school of design and the new Information Schools emerging around the world. The term design simply refers to the arrangement of things, and good design refers to the intentional arrangement things to solve a specific problem.

Research in fields with high-stakes outcomes, such as health care and aeronautics, shows that, while the ideas and language we convey through writing are very important, the way that we present those ideas can be even more important. Humans make qualitative judgements almost instantaneously – we decide if we like something or not before we even know what it is. (See references below.) And that judgement changes the way we perceive and engage with content from that moment on. Effective design actually inspires trust and engagement, even when there are known issues with usability and “content.”

Effective communication through content requires more than just good writing. The way that we present information either reinforces or undermines meaning, and can make the difference between content that frustrates people and content that delights people and empowers them to succeed! 

As language experts, we tend to focus almost exclusively on writing, and it's easy to forget that writing is the visual representation of language. This means that, during perception, before text even gets to the language centers of the brain, we first process it as "pictures" – as a specialized set of visual stimuli we've learned to interpret in the same way we learn to interpret a cryptic code. After we interpret visual stimuli as text, only then do we process it as language – a complex process in and of itself! Science-based design allows you to optimize perception and information processing so your users and readers can achieve full understanding faster, with less effort, more accurately, and with pleasure!

Transform Your Content

Join our email list to receive weekly updates, tips, and tricks to help you create content that helps others succeed! 

Sign me up!

 

Science-Based Design

Research, Reasoning, and Results!


Semantic design is science-based – it incorporates knowledge about how human beings perceive and process information from a variety of fields, such as neurology, physiology, anatomy, and psychology, to develop dynamic, evidence-based guidelines for making specific design decisions. Semantic design is an approach for teaching, learning, and using design that provides specific, evidence-based design guidelines, as well a framework for making design decisions, so you can be successful with any project in any field, genre, or medium.

 

Fact Sheet

The Science of Good Page Design: A Brief Introduction


Download a Fact Sheet Now for an Introduction to the Direct Correlation Between Science and Design, Including:

  • The 3 basic design elements (not 7 or 9 or 12 – there are actually just 3!)
  • The 1 design principle you can use for all design decisions
  • The importance of attention and pleasure – two critical scientific components of design that are often overlooked
Show me the fact sheet!
InfoDev Library

A Unique Resource for Interdisciplinary Knowledge


Nanatoo uses an evidence-based approach to information development, and every decision is based on an in-depth understanding of how humans perceive and process information, and this is balanced with best practices and the priorities of the project and the organization. To support our evidence-based approach, we have compiled an extensive, robust body of peer-reviewed scientific research and other resources to guide every information-development decision. We maintain this research in an online InfoDev Library for easy reference.

The InfoDev Library is a unique, interdisciplinary resource. It includes publications from a wide variety of fields, including education, technical communication, psychology, design, neuroscience, health care, and more. It includes both peer-reviewed, academic research from scholars and hands-on, practical advice from working professionals.

Learn more!

Hey there! I'm Tina M. Kister... 

I'm an information developer, and I teach communication professionals how to develop information that is easy to find, read, use, understand, and remember, so they can help other people succeed and advance their careers.

I specialize in high-value, complex content that helps people get things done. I have a background in both creative and technical communications (fine art and technical writing), as well as certifications in technical communication (CPTC), project management (PMP), proposal management (APMP), and content strategy.

I've worked in a variety of fields, genres, and media for the last 25 years, and I have a rare perspective that synthesizes best practices across traditionally siloed areas of business communications.

I've learned so much, and I'd like to share it with you!

Context
Information Development – A New Paradigm for the Information Age

Science-based design is one important component of information development. Information development is a new paradigm that reflects the modern information environment, raises awareness about the importance of effective content, re-assesses the often outdated conventions used today, and champions the tremendous value that information experts bring to both organizations and individuals.

People produce content all the time, and they often do it without any real knowledge of how to do it. People also mistake the ability to do something with the ability to communicate something. In the modern world, we take literacy for granted. We tend to think that, if we can read and write, we can produce content. And it’s true – just about anyone can arrange letters and words on a page or a screen to communicate an idea. But not everyone can do it well – that is, not everyone can create high-quality information that actually achieves a desired result.

Information development is about creating content with expert-level knowledge, awareness, and the clear intent to help both individuals and organizations succeed.

 

Sample Content

Sample Content

Module 2: Perception and Design

Lesson 1: Sensation and the Three Basic Design Elements

Did You Know... There Are Really Only Three Basic Design Elements?


In the modern world, there is a common misconception that "content" and "design" are separate and somehow opposed to one another. In fact, all content inherently requires and includes design – the term "design" simply refers to the act of arranging things, and "intentional design" refers to the act of arranging things in order to achieve a desired result. In short, design is a form of problem-solving. Because of this, design is an essential skill for InfoDev Pros – indeed, for everyone who creates content.

Nanatoo has developed a science-based approach to design that eliminates the mystery and confusion that often comes with learning design the traditional way. We approach design as a discipline that can be mastered by anyone through a deep understanding of how people perceive and process information and how human perception translates into specific, actionable guidelines.

For example, the InfoDev approach to design provides a simplified, accessible framework for learning the "Basics of Design." The basics of design, which generally consist of learning about "Design Elements" and "Design Principles," provide an essential framework for mastery. Unfortunately, while just about everyone agrees that the basics of design are an essential prerequisite, no one seems to agree on what the design basics are. Some people say there are seven elements and six principles. Some people say there are eight elements and ten principles. Some people even combine the elements and principles together into one big group! It's no wonder that people get overwhelmed when trying to learn design!


With the Traditional Approach, Even the “Basics” Are Confusing!

 


Design Basics, According To...


Design Elements:

  1. Line
  2. Color
  3. Shape
  4. Space
  5. Texture
  6. Typography
  7. Scale
  8. Dominance and Emphasis
  9. Balance
  10. Harmony

Design Elements:

  1. Line
  2. Shape
  3. Color
  4. Texture
  5. Space

Design Principles:

  1. Rhythm
  2. Proportion
  3. Emphasis
  4. Balance
  5. Unity

Design Elements:

  1. Line
  2. Shape
  3. Form
  4. Color
  5. Texture
  6. Space
  7. Value

Design Principles:

  1. Pattern
  2. Contrast
  3. Emphasis
  4. Balance
  5. Proportion/Scale
  6. Harmony
  7. Rhythm/Movement

Design Elements:

  1. Dot
  2. Line
  3. Area

Design Principles:

  1. Contrast
  2. Orientation and Position
  3. Scale
  4. Quantity
  5. Graphic Shapes and Linear Elements
  6. Depth, Dimension and Perspective
  7. Color
  8. Typography
  9. Space
  10. Repetition
Canva


Design Principles:

  1. Line
  2. Scale
  3. Color
  4. Repetition
  5. Negative Space
  6. Symmetry
  7. Transparency
  8. Texture
  9. Balance
  10. Hierarchy
  11. Contrast
  12. Framing
  13. Grid
  14. Randomness
  15. Direction
  16. Rules
  17. Movement
  18. Depth
  19. Typography
  20. Composition

 


 

Shouldn't the “Basics” Be Basic?

With the InfoDev Approach, Design Basics Are Easy!

 


The Real Design Basics...


Design Elements:

  1. Shape
  2. Color
  3. Position

Design Principle:

  1. Gradient

 


 

How Is This Possible?

It turns out that researchers have identified hundreds of "pre-attentive properties," which are specific types of visual stimuli that we perceive and process almost instantly and without the need for conscious attention or cognitive effort:

  • Added Marks
  • Angle Sharpness
  • Blur
  • Collinearity
  • Concavity
  • Convexity
  • Curvature
  • Detail
  • Elongation
  • Enclosure
  • Filled
  • Hue
  • Joined Lines
  • Length
  • Numerosity
  • Orientation
  • Shadow
  • Shape
  • Sharpness
  • Size
  • Spatial Grouping
  • Spatial Orientation
  • Surround Box
  • Value
  • And Many More...

And all of these pre-attentive properties fit into just three basic categories:

  1. Shape
  2. Color
  3. Position

These three basic elements are the building blocks of the traditional design elements. When used in combination and with various attributes, the three basic elements convey properties such as texture, contrast, and value. And these three elements are also the basic building blocks of content, including overall layout, individual page (or screen) elements, and even text!

 

Course Slides

Design Basics Simplified: The Three Design Elements


This mini tutorial provides an introductory glimpse into the InfoDev approach to Design Basics, with a focus on the Design Elements.

(Click here to view full-size slides.)

Science-Based Design – Design Basics Simplified: The Three Design Elements

During the Sensation phase of perception, light enters the eye through the cornea, the pupil, and the lens.

The lens inverts the light…

…and focuses it on the retina, which is the area at the back of the eye that contains photoreceptor cells…

…called rods and cones.

Rods facilitate vision in low-light conditions and are associated with peripheral vision.

Cones facilitate vision in normal light conditions and are associated with the perception of color. There are three main types of cones cells, each of which responds to either red, green, or blue light.

Cones also facilitate the perception of detail and contrast, which, in turn, allows us to perceive different features like shadows and edges.

Researchers have identified hundreds of specific features and attributes...

...which we perceive and process through various neurophysical pathways.

These features and attributes fall into just three categories: shape, color, and position.

Shape, color, and position are the "preattentive" elements in perception because we perceive and process them instinctively and automatically.

They are also the building blocks of the traditional design elements.

Texture, for example, is a complex effect created with a combination of the three basic elements.

And these three basic elements are also the building blocks of content, including overall layout and design, individual content elements...

...and even text!

 

References

  1. Goldstein, E. Bruce. 2010. Sensation and Perception, 8th Edition. Eighth. Belmont, CA: Wadsworth, Cengage Learning.
  2. Jennings, Sam. n.d. “Layman’s Layout: Spreads, Fonts and Design Inspiration.” Accessed June 13, 2016. https://laymanslayout.wordpress.com/.
  3. Johnson, Jeff. 2014. Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines. 2nd ed. Waltham, MA: Elsevier.
  4. Sillence, Elizabeth, Pam Briggs, Lesley Fishwick, and Peter Harris. “Trust and Mistrust of Online Health Sites.” In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 663–70. ACM, 2004. https://www.researchgate.net/publication/221516871_Trust_and_mistrust_of_online_health_sites.
  5. Stout, JaneAnn. 2000. “Design: Exploring the Elements & Principles.” Iowa State University, University Extension, 4-H. https://texas4-h.tamu.edu/wp-content/uploads/Resources_Fashion_Storyboard_exploring-the-elements-and-Principles-of-Design.pdf.
  6. Stribley, Mary. n.d. “Design Elements & Principles.” Canva: Learn. Accessed January 13, 2020. https://www.canva.com/learn/design-elements-principles/.
  7. Symonds, Matt. 2014. “The Elements of Design (the Tools to Make Art) / The Principles of Design (How to Use the Tools to Make Art).” Willamette High School Multimedia, Bethel School District, Eugene OR. http://blogs.bethel.k12.or.us/msymonds/files/2014/10/Elements-and-Principles-Overview.jpg.
  8. Taheri, Maryam. 2019. “10 Basic Elements of Design.” Creative Market. September 28, 2019. https://creativemarket.com/blog/10-basic-elements-of-design.
  9. Tractinsky, Noam, Adi S. Katz, and Dror Ikar. “What Is Beautiful Is Usable.” Interacting with Computers 13 (2000): 127–45. https://www.semanticscholar.org/paper/What-is-beautiful-is-usable-Tractinsky-Katz/be4555171f460b8a095a6158075864ac11f13403.
  10. University of Alaska Fairbanks. n.d. “Fundamentals of Design: Basic Elements: A Companion Site to CIOS 233 Course at UAF.” Desktop Publishing (blog). Accessed January 13, 2020. https://cios233.community.uaf.edu/design-theory-lectures/fundamentals-of-design-basic-elements/.
  11. Ware, Colin. 2011. Visual Thinking for Design. Amsterdam: Elsevier Morgan Kaufmann.
  12. Ware, Colin. 2012. Information Visualization: Perception for Design. 3 edition. Waltham, MA: Morgan Kaufmann. https://www.researchgate.net/publication/224285723_Information_Visualization_Perception_for_Design_Second_Edition.
  13. Wolfe, Jeremy M., and Todd S. Horowitz. 2004. “What Attributes Guide the Deployment of Visual Attention and How Do They Do It?” Nature Reviews. Neuroscience 5 (6): 495–501. https://doi.org/10.1038/nrn1411.
  14. Zajonc, R. B. “Feeling and Thinking: Preferences Need No Inferences.” American Psychologist 35, no. 2 (1980): 151–75. https://doi.org/10.1037/0003-066X.35.2.151.

Spread the word!


Citation: Kister, Tina M. 2020. Semantic Design: A Science-Based Approach for Creating Content that Works. Nanatoo Communications, LLC. Accessed . https://www.nanatoo.com/semantic-design-wp.


 
Close

Join Us!


We value your privacy, and  will never (ever) share your email with anyone. You can unsubscribe any time by clicking the Unsubscribe link at the bottom of each email or by emailing us at support@nanatoo.com.