liveBookmanning.com

What you will learn in Design for Developers

by Stephanie Stimac

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• researchUser research is the systematic study of users, their needs, behaviors, and responses to inform product decisions.
• user experienceThe overall quality of a person's interaction with a website or web application, including usability, responsiveness, and emotional impact.
• wireframeThe practice of representing an interface with simplified structural layouts before detailed visual design.
• color paletteA color palette, or color scheme, is a selected set of colors intended to be used together in a visual design.
• layoutA layout is the spatial arrangement of content and interface elements within a page or screen.
• CSS GridA grid system is a system of rows, columns, margins, and gaps that structures the alignment and placement of interface elements.
• white spaceWhitespace is the unoccupied visual space separating or surrounding elements in a design.
• animationThe use of changing visual states over time to communicate movement, activity, or interaction in an interface.
• fontA particular digital implementation or style of a typeface, often defined by weight, size, or other attributes.
• user testingUser testing is the evaluation of a product or design by observing representative users perform tasks and collecting their responses.
• typographyThe design and arrangement of written characters to support readability and visual expression.
• contrastColor contrast is the perceptual difference between colors that affects the separation, visibility, and readability of interface elements.
• code readabilityReadability is the degree to which written content can be visually perceived and understood with ease.
• quantitative dataQuantitative data is numerical information that can be summarized or analyzed using counts, measurements, or statistics.
• qualitative dataQualitative data consists of descriptive, non-numeric information about people’s attitudes, behaviors, needs, or experiences.
• alignmentA visual design principle that positions elements along shared edges, axes, or guides.
• competitive analysisCompetitive research is the systematic analysis and comparison of competing products or websites against selected criteria.
• interviewA user interview is a one-on-one research conversation that explores a user’s behavior, attitudes, beliefs, needs, or experiences.
• principle of proximityA visual design principle in which spatial closeness communicates a relationship between elements.
• visual hierarchyVisual hierarchy is the ordering of visual elements to indicate their relative importance and guide perception.
• vertical rhythmVertical rhythm is a typographic layout system that uses regular vertical spacing to establish consistent relationships among page elements.
• feedbackFeedback is information communicated to users about the effects or status of their interactions with a product.
• qualitative researchA qualitative study gathers and interprets non-numerical evidence about people’s experiences, opinions, attitudes, or behaviors.
• user surveyA survey is a structured set of questions used to collect information from users or other respondents.
• colorColor is the visual attribute of elements defined by their perceived hue, lightness, and saturation.
• sans serif typefaceA sans serif typeface is a typeface classification whose letterforms lack the small finishing strokes called serifs.
• card sortingCard sorting is a user research technique in which participants group labeled content items to reveal how they expect information to be organized.
• closed card sortA closed card sort is a card-sorting exercise in which participants place content into predefined categories.
• focus groupA focus group is a moderated discussion in which multiple users or participants provide qualitative information about a topic, product, or experience.
• open card sortAn open card sort is a card-sorting exercise in which participants create groups and assign labels to those groups.
• loopA design approach that repeatedly tests, evaluates, and refines a product through successive cycles.
• repetitionRepetition is a design principle that applies consistent visual elements, styles, components, or layouts to create unity and recognizable patterns.
• user experience processA user experience methodology is a structured approach for understanding users and incorporating their needs into product design and development.
• serifA typeface style whose letterforms include small finishing strokes at the ends of their main strokes.
• prototypingA prototype is a preliminary version of a product or feature created for evaluation before implementation.
• font-weightFont weight is the relative thickness of a typeface's strokes, commonly represented by named or numeric values such as Regular and Bold.
• principleA general guideline for directing decisions about the visual and experiential qualities of a product or interface.
• primary colorA primary color is a foundational color in a color system that can be combined with other primary colors to produce additional colors.
• information architectureInformation architecture is the organization and labeling of information so that it can be understood and navigated.
• visual balanceA visual design principle concerning the distribution of perceived weight among elements to create a complete or evenly weighted composition.
• cognitive loadCognitive load is the amount of mental effort required to perceive, understand, remember, or act on information.
• line-height propertyLine height is the vertical distance allocated to each line of text, including the space between successive lines.
• type rampA type ramp is a coordinated set of typographic styles and rules defining font families, sizes, styles, and usage across an interface.
• designWeb design is the planning and creation of a website’s visual presentation, structure, and interaction.
• font-size propertyFont size is the specified height of text glyphs in a typographic style, commonly set through CSS.
• script typefaceA script typeface is a typeface classification designed to resemble handwritten or calligraphic lettering.
• monochrome color schemeA monochromatic color scheme uses variations of a single hue by changing properties such as saturation and brightness.
• customer problemA user need is a problem, goal, constraint, or desired outcome experienced by a product's user.
• visual designVisual design is the practice of shaping the appearance and presentation of an interface through visual elements and composition.
• font familyA coordinated group of related type designs or fonts that share a common visual character and are available in multiple styles or weights.
• touchpointA touch point is an interactive area of an interface intended to be activated through touch input.
• semantic markupSemantic HTML is the practice of structuring a document with HTML elements that accurately express the meaning and hierarchy of its content.
• fantasy typefaceA decorative typeface is a highly stylized typeface intended primarily for display or ornamental effect rather than extended reading.
• 60:30:10 ruleThe 60:30:10 rule is a color-allocation guideline that assigns approximately 60 percent, 30 percent, and 10 percent of a composition to primary, secondary, and accent color roles.
• body copyBody copy is the main running text of a page, excluding headings and other display text.
• componentA user interface component is a reusable, self-contained visual and interactive unit of a user interface.
• complementary color relationshipA complementary color is a color positioned opposite another color in a color wheel or related color model, producing strong visual contrast.
• baselineA baseline is the invisible horizontal line on which most letterforms rest in a line of text.
• visual design fundamentalsFoundational principles and practices for applying visual elements to give an experience character and hierarchy.
• edge alignmentAn alignment mode in which elements are positioned along the top, bottom, left, or right edge of a composition.
• center alignmentHorizontal alignment is an alignment mode in which elements share the center line of their horizontal axes.
• text alignmentThe positioning of text within a block or relative to an alignment edge or axis.
• secondary colorA secondary color is a supporting palette color with less visual emphasis than the primary color.
• customer journeyA user journey map is a visual narrative of a user's actions, thoughts, feelings, and opportunities for improvement across connected product touchpoints.
• column layoutA column layout is a page arrangement that divides content into parallel vertical sections.
• font styleA font style is a variation of a typeface that changes its visual treatment, such as upright or italic presentation.
• color theoryA body of principles describing how colors relate, combine, and affect visual perception and composition.
• hueHue is the pure color or base-color quality of a color, distinct from the effects of adding white, black, or gray.
• groupingGrouping is the arrangement of related content or interface elements into perceptually distinct units.
• symmetrySymmetry is a balanced correspondence of parts around an axis, center, or other transformation.
• saturationSaturation is the intensity or vividness of a color, represented in HSL as a percentage from 0% to 100%.
• accent colorAn accent color is a contrasting or distinctive color applied selectively to attract attention and emphasize interface elements.
• spacingSpacing is the amount and arrangement of empty space between visual elements, including divisions within a grid.
• brightnessBrightness is the perceived lightness level of a color.
• analogous colorsAn analogous color scheme uses colors positioned next to one another on the color wheel.
• split complementary colorsA color scheme that combines one hue with the two hues adjacent to its complement.
• triadic colorsA triadic color scheme uses three colors evenly spaced around the color wheel.
• line lengthLine length is the amount of text, commonly measured in characters, spanning one line of a text block.
• low-fidelity wireframeA minimally detailed wireframe that communicates basic page layout, interaction, and functionality for rapid ideation and iteration.
• reading patternA reading pattern is a recurring way users visually scan and process page content.
• marginA margin is the empty space separating a layout element from adjacent elements or the containing boundary.
• tertiary colorA tertiary color is a color produced by mixing a primary color with an adjacent color on the color wheel.
• color relationshipA color relationship is a relationship among colors based on their hue, saturation, lightness, or position within a color system.
• goalA user goal is a specific outcome that a user seeks to accomplish through a product or interface.
• shadeA shade is a color produced by darkening a hue, typically by adding black or reducing its lightness.
• tintA tint is a color produced by lightening a hue, typically by adding white or increasing its lightness.
• overlayAn overlay is an interface or visual layer placed above underlying content, such as an image, to alter its appearance or legibility.
• mockupA mock-up is a static visual representation of a proposed interface appearance used for review and refinement.
• progressive enhancementProgressive enhancement is a web development strategy that delivers core functionality with broadly supported technologies and adds richer capabilities when available.
• yellowYellow is a hue in the warm portion of the visible color spectrum that is commonly perceived as bright and attention-grabbing.
• testTesting is the systematic evaluation of a design or product to determine its visual quality, usability, or other properties.
• user-centric designUser-centered design is an approach that prioritizes users' needs, goals, context, usability, and feedback throughout product development.
• color wheelA color wheel is a circular model that organizes hues according to their relationships.
• UI designThe planning of a software product's visual and interactive surface.
• usabilityUsability is the degree to which a product can be used easily and effectively to accomplish intended goals.
• medium-fidelity wireframeA digitally created wireframe with moderately accurate spacing, layout, sizing, and component representation but without pixel-level specificity.
• color psychologyColor psychology is the study of how colors influence human feelings, associations, perceptions, and behavior.
• responsive web designResponsive web design is an approach that adapts a website's layout and presentation to different screen sizes, orientations, and device contexts.
• stress stateA stress state is a condition in which a person feels overwhelmed and has reduced ability to process information clearly.
• italicsItalic text is text rendered with slanted letterforms to indicate emphasis or a stylistic treatment.
• asymmetrical balanceAsymmetrical balance is a composition in which unequal visual weights are arranged so the composition remains balanced as a whole.
• symmetrical balanceSymmetrical balance is a composition in which corresponding elements or equivalent visual weight are arranged on opposite sides of an axis.
• visual weightVisual weight is the perceived prominence or heaviness that an element contributes to a composition.
• paddingPadding is the internal space between an element's content and its border or edge.
• study designA/B testing is an experimental technique that compares different versions of an interface or design by exposing them to separate user groups and measuring their outcomes.
• double diamondThe Double Diamond is a design methodology that alternates divergent exploration and convergent definition across problem and solution stages.
• sitemapA site map is a structured representation of a website’s pages and their relationships.
• font pairingTypeface pairing is the selection of multiple typefaces or fonts that work together to create a clear and coherent typographic system.
• loading indicatorA loading animation is a visual indicator that communicates ongoing processing or waiting in an interactive interface.
• headingA heading element is a semantic HTML element that marks a section heading and communicates its structural importance.
• personaA representative profile describing a target type of user and that user's relevant goals or needs.
• neutral colorA neutral color is a color perceived as having limited warmth or coolness and relatively little chromatic emphasis.
• developer experienceThe quality of a developer's interaction with a product and its development-related interfaces or workflows.
• masonry layoutA multicolumn layout technique that places differently sized items in independently varying vertical columns without fixed row heights.
• modular grid layoutA modular grid layout is a grid-based arrangement with repeated modules organized by fixed row and column dimensions.
• chunkingA technique for dividing content or a task into smaller, manageable units or sequential steps.
• accordion menuA collapsible interface control that expands or hides associated content within the current page.
• clickable targetAn interactive screen area intended to receive a user's touch input for a control or action.
• touchscreenA display that detects direct physical contact and uses it as an input mechanism.
• f-patternThe F-pattern is a page-scanning pattern in which users read across upper lines and then scan downward mainly along the left side, commonly on text-heavy pages.
• z-patternThe Z-pattern is a page-scanning pattern in which the eyes move across key elements along a path resembling the letter Z, typically on pages with minimal text.
• content inventoryA content inventory is a structured record of the content assets associated with a website or application and their attributes.
• slab serifA slab serif is a serif typeface classification characterized by substantial, block-like serifs.
• b elementThe HTML b element draws attention to text without conveying that the text has greater importance.
• em elementThe HTML em element marks text that carries emphasis.
• i elementThe HTML i element marks text set apart from the surrounding text without asserting added emphasis or importance.
• oblique faceAn oblique style is a slanted version of a typeface in which the character designs remain otherwise the same as the normal style.
• strong elementThe HTML strong element marks text as having strong importance or urgency relative to surrounding text.
• empathyEmpathy is the ability to understand and respond appropriately to another person’s perspective, feelings, and needs.
• interaction designInteraction design is the design of how people interact with a product, including its behaviors, controls, and responses.
• user attitudeUser attitude is a user's expressed feelings, opinions, judgments, or perceptions about a product or experience.
• requirementsA business need or constraint is a product or project outcome that an organization expects to satisfy.
• storyboardingThe technique of creating a sequence of rough visual panels to plan an animation, interaction, or narrative progression.
• breadcrumbsBreadcrumbs are a navigation aid that shows a page’s location within a website’s hierarchical structure and the path to it.
• main navigation menuA main navigation menu is the primary interface control for accessing a website’s top-level sections.
• secondary navigation menuA secondary navigation menu is a navigation control for accessing pages or sections below a website’s top-level navigation.
• typeface superfamilyA typeface superfamily is a group of related typeface families that share a base design while differing in classification or other features.
• design decisionA deliberate choice that shapes a product's visual, structural, interactive, or experiential characteristics.
• max-width propertyMax-width is a constraint specifying the greatest horizontal size an element or layout container may occupy.
• color temperatureColor temperature is a classification of colors as warm or cool based on their visual and emotional qualities.
• cool colorA cool color is a color perceived as visually calming or cool, typically associated with greens, blues, and purples.
• warm colorA warm color is a color perceived as visually energetic or warm, typically associated with reds, oranges, and yellows.
• type scaleA type scale is a set of font sizes related by a consistent proportional or mathematical progression.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.