designing for web
typography
"the craft of endowing human language with a durable visual form."
triadic
(a triangle where all three sides are the same length) on the color wheel, and select the three colors at the points of the triangle
good navigation contains following principles...
-Concise -Clear -Selective -Context -Interactive -Consistent
On Page SEO should appear in 7 essential places
-Page Title -URL -Headings -Text -Link text -Image Alt Text - Page Descriptions
Guide to keywords
-Research -Compare competition -Refine -Map (3-5 keywords per page)
6 key steps to identify keywords and phrases
1. Brainstorm 2. Organize- group keywords 3. Research- Use tools to suggest additional words 4. Compare- Check the competition 5. Refine- where will you focus 6. Map- 3-5 keywords per page
Content Inventory List
A list of all the content layed out on site.
Focal Point
Different or unique element will gain more prominence.
4 cre principles of gestalt theory
Emergence, Reification, Multistability, Invariance
Benefits of social media integration (4)
Enables you to stay ahead in time: The feature allows you to stay ahead in time and schedule all the posts beforehand as per convenience.
Monospaced
Every character in a monospaced font takes up the same width
Who is the Site For?
Every website should be designed for the target audience
10 things to know about responsive design: 3
Everything is flexible: Sometimes the best options for different browser sizes include changes to, additions to, or subtractions from your original concept. Images and content may be hidden to create a better experience for smaller devices.
Ways to create emphasis
Dramatic color changes Dramatic size changes Typographic emphasis Dramatic whitespace
Contrasting background and text
For long passages of text, use dark type on a light background — preferably dark grey on light grey.
10 things to know about responsive design: 4
Good responsive design starts with a grid: Creates proportion
Primary colors
Humans perceive three base colors: magenta, cyan, and yellow. Every other color we see consists of a combination of these three colors in varying amounts, brightnesses, tints, and shades
10 things to know about responsive design: 5
Image size and quality is important: Strike a balance between quality and load time
Temperature
Increasing an image's temperature means increasing its orange levels
Information Architecture
It is the process of clarifying your communication goals and arranging your content into a design that serves those goals. ex. an outline for a report
Focal Point
Points of interest, emphasis, or difference capture and holdour attention
RGB and hex
RGB color system defines all colors as a combination of three different values: a particular shade of red, another of green, and another of blue
Hierarchal Web
Same structure as top down hierarchy but provides access to skip around topics AND return to homepage.
Similarity
Similar looking elements will be perceived as a whole
design navigation
Site navigation not only helps people find where they want to go, but also helps them understand what your site is about and how it is organized.
How Of ten People Will Visit Your Site
Some information (such as news) may be constantly changing, while other content remains relatively static.
Backups
Some only create backups so that they can restore your website in the event of a server breaking.
visual contrast
Items with higher contrast are recognized and processed first.
When to use serif font
Lean towards sans serif fonts for your body text to maximize legibility, and consider using serifs for headings and shorter content.
Right tool for job
Multimedia Tools, Online Publishing Tools, Document Software, Presentation Software
10 things to know about responsive design: 9
Navigation is key: Users must be able to quickly understand how to use a site for it to be effective.
Off- Page Techniques
Number of other sites that link to yours. Interested in sites with related content. Look at words between opening and closing tag.
Law of Pragnanz
People interpret ambiguous or complex images as thesimplest form(s) possible. It means that you canplay with creating complex arrangements of simple shapes,so long as they come together to form an easily understoodwhole
Figure/ Ground
People see objects as either figure (the focal point) or ground(background). whatever its color, we always see thesmaller rectangle as the figure, the larger as the background.
Hot and cold
Warm colors contain higher amounts of reds and yellows. Cool colors contain higher amounts of blue, evoking chilly climates, ice, winter, water, nighttime, death, and sadness.
Orange
Warm, but less aggressive than red, orange is hard to miss — which explains its use in construction, safety, and hunting equipment.
Past experiences
We perceive things in terms of our past experiences.
Uniform Connectedness
We see elements that are visually connected as more related than elements with no connection
Common Fate- Synchrony
We see elements that move in the same direction as morerelated than elements that are stationary or move indifferent directions.
Parallelism
We see parallel elements as more related than non-parallel elements.
Multistability
When we know that something could be one thing or another item, it is difficult for us to see both at the same time. Our perception 'flips' between one 'stable' image and the other. you can use multistability to make really memorable andpleasantly surprising designs,
Date Selector
When you log in, this is usually set to the last month, but you can change it to report on a specific time period.
Advanced Features
You can also set up goals where you specify the paths you want people to take, and then see how far they get through those paths, which is especially useful when gathering data from users.
Common Regions
You see elements as part of a group if they're enclosed within the same region
user testing'
You wouldn't know if you wouldn't check. ask 5-10 people to try. Agile testing (anticipates need for flexibility)
border
a line drawn around a group to show they are related.
Output
allowing the system to indicate the effects of the users' manipulation
input
allowing the users to manipulate a system (i.e using it
Export
allows you to export the statistics on this page for other applications such as Excel.
floating elements
allows you to take element out of normal flow and position it to far left or right of containing box
Bandwidth
amount of data the hosting company will send to your site's visitors
Why People Visit YOUR Website
Specific motivation.
The flowchart
an outline presented as a box diagram, with lines that show the access routes among its parts. -follow specification of a project's topic categories, levels, and links.
Emergence
The principle of emergence states that we attempt to makesense of the whole before we start identifying its parts. principle of emergence suggeststhat we should stick to familiar, easily recognizable patterns.Reificat
Page Views
The total number of pages al visitors have viewed on your site.
Serif
The undisputed king of printed content
Sans Serif
They've become the standard for the web because early computer screens had a hard time rendering serifs crisply
color
background color placed behind related items to emphasize a connection.
font
Trust your eye, and match the tone to the content.
10 things to know about responsive design: 6
Type must be responsive: To maintain readability, type should be optimized based on screen width
Emphasize with text
Use highlighting or boldface
Monochrome
consists of various tints, shades, and saturations of a single base color
Legibility
how easy it is to distinguish between individual letterforms (the shapes of the letters)
Readability
how easy it is to read paragraph content. It's determined by the font's design and your own design choices, including sizing, spacing, and color.
SEO further considers
how many sites link to you (and how relevant those links are)
UI provides mean of....
input and output
list the design principles
contrast, alignment, simplicity, proximity, emphasis, emphasis by isolation, emphasis with text, repetition
The hex color system
converts each value to a hexadecimal (base 16) representation, Every two characters represents a color value, #3b599b equals blue
Green
conveys a sense of growth and health, making it perfect for organic, environmentally friendly, and healthy products
proximity
items close together, perceived as more related
What Your Visitors are Trying to Achieve
key tasks and motivations
Complementary
two colors from opposite sides of the color wheel.
What is site about?
understand the audience your site may attract and what information they will expect to find on it
continuance
when elements are placed in line or curve they are perceived more related.
closure
when faced with complicated pattern, we tend to look for single pattern or form. Closure is basically what makes all minimal logos work.
DOMAIN NAMES
your web address (e.g. google.com or bbc. co.uk)
css framework
makes your life easier by providing a code for common tasks
Tone
mood or feeling that your typography conveys visually
screen resolution
number of dots a screen shows per inch
UI (user interface)
people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components.
layout grid
placement or arrangement of visual elements
white space
placing related items close together and leave bigger gap between unrelated items.
fixed positioning
positions element in relation to browser window
absolute positioning
positions element is relation to containing element
Search engine optimization (or SEO)
practice of trying to help your site appear nearer the top of search engine results when people look for the topics that your website covers
Yellow
represents the sun, warmth, and summertime.
building block
start on new line and act as the building block of any element
Reification
states that our minds fill in gaps invisual information in order to identify objects. Reification means that you don't have to include all of anobject for it to be identifiable
Invariance
states that we're really good at recognizing similarities and differences. That means that it's really easy to make something stand out of a crowd ofsimilar objects. invariance can produce powerfulresults when one different element is introduced in anotherwise homogenous group of elements.
liquid layout
stretch and contract as user increases or decreases size of the browser
Cursive
tend to emphasize visual interest over legibility, making them better suited for titles and headings than body text
Headlines and subheading reflect
the hierarchy of information
Saturation
the intensity of a color
On-page techniques are
the methods you can use on your web pages to improve their rating in search engines. -Include key words in the text and HTML code. -Images should further have key words in alt text.
Laws of Pragnanz
the most general gestalt principle, which states that the simplest organization, requiring the least cognitive effort, will emerge as the figure
Visual Hierarchy
the order in which your eyes perceive what they see.
Lightness
the perceived brightness of a color compared to pure white.
social media integration
the syncing of all social media profiles on different social media platforms so as to further sync their functionality with the business's website.
Font weigh
the thickness (or boldness) of each individual letter.
Disk space
the total size of all of the files that make up your site (all of the HTML and CSS files, images and scripts).
Web server
special computers that are constantly connected to the Internet
What Information Your Visitors Need
what information they need in order to achieve their goals quickly and effectively
Top Down Hierarchy
Access provided from central access point down to each principal topic area.
Target Audience
5-10 people who are exact match for product. Make questions to find out what the consumer wants in product. Audience research
Organization- Categories may emerge on the basis of
-Theme or topic -Size or Scale -Geographic Location -Historical Sequence -Narrative Sequence
10 thumb rules of hierarchy
-Visibility of system status: (letting user know what's going on) -Match between system and the real world (be familiar to user) -User control and freedom -Consistency and standards - Error Prevention -Recognition rather than recall: they shouldn't need to use memory - Flexibility: caters to experienced and inexperienced -Aesthetic/ Minimal -Recover from Errors -Provide documented help
Looking at interactive design as a process accomplishes two things:
-helps visualize framework -reaks down complex interactive projects into a set of tangible tasks and issues.
In interactive project, these are two basic choices
-medium of delivery -the authoring tool.
UX requirements
-meet the exact needs of the customer -a seamless merging of the services of multiple disciplines -simplicity and elegance that produce products that are a joy to own, a joy to use
3 steps of interactive design process
1. Information Architecture - What is product? 2. Interaction Design- How should it work? 3. Presentation Design- How should it look?
Color Wheel
A basic color wheel contains the 12 standard colors used to create color schemes
Efficient website allows user how many clicks to find what they are looking for....
3-4 clicks
line length
45-60. reader shouldn't have to get tired of long line or bouncing between so many lines
Tints and shades
A tint results from adding white to a color — a shade when you add black
Emphasis
Attract attention to design through use of focal point.
Benefits of social media integration (2)
Boosts brands credibility: it further ensures that real interactions relating to the respective brands take place on a wider level
fixed width layout
do not change size as the user increases/ decreases size of browser window
3 Key components of visual hierarchy
Color, Size and Style
Get message across using these 6 design principles
Content, Prioritizing, Organizing, Visual Hierarchy, Grouping, Similarity
Three things that drive design of flowchart
Content: Organization and structure Usability: access routes Simplicity: Clear and focused
Repetition
Create consistency to tie together the whole
Goals
Design cannot not have goals. Drive design and help decide what product should accomplish. Start by writing down goals and assumptions about product.
Display
Due to their attention-grabbing impact, they're best used in headlines
Common Fate
Elements moving together tend to be perceived as unified group.
grouping/ similarity
Grouping related pieces of information together can make a design easier to comprehend.
Structure consists of
Headline, text, image, subheading
Benefits of social media integration (1)
Helps organize social media platforms: However, with the help of social media integration, all these social media accounts can be organized in a much better way thus facilitating an easy sharing, publishing and scheduling of posts.
Benefits of social media integration (5)
Helps plan next business campaigns effectively: Social media provides data. This data can help predict the customer's buying decisions and plan the next marketing campaigns accordingly.
Emphasis by Location
Isolate object you want to stand out.
Benefits of social media integration (3)
Makes it easy to interact with consumers: It enables you to receive notifications and interactions from each network all through a single channel.
10 things to know about responsive design: 8
Media queries don't have to be intimidating: Media queries can help determine the capabilities of different devices and deliver different styles to them via CSS
Medium of Delivery
Private or public
Raw Materials
Resources, budget, and schedule
10 things to know about responsive design: 7
Responsive design is good for SEO: The single responsive page can collect analytics regardless of the user's device.
10 things to know about responsive design: 1
Responsive design is more than a trend: Our collective use of a variety of devices is unlikely to change
10 things to know about responsive design: 2
Responsive design is not mobile design: The best responsive sites can be viewed as intended on desktops at a variety of resolutions
10 things to know about responsive design: 10
Responsive design will evolve: As technology and user habits change and new devices hit the market, practices for how the web is used and developed will adjust.
social media integration
Synchronizing media profiles
At the heart of SEO is the idea of working out which
Terms people are likely to use
Purple
That association remains strong all these centuries later, making purple an ideal hue for luxury brands.
Symmetry and Order
That's why symmetry is so satisfying to us: it's a simple, harmonious rulethat conveys a sense of order and rightness in things.
Average Time on Site
The average amount of time each user has spent on the site per visit.
Pages per Visit
The average number of pages each visitor has looked at on your site per visit.
Landing Pages
These are the pages that people arrive on when first visiting your site
Visits
This is the number of times people have come to your site.
Bounce Rate
This shows the number of people who left on the same page that they arrived on. 5 aspects: Clicked a link to another site Clicked on an advertisement Entered a new URL Used the "back" button Closed the browser
Referrers
This shows the sites that have linked to you and the number of people who have come via those sites.
Search Terms
This shows the terms users entered into a search engine to find your site.
Direct
This shows which page a user arrived on if they did not come via a link on another site.
Top Exit Pages
This shows which pages people most commonly leave from
Pages
This tells you which pages your visitors are looking at the most and also which pages they are spending the most time on.
Red
This vibrant, aggressive color can convey a variety of meanings depending on context, but it does it all with power and flair.
Design Purpose
Understand audience and expectations and provide what they are looking for INSTANTLY. Influenced by location as well (is it noisy or silent).
ux
User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.
White
all about purity, innocence, and sterility.
Analytics
analyzing how they found it, what they were looking at and at what point they are leaving. google.com/ analytics
Site Maps
create a diagram of the pages that will be used to structure the site. show how those pages can be grouped. No more than 7-8 subsections
The test of every design decision
does this solution move the design closer to or further away from its goals?
proximity
elements close together are perceived as whole
normal flow
every element appears on new line, so each item appears lower down on the page
Blue
evokes the celestial, the tropical, and — oddly — the professional
inline box
flow between surrounding text
containing elements
if one block level sits inside another block level then the outer box containing them is the containing element.
Brown
implies dirtiness
Black
implies strength, luxury, evil, death, and the unknown.
line height
leading, vertical space between each line of text
tracking
letter spacing
ascenders and descenders
letters that go above or below the baseline
three types of spacing
line height, tracking, word spacing
Information Design Components
organization, planning, tools, audience, goals
relative
shifts element from where it would have been in normal flow to the right or left.
Wireframe
simple sketch of the key information that needs to go on each page of a site. shows hierarchy and how things should be spaced.
web
software used to access website
Hue
the degree to which a color can be described as similar to or different from red, orange, yellow, green, blue, indigo, and violet (the colors of the rainbow)
Analogous
three colors that sit next to each other on the color wheel.
Unique Visits
total number of people who have visited your site over the specified period.
File Transfer Protocol (or FTP)
transfer files across the Internet from your computer to the web server hosting your site.