Apps Pod 04 : Visual Principles for User Interfaces Parts 1&2

Summary

This interactive design video script explores the visual principles behind user interface design, emphasizing the role of aesthetics in enhancing usability. It covers the importance of visual hierarchy, gestalt principles like proximity and similarity, and the use of grids for consistent information density. The script guides designers on creating structured, organized, and aesthetically appealing interfaces that improve user experience and brand reinforcement.

Takeaways

• 🎨 The role of visual design in user interface (UI) is to reinforce brand identity, enhance aesthetics, and improve usability.
• 🛠️ UX designers are responsible for the overall user experience, including the aesthetics and visual design, which are integral to the user interface.
• 🌈 Brand reinforcement in UI can include elements like color, animation, illustration, iconography, and tone of voice, creating an emotional connection with users.
• 👀 Visual design enhances usability by improving aesthetic appeal, which can make a product more desirable to use.
• 🔍 Gestalt principles, rooted in psychology, help organize information in UI design, making it easier for users to perceive and understand.
• 🔗 The proximity principle in Gestalt theory suggests that users perceive relationships between objects that are close to each other.
• 📊 The similarity principle groups similar objects together, helping to establish a secondary level of organization in UI design.
• 📚 A clear visual hierarchy in UI design guides the user's attention to different elements in order of importance, enhancing readability and scannability.
• 📏 Grids are essential in UI design for organizing information density and maintaining a consistent structure throughout the app.
• 📐 Grid units and gutters (spacing) should be consistent and based on multiples of a base unit to ensure a coherent layout.
• 📈 The use of scale, color, and layout can effectively communicate information hierarchy, directing users to the most important content first.

Q & A

What is the main focus of the video script?

The video script focuses on the visual principles behind user interface design, discussing how to create beautiful and usable interfaces that enhance user experience.

What are the roles of user experience (UX) designers?

UX designers are responsible for the entire user experience and aesthetics, including the user interface, which is what people typically think of when considering UX design.

How does visual design contribute to user interface design?

Visual design contributes by reinforcing existing brand elements, developing a brand that matches the project's approach, and enhancing the aesthetic appeal of the product, making it more desirable to use.

What is the importance of aesthetic appeal in visual design?

Aesthetic appeal, which refers to the perceived beauty of a product, is important because if the design is perceived as more beautiful, people are more likely to want to use it.

Can you explain the concept of affordances in visual design?

Affordances in visual design refer to how users understand how to use something based on its design, providing subtle clues and using principles of perception to communicate how elements on the page are related to each other.

What are Gestalt principles and how do they help in organizing information in user interface design?

Gestalt principles are a form of psychology that help designers organize information by understanding how the human brain perceives and simplifies complex images or designs into organized systems, creating a whole rather than a series of disparate elements.

How does the proximity principle of Gestalt theory apply to user interface design?

The proximity principle highlights how users perceive relationships between objects that are close to each other, helping to create visual clarity on how information relates to each other in a design.

What is the similarity principle in Gestalt theory and how does it help in grouping information?

The similarity principle refers to the perception of seeing similarities as a grouping mechanism, allowing users to naturally group objects that are similar to each other, which can be used to create visual clarity in a design.

What is visual hierarchy and why is it important in user interface design?

Visual hierarchy refers to guiding the eye on the page so that it attends to different design elements in their order of importance. It is important because it helps users understand the layout and prioritize information effectively.

How can grids and information density be used to improve the organization of a user interface?

Grids provide a basic layout for pages, dictating the information density and overall structure and navigation of the app. By using grids, designers can ensure consistent spacing and organization, making the interface feel clean and well-ordered.

What is the significance of scale, color, and placement in establishing a clear visual hierarchy?

Scale, color, and placement are significant in establishing a clear visual hierarchy as they can indicate the importance of different pieces of content on a page. Using variations in these elements helps guide the user's attention to the most important information first.

How does the use of color in visual design contribute to enhancing usability and aesthetic appeal?

Color in visual design can help guide the user's attention, differentiate between elements, and create a more organized and aesthetically pleasing interface. It can also reinforce brand identity and contribute to the overall user experience.

What is the role of iconography in enhancing usability in a user interface?

Iconography can provide quick guidance on how to use a tool, help in the prioritization of information, and contribute to the visual interface by guiding the user on how to navigate the experience.

Can you provide an example of how the Instagram app has improved its user interface based on the principles discussed?

Instagram has cleaned up its user interface with a sizable overhaul, stripping out unnecessary color in favor of black and white to allow users to focus more on the images. The updated logo is vibrant, creating a contrast that draws attention without distracting from the content.

Outlines

00:00

🎨 Principles of Visual Interface Design

This paragraph introduces the fundamental concepts of user interface (UI) design, emphasizing the importance of creating aesthetically pleasing and functional interfaces. It highlights the role of visual design in enhancing usability and establishing a strong page hierarchy. The speaker explains how visual design reinforces brand identity through elements like color, animation, and iconography, and discusses the impact of aesthetic appeal on user engagement. The paragraph also touches on the importance of readability, scannability, and the use of visual cues to guide users through the interface.

05:01

🔍 Exploring Affordances and Gestalt Principles

The speaker delves into the concept of affordances, illustrating how they provide intuitive guidance on the use of interface elements. Transitioning to Gestalt psychology, the paragraph explains how these principles aid in organizing information within UI design. The Gestalt principles discussed include proximity and similarity, which help in perceiving relationships between objects based on their spatial arrangement and visual characteristics. The speaker uses examples to demonstrate how these principles can clarify the organization of information on a UI, such as differentiating between candidate information and business names in a job application layout.

10:06

📐 Applying Gestalt Principles to UI Design

Building on the previous discussion, this paragraph further explores the application of Gestalt principles, specifically similarity, in UI design. The speaker uses a candidate list example to show how the use of icons and color-coding can create additional layers of organization and meaning. The paragraph emphasizes the importance of these principles in creating visual clarity and guiding the user's understanding of the information presented. The speaker encourages designers to consider these principles when developing app screen designs to enhance the user experience.

15:07

📚 Establishing Visual Hierarchy in UI Design

This paragraph focuses on the concept of visual hierarchy in UI design, which is crucial for guiding the user's attention to the most important information. The speaker discusses the use of scale, color, spacing, and placement to indicate the importance of different design elements. The paragraph provides examples of how varying typeface sizes, color contrasts, and the size of design elements can effectively communicate information priority. The speaker also emphasizes the importance of grids in creating a coherent structure and navigation flow within an app.

20:11

🌐 Understanding Grids and Information Density

The speaker introduces the role of grids in organizing UI design, dictating the layout's information density. The paragraph explains how grids are composed of squares with consistent units of measure, which can be pixels, points, or percentages. The speaker discusses the importance of gutters, which provide white space and consistent spacing between content areas. The paragraph also touches on the concept of multiples, where all grid measurements should be divisible by the base grid unit for consistency. The speaker provides examples of how different grid sizes can affect the organization and density of information presented in a UI.

📏 The Importance of Consistent Grid Application

In this final paragraph, the speaker wraps up the discussion by emphasizing the importance of applying grids consistently in UI design. The speaker highlights how consistent grid application leads to a well-ordered and clean interface, and how small details in spacing can significantly impact the organization and feel of the design. The paragraph reinforces the importance of attending to spacing within elements and the overall page layout during the wireframing process. The speaker concludes by reminding designers to always apply Gestalt principles and grids to their layouts to achieve a coherent and professional design.

Keywords

💡User Interface (UI)

User Interface, often abbreviated as UI, refers to the space where interactions between users and a company's products or services occur. It is the point of interaction between the user and the digital world, encompassing the screens and websites that one engages with regularly. In the context of the video, UI is the tangible output of the designer's work to create flows and define the underlying structure of an app or website, based on the understanding of the users and the app's purpose.

💡User Experience (UX) Designer

A User Experience (UX) Designer is a professional responsible for the overall user experience and aesthetics of a product. This role involves ensuring that the user's interaction with the product is seamless, efficient, and enjoyable. The video emphasizes that UX designers are tasked with creating interfaces that are not only beautiful but also usable, highlighting the importance of understanding the user's needs and translating them into functional design elements.

💡Visual Design

Visual Design is the aesthetic aspect of the user interface that enhances the usability and appeal of a product. It involves the use of color, typography, imagery, and layout to create a cohesive look and feel. The video discusses how visual design reinforces brand identity and improves the perceived beauty of a product, which in turn influences user engagement and preference.

💡Brand Reinforcement

Brand Reinforcement in the context of the video refers to the process of integrating a brand's identity into the user interface design. This can include the use of specific colors, animations, illustrations, iconography, and tone of voice that are consistent with the brand's ethos. The video script mentions that the brand permeates various UI elements, establishing an emotional connection and reinforcing the relationship with the users.

💡Gestalt Principles

Gestalt Principles are psychological concepts that help in organizing information in a way that the human brain can easily perceive and understand. The video script delves into these principles, particularly 'proximity' and 'similarity,' explaining how they can be applied to UI design to create visual clarity and guide the user's perception of the relationships between different elements on a page.

💡Proximity

The Proximity principle from Gestalt psychology is the idea that objects which are close to each other are perceived as more related than objects that are further apart. In the video, this principle is used to illustrate how layout design can affect the user's understanding of the relationship between different pieces of information, such as organizing a list of candidates for a job application.

💡Similarity

Similarity is another key Gestalt principle that suggests that the human brain groups together elements that are similar in appearance. The video script uses this principle to explain how the use of similar shapes or colors can create a secondary level of organization in a UI, helping users to differentiate and understand the information hierarchy more effectively.

💡Visual Hierarchy

Visual Hierarchy is a design principle that guides the eye through different design elements in an order of importance. It is crucial for effective communication of information and can be achieved through variations in scale, color, spacing, and placement. The video emphasizes the importance of establishing a clear visual hierarchy in UI design to ensure that users can quickly identify and understand the most important information.

💡Information Density

Information Density refers to the amount of content or information presented on a page or screen. The video script discusses how grids can dictate the information density in UI design, explaining that a finer-grained grid is necessary for pages with a lot of information to ensure that the content is well-organized and not overwhelming to the user.

💡Grid Systems

Grid Systems are the structural framework of a page layout, consisting of rows and columns that define the arrangement of content. The video script explains how grids contribute to the organization and consistency of a UI design, allowing for a coherent structure that enhances the user's experience by providing a predictable and ordered layout.

💡Affordances

Affordances in UI design refer to the visual cues that suggest how an interface element can be interacted with. The video script mentions that visual design helps with affordances, providing users with subtle clues on how to navigate and use the interface elements based on their design, such as the appearance of buttons indicating they can be pressed.

Highlights

Introduction to visual principles behind user interface design and their importance in creating usable and aesthetically pleasing interfaces.

The role of user experience (UX) designers in managing the entire user experience, with a focus on the visual aspects of user interfaces.

Visual design's role in reinforcing existing brand identity or developing a new one that aligns with the project's approach.

The impact of brand reinforcement on user interfaces through elements like color, animation, and iconography.

The significance of aesthetic appeal in enhancing the usability of a product, as perceived beauty can increase user engagement.

The use of Instagram's redesign as a case study to illustrate the impact of visual hierarchy and cleanliness on user experience.

Explanation of how visual design can guide users through an interface by providing subtle clues and using principles of perception.

Introduction to the concept of affordances in design and how they help users understand the functionality of elements based on their appearance.

Overview of Gestalt principles in user interface design and their psychological basis for organizing information.

Discussion on the proximity principle and its application in designing layouts to indicate relationships between close objects.

The similarity principle's role in grouping similar objects together to enhance the clarity of information presentation.

The importance of establishing a clear visual hierarchy in user interfaces to guide the user's attention to important information.

Techniques for creating a visual hierarchy through scale, value, color, spacing, and placement.

The use of grids in user interface design to organize information density and ensure a coherent structure.

Explanation of how grid systems work, including the importance of gutters, columns, and consistent spacing.

The significance of using multiples in grid systems for maintaining consistency and flexibility in layout design.

Practical examples demonstrating the impact of grid sizes on form field design and the importance of consistent spacing.

Emphasis on the importance of attention to detail in wireframing, including spacing and layout, to achieve a clean and organized interface.

Conclusion summarizing the importance of Gestalt principles, visual hierarchy, and grid systems in creating effective user interfaces.

Transcripts

hi and welcome back to interactive design  apps um today we'll be looking at the visual  

principles behind user interface design when most  people think about user experience they typically  

think of the user interface these are the screens  that you interact with and the websites that you  

use on a daily basis now as designers um it's our  task to create beautiful and usable interfaces to  

ensure that our users both want to use our product  and understand how in this pod i'll introduce  

you to some of the common techniques used for  information layout provide detail on how visual  

design enhances usability and demonstrate how  how to establish a strong page hierarchy in your  

designs we'll explore interface design and how  visual design can create consistent experiences  

for users so let's get going on that okay so  user experience designers or ux designers are  

responsible for the entire user experience and  aesthetics and visual design an important part  

of that the user interface or ui is typically  what people think of when they think of ux design  

the user interface is the output of the work that  you as a designer will do to create the right  

flows and define the underlying structure based on  the understanding that we have both of our users  

and as and of our app as a tool the role of  visual design and user interface design is to  

first reinforce any existing brand or for  your projects to develop one that matches  

your approach in both the experience  or feel as well as the aesthetics

brand reinforcement so the brand application for  user interfaces can include things like color  

animation illustration imagery iconography  what else i got their tone of voice so for  

example when we're looking at different user  interfaces you can see how the brand permeates  

through these various elements the brand is  the emotional connection established with users  

and reinforces the relationships and all the  touch points for your design it's across all the  

products which i mean is across all the products  for your company or project design design systems  

will often have branded elements baked into  the components so if you work with design  

systems the brand will already be represented  in your future career for your projects however  

you will need to consider your branding  through the development of your style  

guide for your assessment 2 project and again pay  attention to all of the visual elements for this  

as we know the visual design enhances the  aesthetic appeal and the aesthetic appeal  

refers you know i'm referring to the perceived  beauty of a product of course it's you know really  

subjective but if the design is perceived to be  more beautiful people will in fact want to use it  

okay so just by taking a look at let's you  know look at an example just by taking a  

look at these two versions of instagram have a  think about which one you would prefer to use  

um it's most likely the one on the right because  it's more because it's easier to scan and read  

the photographs the hero and the page it's not  framed by any unnecessarily scary color bands  

or it's not distracting from them in the  visual hierarchy in this design redesign  

instagram cleaned up its user interface with a  fairly fairly sizable overhaul including the logo  

the app is stripped out of color in favor of the  black and white display it allows for users to  

focus more on the images in the feed and not draw  the eye elsewhere the updated logo does the exact  

opposite in fact the brand opted for a  very vibrant icon and you can see the pink  

to purple kind of gradation there as well as the  aesthetic spiritual design enhances usability in  

a few different ways iconography for example  can help provide some quick guidance on how  

to use a tool hierarchy and layout which we're  going to go through today help us determine the  

prioritization of information so what are you  prioritizing readability and scannability helps  

keep the information organized and legible  the visual interface helps to guide the user  

to understand how to navigate the experience  and provide subtle clues using principles of  

perception to communicate how elements on the page  are related to each other so visual design also  

helps us with affordances or how we understand  how to use something based on its design  

okay let's just have a little  look at affordances for a moment

here i've got um for example some buttons on the  user interface representing the pressing of real  

life buttons that's what i mean by affordances  here we can see a transition and you can see that  

from actual buttons through to an abstraction also  the difference between a skeuomorphic approach  

flat design and neuromorphic approaches at the  bottom there and this neomorphic approach makes  

everything feel a little bit like thin plastic  so it has some sort of tangible chorally in the  

real world visual design is an important part of  the user experience and aids and enhancing our  

usability reinforcing your brand and providing  visual and aesthetic appeal so let's move on

okay we're going to move to a gestalt period  principles which you may or may not have heard of  

when designing a user interface we rely on gestalt  principles which is a form of psychology to help  

us organize information they help us bestow  principles help us understand how the information  

is actually perceived these basic principles are  valuable when thinking about which information you  

want to highlight and showcase in its simplest  terms gestalt theory is based on the idea  

that the human brain will attempt to simplify and  organize complex images or designs that consist of  

many elements and you do this by subconsciously  arranging the parts into an organized system  

that re that creates a whole rather than just  some sort of series of disparate elements our  

brains are built to see structure and patterns in  order for us to better understand the environment  

we're living in so we are definitely a pattern  recognition animal so what does that mean for you  

so if we take two of these that we most most  impact user interface design i would say are the  

idea of proximity and similarity um let's focus  on them and let's see how this proximity principle  

highlights how we perceive relationships with you  know with objects that are close to each other  

and let's take a basic layout as an example of  this so here we go just some dots to show you this  

it reminds us that we construct relationships  between objects that are close to each other  

so if we look at those three things in  your mind you can see that they're you  

know you'll you will develop some theory about  the relationships based on their proximity or

relationship to them to each other okay it's  just using a series of dots let's let's put  

this through its paces with uh this idea of  candidates that have applied for a job so what  

does that mean for what does castle proximity  tell us to do for the design here so in this in  

this example the layouts uniform you can see those  three columns at a glance it looks like all the  

information appears to be equal of equal weight  and it seems to be the same type of information  

the proximity sort of tells us that when we add  more detail and keep the same layout it looks  

like candidate information and let's look here but  the right hand column i'm just filling it out here

sorry just filling out this  with the actual information  

the right hand column looks like the  same sort of information but in fact

but they're in fact the right  hand column are business names  

i'm not sure that you can see that but we've  got names of people or individuals and then the  

third column has business names but it looks  like it's all equal information at the moment  

okay so gestalt tells us something about  proximities so if we move that third column  

away from the cluster of the first two it looks  like the candidate this can be on the left and  

the right column looks like it's going to  be something different it makes it clearer  

that the second column is conveying different  information just by adding that white space

okay

so when we add the information back in it's a  bit clearer that the information on the right  

is different it looks similar still we could  read it as a mistake or we could read it as  

similar information so as i'm going through this  keep in the back of your mind the importance of  

wireframes and getting these principles right  before designing anything else and i will  

talk about that a lot in this this subject so  to further redefine this refine this design  

let's let's apply the similarity principle or  you can think about it and it which refers to  

the perception of seeing similarities as  a grouping mechanism so let's move to that  

and we'll keep running with this idea so the  percep in this case we're going to naturally  

want to group the circles of the same color  so if we look there with the orange and green  

our perception of relationships between objects  that are similar to each other okay so next slide

okay so in this example we're using  the same candidate list we can see that  

icons added next to each candidate creates another  grouping mechanism that they're color-coded is  

great as well the candidates can be grouped  by shape either circles squares or triangles  

so we can see you know we've still got the  candidates happening but we're having a  

second hierarchy of organization based on gestalt  principles so let's see that with the actual names  

so the icons could include indicate the  status of the candidate in the hiring  

process for example so i can see that  you know circle squares and triangles  

it adds another layer of meaning to the  information being presented in those columns

okay so this is the similarity principle so when  we change the circle on the left hand co column  

on the right hand column to a square we now  are starting to be convinced that the things  

on the right are related to each other in that  column and are dissimilar to the first two  

columns so this is a very simple example of the  similarity principle at work and how we group the  

information is based on our unique use cases but  you can see how just two gestalt principles that  

similarity and proximity help us create some  sort of visual clarity on how the information  

relates to each other just in this simple three  column list so when you're developing your next  

app screen design and layout think about how you  can use these two principles to your advantage

okay so let's move on now to user  information our user interface and hierarchy  

so when we're designing a user interface we need  to establish what information is most important  

to the user and we design the layout accordingly  priority is communicated through designing with  

this sort of clear hierarchy typically the  most important information is at the top  

which is the first that we want the user to see  and read it's not always the case so a layout with  

a good visual hierarchy can be understood by your  users and the principle of visual hierarchy refers  

to guiding the eye on the page so it attends  to different design elements in their order of  

importance not necessarily appearance importance  it can be implemented through variations in scale  

value color spacing placement and some  other signals visual hierarchy controls  

the delivery of an experience if you've got a  hard time figuring out where to look on a page  

it's most likely that the layout is missing a  very clear visual hierarchy to create a clear  

visual hierarchy i would say using two to  three typeface sizes to indicate to users  

what pieces of content are most important or  at the highest level on the page provide a bit  

of a mini information architecture or consider  using bright colors or important items with muted  

colors for less important ones scale can also  help define a visual hierarchy so incorporate  

various scales for different design elements a  general rule of thumb is to include small medium  

and large components in the design so people  can work out which is which in the hierarchy  

so in this example we're just looking at here  for scooters you can see the page hierarchy is  

very clear both in the ordering of the information  and the size and the color of the blocks  

headings establish the hierarchy to use for the  separate sections of this this uh app page and  

typically the larger fonts are at the top of  the page we can see the 72 kilometers there  

is one of the more important pieces of information  um and the smaller in size you know as you go down  

and i'm showing you this as an  example of how blocks and color  

can help create that hierarchy and create more  organization for this scooter operation app  

there's a hierarchy and again in this example here  

we can see again this idea of blocking to give  hierarchy to information on a page as well  

so if we just look at these two versions  of instagram you can think about which  

one you'd prefer to use or um you know which  one you'd find easy to understand at a glance  

it's most likely this right one because it looks  more easy it looks more organized and it's easier  

to scan and to read the photograph becomes the  hero on the page it's not you know it's not  

unframed by anything or distracted by them so you  can see that instagram has cleaned up their user  

interface with quite a big overhaul um include you  know and we can kind of see the difference there  

in what they've done we can see also  that the follow has become a button  

message and follower two calls  to action that you can do  

and the share button or on in the first one has  now become an icon for sharing which is something  

that we all understand and if you think about  the hierarchy of options being offered to us  

following and share things within the following  and message of things within this page and then  

sharing goes out so they're treated differently in  the first one you can see message view and share

they're all treated equally but they're kind of  different functions so you can see the visual  

hierarchy and the use of those buttons and  icons has helped clear up that user interface  

issues for this particular page

give you a moment to look at that um you  can also see color has helped with that 1.2  

1.5 000 followers and we've got the  main information in the middle there

okay let's move on to grids and density  and i know some of you know about this  

already but let's just go through them to get  a common understanding of them grids allow for  

organization in our user interface design  and they dictate the information density  

we could probably have seen the grids behind  the instagram option before and the scooter  

app but grids make up the basic layout of  the pages in your app and they relate to  

the overall structure and navigation you  know of the experience through your app  

it's my grids are always made up of squares with  units of measures that can be pixels points or  

percentages depending on how you're designing it  and what framework but the the unit of measure  

measure for the grid will be defined by  how dense the information is on the page  

so if you've got a page with lots of information  on it you'll need to have a finer grained grid

okay so again on grids we can see [Music]  we've got the basic square that makes up  

the grid combined with columns that separate the  content from each other with spacing in between  

called the gutter and you can see here  i've highlighted it green the gutter gives  

us white space and should be consistent spacing  between content areas we can see that grid there  

in operation okay let's look at an example with  a grid here we go with it you can probably guess  

what the grid's going to look like for this you  can see i've overlaid the grid there to give  

back home this idea that this page has an  underlying grid and quite a coherent structure

okay in terms of grids the number of columns  are based on each unit which is a grid square  

and we can see the grid there bit of graph paper  whoops sorry and each square is based on a unit  

of measure it doesn't really matter what that  unit of measurement is as long as you're going  

to be consistent with it and we can see here  that it establishes an order and consistency

now i guess most people say that you're  in this particular grid structure that the  

spacing's going to be no less than eight pixels  between elements with an eighth grade eight  

pixel square grid but we can have 24 columns and  a 24 pixel gutter between each column because they  

are in a multiple of age so let's just move on  to this idea of multiples we can see here when  

setting up a grid we want all of the numbers  in this case to be divisible by the base  

grid unit um and this mathematical prints you know  consistency allows us to assess space in between  

objects on this bay on the page and flexibility  and how we define it or define those spaces the  

unit that you select will depend on how dense you  need your layout to be typically the smallest unit  

is probably four pixels which means the minimum  amount of spacing is four pixels between objects

but four pixels is quite small even for app design  so i would imagine most of you would be at least  

going for a 12 pixel break between information or  maybe eight of its text blocks okay so be aware  

of when you're doing a grid what your numbers are  okay let's have a look at that in action here's  

an example where how a form field might look  in each of these different grid sizes from 4  

8 and 16 so you can see there's lots of options  to explore and options with the gutter sizes  

and the gaps in between elements um and the  multiples of that so what i'm trying to bang  

home now with this idea of grids and information  density is that you want these numbers to be  

consistent and divisible by the same base number  that you you have decided on when you're designing  

okay so we wouldn't have for example a nine  pixel break in between things because it's  

not part of our grid system um by using a  grid you're going to get everything to look  

like it's very well ordered and nicely designed  because let's have a couple more examples here  

the small details make a really big difference  in how organized and clean the interface feels  

we can see this 24 pixel spacing happening here  we can see the difference if we did a 24 to a 32

and

the other thing that i wanted you to note  when you're looking at these is that the  

padding within an object is also important so we  might have these objects on a grid but if we see  

each element within one of those objects within  the grid i'm not trying to go to doctor who on you  

you can see that the spacing is on each side is  eight pixels um for consistency it's eight pixels  

down to the text to start and x pixels instead you  know this idea of a gutter to start so not only  

is the spacing in the grid of the entire page  of your app going to be based on some sort of  

rules that you've applied in terms of the grid  but also the spacing within each of the element  

um so when you're doing your wireframes i want  you to be attentive to this spacing that's the  

moment when you're doing your wireframes to kind  of get that layout right before you put any text  

or put your images in whatever you need to have in  there it'll get us very close doing a wireframe in  

this very pedantic way will get us very close  to a final product if you set it up correctly  

our human eyes will notice very quickly if your  grid is out or you're not applying it consistently

right so back to gestalt principles we've done  proximity we've done similarity so hopefully  

now whenever you look at an interface or  you look at a screen design of any sort  

you'll know that there's a logic behind the  spacing of objects and we saw the proximity  

principle in action using gestalt premise  principles now let's flip back to visual hierarchy  

we can see that today we've looked at the  information hierarchy and you can see that  

blocking using the grid behind that and using  scale and color uh ways and order are ways that  

we can get a coherent information hierarchy so  people are led to the important parts of the page  

first and the last thing we've just covered  today is grids and information density  

so hopefully that gives you something to go  on do pay attention to your gestalt principles  

of proximity you know when your columns and  similarities so we saw that with the shapes  

and the circles and the triangles and you know  trying to differentiate information as a second  

level there and the last thing here we can  see let's always apply a grid to our layouts  

when we're designing so that i'll keep this short  thanks for listening and i will see you in class