Graphic Design Theory - Web & Digital Design

Define web design roles, from web and visual designers to digital designers, and compare front end, back end, and full stack responsibilities. Examine navigation, usability, and accessibility shaping user experience.

Explore above the fold design, header and hero sections, and mega menus. Learn button basics, labels, icons, padding, borders, states, and ctas.

Explore how hex codes define web colors, understand rgb channels and color pickers, and examine fixed, parallax, and infinite scrolling to enhance site structure.

Understand how a centered wrapper with fixed width structures a site’s header, navigation, content, sidebar, and footer, and how visual and functional elements shape navigation and information architecture.

Explore how web design uses grids, gutters, and columns to create visual hierarchy, and how sitemaps, wireframes, and scanning patterns like the f and z guide layout decisions.

Prioritize mobile-first web design and ensure sites adapt to any screen size with responsive or adaptive layouts using CSS breakpoints, orientations, and fluid, percentage-based sizing.

Adaptive design creates unique screen-size specific versions to improve speed, unlike responsive design. Manage pixel density with image fallbacks and scalable vector graphics to preserve quality.

Explore the four key web file formats—JPEGs, PNGs, SVGs, and GIFs—and learn to compare quality and file size, including transparency and animation, with Photoshop's save for web.

Learn to save SVGs in Illustrator as normal or compressed SVGs with browser-ready code, and explore WebP versus JPEG 2000 for web design.

Explore the synergy of ux and ui design, from design thinking and strategy to wireframes, user flows, and prototypes, including personas, scenarios, and goals that shape web and digital products.

Explore core ux laws, including fitts law, hick's law, and jacob's law, and see how universal design and familiar patterns improve accessibility and decision speed.

Explore additional ux laws and real-world examples of proximity, common region, Miller's law, similarity, uniform connectedness, and the serial position effect in web and app design.

Discover how mobile apps beat websites in usability and master app design from research to high fidelity prototyping in Adobe XD, with thumb-friendly interfaces and gesture navigation.

Discover how graphic designers can enter web design without coding using tools like Adobe XD, Webflow, Adobe Spark, and Thrive Architect to create websites and prototypes with parallax effects.

Explore the Webflow workflow with parallax effects, hover interactions, and responsive designs, then prototype in Adobe XD, use repeat grid, and export artboards to turn mockups into a live site.

Create a header with a navigation bar and logo, adjust spacing and menu items in Webflow, and build a three-slide slider with background images set to cover, enabling auto play.

Add web animations in Webflow using Lottie and JSON files from Lottie Files. Set up a div block, center the animation, and enable looping for continuous playback.

Explore the Adobe XD and Webflow workflow to create parallax scroll animations, using containers, columns, and image and text blocks with move, opacity, and fade-in effects.

Explore creating an out-of-bounds parallax effect in Webflow by isolating the bird from the background in Photoshop, exporting PNG and JPEG, and wiring a scroll animation.

Create a single scrolling prototype in Adobe XD that demonstrates parallax scrolling with a sticky navigation menu, using components, duplicate artboards, and auto-animate transitions.

Create a parallax scrolling prototype in Adobe XD by duplicating artboards, adjusting overlaps, and testing tap and drag interactions with auto animate for dynamic folds and a sticky menu.

Master parallax scrolling prototype with Adobe XD by configuring artboards, a sticky menu, and nav interactions using components, auto-animate transitions, and non-linear linking.

Explore seven key icon design principles—clarity, readability, alignment, consistency, personality, brevity, and ease of use—and how styles and trends shaped icon design, with an Illustrator template.

Explore icon design techniques from skeuomorphism to flat design and neomorphism, highlighting grid-based consistency, contrast, and animated icons using Illustrator and After Effects.

Discover how web banners serve as online ads to grab attention, drive traffic, and be measured by click-through rate, while applying print principles like color, contrast, and negative space.

Design web banners from a landscape hero image to square and portrait variants, then create a three-frame animated banner using the timeline in Photoshop, with vector accents from Illustrator.

Isolate the converse and Nike images as smart objects. Assemble them on a 1280 by 600 artboard with a blue backdrop, and add bold text and up to 50% sticker.

Create dynamic web banners with vector elements in Illustrator to reduce negative space and add momentum, using zigzag live effects, chevrons, dashed circles, and shape layers for Photoshop.

Craft a high-energy banner using diagonals, rotate text and shapes with the free transform tool at -20 degrees, and layer color-filled elements to direct focus.

Duplicate and mutate banner artboards, resize to 600 width and 400/800 heights, adjust layers and text, apply drop shadows, and align elements for legible square and portrait variations.

Design a three-frame banner sequence by duplicating frames and emphasizing big sale text with Nike and Converse visuals, then convert frames to smart objects for 600 by 600 animated banner.

Set up timeline frame animation, convert layers to frames, adjust durations and looping, then export animated gif 128 dithered and static banners as jpeg or png at multiple sizes.

Master social media design by balancing harmony and contrast across timelines and stories, mastering typography, color, and branding while analyzing impressions, engagement, and organic versus paid posts.

Design compelling YouTube thumbnails using expressive headshots, depth with framing and out-of-bounds overlap, and selective text and graphic elements for higher engagement.

Learn to make YouTube thumbnails stand out with high contrast, HDR toning, selective exposure, vibrance, and sharpening, plus custom thumbnails with sticker outlines and split compositions.

Master persuasive presentation design by crafting engaging slides with storytelling, negative space, and consistent visuals; learn to use Adobe XD or InDesign with templates and animations.

Learn to build interactive Adobe XD prototypes with tap and hover transitions, components, and auto animate, then test in preview and navigate via keyboard or voice commands.

Create engaging web and digital design demos in Adobe XD by building components, hover states, fixed sticky menus, prototype interactions, anchor links, and two-screen navigation.

Explore digital publishing, its reach, speed, and cost benefits over print, and learn how interactivity, tracking metrics, and formats like reflowable and fixed layouts shape e-publishing.

Explore motion design as a dynamic branch of graphic design, animating typography and shapes with Illustrator and After Effects, leveraging ten principles and easing to create engaging visuals.

Compare AR and VR and how 3D, animation, and coding enable AR scenes, even for graphic designers using tools like Arrow; learn to prototype with Adobe Aero.

Explore graphic design theory concepts by reviewing glossary terms, PDFs and Milanote board references, then test your knowledge with a quiz and gain inspiration for your next project.