Graphic design is how a website looks and feels, separate from the code that makes it work

When you arrived here from the web development article, you learned that developers write the code — the instructions that make buttons clickable, forms submit, and pages load. Graphic designers do something different: they decide what color the button is, how big the text should be, where elements sit on the page, and what typeface tells your story. A developer might write the code that displays an image; a designer chooses which image, sizes it, and places it where the eye lands first.

On small projects, one person does both. On larger sites, they are separate roles. Either way, the design comes first — the developer builds what the designer planned. This article covers what designers actually do, which tools they use to do it, and how those tools connect to the code that brings the design to life.

Key Takeaways

  • Graphic design on websites covers layout, color, typography, imagery, and spacing — everything visual except the code underneath.
  • Designers use tools like Figma, Adobe XD, Sketch, and Photoshop to create mockups before any code is written.
  • A designer's mockup becomes the blueprint a developer follows, so clarity and detail in the design file saves time and mistakes later.
  • Web design differs from print design because screens are backlit, text must be readable at any size, and users interact with the page rather than just viewing it.
  • Design tools export assets — buttons, icons, images — that developers then place into the actual website code.

The core tasks a website designer handles

Layout is the skeleton. A designer decides how wide the page is, where the navigation lives, how much space sits between sections, and whether content stacks on a phone differently than on a desktop. This is called responsive design — the same site looks good on a 6-inch phone screen and a 27-inch monitor because the designer planned for both.

Typography is the choice of typeface, size, weight, and line spacing for headlines, body text, and labels. A designer picks fonts that match the brand voice — a law firm might use a serious serif font, while a children's app might use something playful and rounded. They also may support text is large enough to read without squinting and has enough space around it to breathe.

Color sets the mood and guides the eye. A designer creates a palette — usually 3 to 5 main colors plus neutrals — and decides which color is the call-to-action button, which is the background, and which highlights important warnings. Contrast matters: text must be dark enough against its background that people with low vision can read it.

Imagery and icons are the visual elements that break up text and communicate quickly. A designer sources or creates photos, illustrations, and icons, then sizes and positions them so they support the message rather than distract from it. Icons especially need to be clear at small sizes on a phone screen.

Spacing and alignment are invisible but critical. A designer uses a grid — an invisible set of columns and rows — to align elements so the page feels organized rather than chaotic. Consistent spacing between sections makes the page easier to scan and less exhausting to look at.

Design tools and what they are used for

Figma is the most common tool for web design right now, especially in teams. It lives in your browser, so multiple designers can work on the same file at the same time. You can create mockups, build interactive prototypes that show how buttons respond when clicked, and hand off the design to developers with measurements and color codes built in. Figma is free for one project and paid for multiple.

Adobe XD is Adobe's answer to Figma. It is installed on your computer rather than in a browser, and it integrates tightly with other Adobe tools. Like Figma, it handles mockups and interactive prototypes. It is part of the Adobe Creative Cloud subscription, which also includes Photoshop and Illustrator.

Sketch is older and Mac-only. Many designers still use it, especially for icon and illustration work. It is a one-time purchase rather than a subscription, which appeals to freelancers. It does not have real-time collaboration the way Figma does, so teams often use it alongside a file-sharing service.

Photoshop started as a photo editor and is still used for that, but designers also use it to create website mockups. It is powerful but slower and more complex than tools built specifically for web design. Most teams now use Figma or XD for the initial design and Photoshop only when they need to retouch photos or create detailed illustrations.

Illustrator is for creating vector graphics — logos, icons, and illustrations that scale to any size without getting blurry. A designer might create an icon in Illustrator, export it, and then place it into the Figma mockup.

Canva is simpler and free or low-cost. It is not used for full website design, but small businesses and solo creators use it to design social media graphics, email headers, and straightforward landing pages. It has templates and drag-and-drop simplicity, but less control than professional tools.

How a designer's mockup becomes a website

A designer creates a mockup — a detailed visual representation of what the website will look like. This mockup shows every page or screen, with real text, real images, and real colors. It is not interactive yet; it is a picture of what the finished site should look like.

The designer then exports assets from the design file. An asset is a single element: a button graphic, an icon, a background image, a logo. The designer exports these as image files (usually PNG or SVG format) with the correct dimensions and at the correct resolution for screens.

The developer takes the mockup and the assets and builds the actual website. The developer writes HTML to structure the content, CSS to position and style elements (colors, fonts, spacing), and JavaScript to make things interactive. The developer refers to the mockup constantly to make sure the built site matches the design.

Modern design tools like Figma can export CSS code automatically, which saves the developer time. The designer can also add notes directly in the file — "this button should be 16 pixels tall" or "this text is 18 pixels, Helvetica, bold" — so the developer does not have to measure and guess.

Why web design is different from print design

A print designer creates a poster or brochure at a fixed size. Once it is printed, it does not change. A web designer creates for a screen that could be any size, and the design must adapt. This is why responsive design matters: the same website must work on a 320-pixel-wide phone and a 1920-pixel-wide desktop monitor.

Print is static; web is interactive. A print designer thinks about how the eye moves across a page. A web designer thinks about what happens when someone hovers over a button, clicks a link, or scrolls down. The designer must plan for these interactions and communicate them to the developer.

Print uses CMYK color (the inks used in printing). Web uses RGB color (the light emitted by screens). A color that looks perfect in print might look different on a screen, so web designers work in RGB from the start.

Print is permanent; web changes. A website can be updated in minutes. This means a designer can test a design, see how real users respond, and change it. Print designers do not have that luxury.

Design systems and component libraries

On larger websites, designers create a design system — a set of rules and reusable pieces that keep the site consistent. A design system includes a color palette, typography rules, spacing rules, and a library of components.

A component is a reusable piece: a button, a card, a navigation bar, a form field. Instead of designing each button from scratch every time, the designer creates one button, documents how it should look and behave, and then uses that same button throughout the site. This saves time and makes the site feel cohesive.

Developers benefit too. Once a button component is coded, the developer can reuse that code on every page. If the button needs to change, the developer updates it once and the change appears everywhere.

Tools for collaboration between designers and developers

Figma and Adobe XD both have built-in handoff features. A designer can mark a design as ready, and a developer can open the same file, see measurements, colors, and font details, and even read assets without leaving the tool.

Some teams use design tokens — a shared language for colors, spacing, and typography. Instead of the designer saying "use blue #0066CC" and the developer typing that value into the code, they both reference a token called "primary-blue". If the color needs to change, it changes in one place and updates everywhere.

Version control tools like Git let developers track changes to code. Design tools like Figma have built-in version history, so a designer can see every change made to a mockup and revert if needed. Some teams use both: the designer works in Figma, exports the final design, and the developer commits that design file to Git alongside the code.

Frequently Asked Questions

Do I need to know code to be a graphic designer for websites?

No, but understanding how code works helps. A designer who knows that certain fonts load slowly or that images need to be optimized for the web makes better decisions. Many designers learn basic HTML and CSS to communicate better with developers, but it is not required to start.

Can one person design and develop a website?

Yes. Many small business owners, freelancers, and solo creators do both. Tools like Webflow and Wix combine design and development in one platform, so you can design visually without writing code. For custom sites, one person can use Figma to design and then code it in HTML and CSS.

What is the difference between UX design and graphic design?

Graphic design is how something looks. UX (user experience) design is how something works and feels to use. A UX designer decides where the search button should go so users find it easily. A graphic designer decides what color and size that button should be. On small teams, one person does both.

Why do designers use Figma instead of just building the website in code?

Figma is faster for exploring ideas and getting feedback before any code is written. A designer can try five different layouts in Figma in an hour; rebuilding each layout in code would take much longer. Figma also lets non-technical people — clients, managers, other team members — see and comment on the design without needing to understand code.

What file format should a designer export for the web?

PNG for images with transparency (like icons), JPG for photographs, and SVG for logos and icons that need to scale. SVG is vector-based, so it stays sharp at any size. PNG and JPG are raster-based, so they get blurry if enlarged too much. A designer should export at 2x resolution for high-density screens like iPhones.