Flashcards
Web Design Cards
Flashcards do conjunto (91)
- 1Four Fundamental Design Aspects- Harmony – How the elements on the website fit together
- Balance – Symmetrical arrangement of information
- Simplicity – Creates clarity, Sophistication elegance and economy
- Consistency – Promotes intuitive behavior – Inconsistency leads to overload - 2Sites that succeed- Easy to navigate
- Intuitive design
- Suited to their audience
- excellent use of a metaphor
- Unique or inspiring
- Achieve their purpose - 3Information Architecture- Information Architecture
o IA Process Cycle
Site Content
Content Inventory
o Structural Site Map
o Navigation - 4Design Phase1. Needs Analysis
2. Target Audience Analysis
3. Competitive Analysis - Competition
4. Information Gathering – Raw Data
5. Information Architecture – Interface Design - 5IA Process Cycle- Define:
o Goals
o User Experience
o Site content
o Site structure
- Design:
o The content
o The Visuals - 6Site Navigation- Global
- Primary
- Secondary
- Tertiary
- Local
- Footer
- In-Text
- Utility
- External Links - 7GlobalAvailable on every page of the website. This brings consistency to the pages.
- 8PrimaryAvailable at the top of every page and is clickable
Global - 9SecondaryRequires one click before reaching it
Can Be Global - 10TertiaryAnything that requires more than 2 steps to access
Global - 11LocalContained in one area
- 12FooterAt the bottom of the page in the footer
Generally is Global - 13In-TextWithin a paragraph such as a read more message
- 14UtilityThese are things like search boxes and social media links
- 15External LinksNavigation that leads to another website or away from the current website
- 16Above FoldWhat is seen immediately on the page
- 17Below FoldWhat you must scroll to see
- 185+2 RuleRecommends 3 - 7 Items
- 19Website ConsiderationsScreen Real Estate
Page Layout
Browser - 20Page LayoutResponsive
Fixed
Adaptive
Flexible
Mobile - 21ResponsiveThe sizes of the text and images will contain in the area given
- 22FixedContent remains fixed inside a container
- 23FlexibleChanges with width
- 24AdaptiveUse Breakpoints
- 25MobileUsing the m. display designed for smaller devices
- 26Home Page DesignGood First Impression
Don't use welcome messages
Establish:
- Identity
- Purpose - 27Content DesignHeader - Identify what the website is about
Navigation
Body
Footer
Logo - 28Visual DesignAttract Attention
Provide Guidance
Apply mind control
Rule of thirds
Grid Design - 29Visual Design ElementsComposition
Colors
Fonts
Images
When used correctly it enhances the content - 30Compositions PrinciplesBalance - Equal distribution
Contrast - Clearly separated
Focus - Focal Points
Harmony - Visually appearing
Motion - Flow
Simplicity - Minimal and clean
Space - White spaces - 31CompositionRule of thirds - 3 x 3 Grid
Patterns - 32MockupsFill in all the blacks of a wireframe
- 33ColoursThe mood is set by colours
Colours are attached to cultures
Design for global users
Use colour swatches - 34Colours UsesTarget Audience
Age
Gender
Culture - 35Colour SchemesMonochromatic
Analogous
Complementary
Triadic
Split complementary
Tetradic - 36MonochromaticBasically, just one color using different gradients
- 37AnalogousUsing one section of the colour wheel next to each other
- 38ComplementaryTo opposite sides of the colour wheel
- 39TriadicUsing three related colours
- 40Split ComplementaryUsing 3 colours which are complementary to eachother
- 41Tetradic4 Colours basically using dual color schemes
- 42TypographyA typeface is a specific, named design of a set of printed characters
Font – A complete character set with size and weight - 43Font HierarchyGeneral guide – Use 2 to 3 typefaces per website
One for headings
One for subheadings
One for content - 44BaselineUnder the text
- 45ProportionalAll letters take a different space and are generally closer together
- 46MonospacedEach letter takes up the same space
- 47DescenderGoes under the base line
- 48X heightThe height of X
- 49AscenderA character that goes above the X
- 50CSSExternal - Stylesheet is not with the HTML - Last Priority
Embedded - Using style tags - Second Priority
Inline - Included with the HTML - 1st Priority - 51Opening / Closing TagsOpening Tag:
Closing Tag - 52ContentBetween the opening and closing tags
- 53AttributeIn the opening tag
a Class is an attribute - 54SelectorHTML Element (H1)
The class defined by the developer
ID defined - 55PropertyColour
Text-align - 56Valueblue
center - 57Declarationusing a property and value
- 58Semantic TagsHeader
Nav
Section
Article
Aside
Footer - 59CSS3 FeaturesTransitions
Shadows
Rounded Corners
Opacity
Gradients - 60Writing for the web tipsUse text chunking
Keep text short
Make content easily scannable
Use links
Headlines - 61Inverted pyramid1. Essential Information (titles)
2. Additional Information (Subtitles)
3. Least important information (Quotes, Links) - 62Plain LanguageOrganizing information in a way that makes sense to a reader
- 63Plain language usesInverted Pyramid
Short simple sentences
Short paragraphs
Use humor with caution
Avoid the use of puns
Learn to write blurbs - 64Plain Language CriteriaEffective – Does the reader understand
Efficient – Can the reader understand the message after a single viewing - 65Web AccessibilityDisabilities
Visual, Aural or Physical
Age - 66WCAG PrinciplesPerceivable
Operable
Understandable
Robust - 67Search Engine OptimizationSEO
Helps search engines find your site
Get #1 listing
Spider programs
Ranking - 68Crawler-Based Search EnginesSpiders
Crawl through web pages
Starting on websites and servers with heavy traffic
Expand out through the web following - 692 Main stages of the creation of a websiteDesign
Development - 70DesignWhat is the site
How should it work
How should it look - 71How to minimize slow loadingKeep page length short
Only relevant content
Consistent page size - 72SketchesPlacement
What is the purpose
Navigation - 73WireframesThe information of placement
Font
Labels
Colour
Etc. - 74Principles for good visual designPurpose of the website
Target Audience
What content the audience wants
KNow how to apply the rules of good visual design - 75Golden RatioPatterns or repeating ratios
Naturally, occur - 76Rule of thirdsTop left is the most focus
- 77Static ImageOn the outside, looking at
- 78Dynamic ImageDrawn in
- 79Serif Sans SerifSerif - Decorative Tips
Sans Serif - No Decoration - 80Float and ClearHow elements wrap around one another
- 81HTML5 Media Elements
- 82Character EncodingUTF-8
- 83@mediaA tag used for breakpoints
Depends on the device
@media (max width)
etc. - 84Needs AnalysisEstablish the need for the website/product
- 85Target Audience AnalysisDetermine the user of the website
- 86Competitive AnalysisFind out what your competition is doing
- 87Information GatheringCollecting raw data
- 88Information ArchitectureMethods and processes that plan how the information is going to be presented
- 89Disadvantages of using HTML formattingThings can be overridden that you didn't want to be
You will have to apply it to every element
Pseudo-elements cannot be customized (Hover, active, link color)
Slow loading time
Lower page ranking
Makes it difficult for future programmers of the website - 90Advantages of External CSSFull control of page structure
Reduce file size
Less load time
Higher page ranking - 91When to use inline or embeddedTesting
If you must override one element
Must be used for HTML email clients
Mockup Design
Informações
- Descrição
- FlashCards sobre Web Design Cards, criado por Ash Z em 21-06-2019.
- Criado por
- Ash Z · jun 2019
- Atualizado
- 23 jun 2019
- Visualizações
- 3
- Avaliação