24,428 courses · 2,504 curriculum guides Sponsored by eAgentic Software Sponsored by eAgentic Software

Web Design

GRA2144C — Graphic Web Page Design
← Course Modules
3 credit hours 60 contact hours Prerequisites: Typically an introductory graphic design or digital imaging course; requirements vary. Important before registering: web design is taught under several Florida prefixes and the prefix predicts the approach - GRA is design-oriented (this course), CGS varies widely by institution, COP is programming, CTS is certification-oriented, DIG is interactive media. Read the section description and ask what software is used. Get the free Figma education account before the term. v1.0

Course Description

GRA2144C – Web Design is a 3-credit studio course covering the design and production of websites from a graphic design perspective: layout, typography, color, imagery, hierarchy, and user experience, with enough HTML and CSS to build what is designed. The C suffix indicates integrated lecture and laboratory.

The distinguishing feature is the point of view. This is a graphic arts course, taught in design programs, and it treats the web as a design medium with particular constraints rather than as a programming problem. Students learn to design first — wireframes, layout systems, type hierarchy, responsive behavior — and then to produce, rather than beginning with code.

Content covers design principles for screen — hierarchy, balance, proximity, alignment, contrast, and repetition; layout and grid systems — structure, columns, and modular scale; web typography — typefaces, web fonts, scale, measure, and readability; color for the web — systems, accessibility, and contrast; imagery — formats, optimization, resolution, and art direction; information architecture — site structure, navigation, and labeling; user experience fundamentals — user needs, task flows, and usability; wireframing and prototyping — low and high fidelity; responsive design — mobile-first thinking, breakpoints, and fluid layout; HTML — semantic structure sufficient to build a designed page; CSS — styling, layout with flexbox and grid, and media queries; accessibility — contrast, alternative text, and inclusive design; design systems and style guides; content management systems at an introductory level; testing and publishing; and portfolio presentation.

Learning Outcomes

Required Outcomes

Optional Outcomes

Major Topics

Required Topics

Optional Topics

Resources & Tools

Career Pathways

Florida demand is broad because every organization needs a web presence, with concentrations in Orlando, Tampa, Miami, and Jacksonville, plus heavy agency and freelance activity in tourism, hospitality, real estate, and health care. Much of the work is remote-eligible, which widens the market and the competition alike — and in design specifically, the portfolio is the credential. Nobody is hired on a transcript.

Special Information

⚠ Web design lives under several different prefixes — and the prefix tells you the approach

An unusually useful piece of navigation for Florida course numbering, and a real registration hazard. Web coursework is scattered across prefixes according to which department houses it, and the prefix predicts the emphasis:

These are genuinely different courses that overlap in subject. A student who wants to design will be frustrated in the programming variant, and the reverse. Read the section description and ask what software and languages are used before registering. And because SCNS equivalency applies to the same number at the same level, never across numbers, none of these substitute for one another automatically — verify what your program requires.

Design first, code second — and the discipline is to resist the computer

The methodological point this course exists to teach, and the habit students most often skip. Beginning designers open a code editor or a design application immediately and start pushing pixels, which produces decoration rather than design and makes structural problems expensive to discover.

The professional sequence is: understand the content and the user's task first; sketch on paper, quickly and many times, because paper is faster than any software and encourages throwing ideas away; move to wireframes that establish structure and hierarchy without color or imagery; then apply visual design; and only then build. The specific value of wireframing is that it forces you to solve hierarchy before style can disguise the fact that you have not. Instructors notice immediately when a student skipped this, because the result looks arranged rather than designed.

⚠ Design mobile-first — and understand why it is a constraint worth wanting

The single most consequential technical practice in current web design. Most web traffic is mobile, and a design conceived at desktop width and then squeezed down almost always degrades badly, because the desktop layout permits decisions — wide multi-column structures, large navigation, decorative space — that have no small-screen equivalent.

Designing for the smallest screen first is a productive constraint: it forces you to establish what actually matters, because there is only room for what matters, and expanding upward to larger screens is straightforward. Practically, that means starting your layout at a narrow width, using relative units rather than fixed pixel widths, letting content determine breakpoints rather than targeting specific device sizes, and testing on a real phone rather than only in the browser's device emulator — touch targets and legibility read differently in the hand.

⚠ Accessibility is a legal obligation and a design skill, not an add-on

Consistently underweighted in design coursework and consistently required in employment. Public institutions and many businesses carry accessibility obligations, Florida's public colleges and agencies have specific requirements, and inaccessible sites have generated substantial litigation.

The parts that belong to a designer specifically are concrete and checkable: color contrast meeting WCAG ratios — and note that light grey text on white, a persistent trend, routinely fails; never using color alone to convey information, which excludes color-blind users; legible type sizes and adequate line length; visible focus indicators for keyboard users, which designers frequently remove because they consider them unattractive; meaningful alternative text; and touch targets large enough to hit. Free tools — WebAIM's contrast checker and WAVE — verify most of it in seconds. A designer who can speak to accessibility credibly is meaningfully more employable, particularly for the government, education, and health care work that makes up much of Florida's market.

Learn to take critique — it is the core of design education

A cultural feature of studio courses that surprises students from lecture backgrounds. Your work will be displayed and discussed publicly, by the instructor and by peers, in detail. This is the instruction, not a judgment of you, and learning to use it is a professional skill in itself — client and stakeholder feedback for the rest of your career will be less structured and less kind.

Practical habits: do not defend, ask questions — "what specifically isn't working about the hierarchy?" produces more than explaining your intent; understand that if it needs explaining, it is not communicating, since users will not have you standing beside them; separate the work from yourself; and give critique in terms of objectives rather than taste — "the call to action competes with the headline" is useful, "I don't like the blue" is not. Also learn to present your work: stating the problem, the audience, and the reasoning behind your decisions is exactly what a job interview asks for.

Build a portfolio of real work — and publish it

The most actionable career advice in design, because hiring in this field runs almost entirely on portfolios. Two specifics matter more than students expect.

First, tutorial reproductions and class exercises signal very little — everyone has them. Work for a real client, even unpaid, is worth several class projects: a campus club, a small business, a church, a nonprofit. Real constraints, real content, and a real stakeholder produce work that looks different. Second, show your process, not only the final image. Employers hiring designers want to see the problem, the sketches, the alternatives you rejected, and the reasoning — a grid of pretty screenshots does not demonstrate that you can think. And publish the site: free hosting exists, and a live URL is more persuasive than a mockup.

The tools change; the fundamentals do not

Realistic framing for a course whose software list dates quickly. Design tools turn over on a several-year cycle — Dreamweaver to Sketch to Figma, and whatever follows — and CSS gains features continuously. Students sometimes fixate on tool proficiency because it feels concrete.

What actually transfers, and what employers are assessing, is typography, hierarchy, layout, color, and the judgment to solve a communication problem. A designer with those can learn a new tool in a fortnight; a designer who only knows a tool has to start over when it is replaced. Learn Figma because it is what the industry currently uses, and learn the fundamentals because they are what makes you employable in ten years.


Generated September 1, 2026 · Updated September 1, 2026