What Is Web Design? Process, Quality Criteria and the Designer's Job
Web design is planning how a site looks and how visitors use it. Here is how it differs from development, how the process runs and how to judge a good design.
Web design is the work of planning how a website looks and how visitors use it. Page layout, colours, fonts, images, menu structure and button placement are all part of that plan. The goal of good web design is less about looking pretty and more about helping visitors find what they need quickly and get in touch with you.
This article covers what web design includes, how it differs from web development, what a web designer actually does, the process from discovery to launch and the criteria you can use to judge a design.
What does web design include?
Most people think of colours and images when they hear "design". A website design actually has several layers:
- Information architecture: which pages exist, what goes where in the menu, how many clicks it takes to reach something.
- Layout: the order of headline, text, image and button on each page. Where does the eye go first?
- Visual language: colour palette, fonts, spacing, icons and photography. This layer carries your brand's character.
- Interaction: what happens when a button is pressed, how a form shows errors, how the mobile menu opens.
- Responsive structure: the same content working on phone, tablet and desktop. Google indexes sites primarily by their mobile version (mobile-first indexing).
- Content placement: text broken into readable, scannable sections with headings.
The visitor's side of these layers is called user experience (UX), and the visible surface is the user interface (UI). We explain the difference with examples in what is UI and UX.
Web design vs web development
The two terms are often used interchangeably, but they are different jobs. Design answers "how will it look and how will people use it?", development answers "how will it work?"
| Web design | Web development | |
|---|---|---|
| Core question | How will it look and be used? | How will it work? |
| Output | Wireframes, screen designs, style guide | Code, database, admin panel |
| Tools | Design tools such as Figma, pen and paper | HTML, CSS, JavaScript, PHP, MySQL, etc. |
| Front end / back end | Plan for the front end | Front-end code and the back end |
| Example task | Deciding which steps a booking form has | Making the form check availability and send an email |
Front-end development is where the two meet: the design becomes HTML and CSS. The back end is everything visitors do not see, such as the database, the admin panel and form processing.
Why does this matter to you? When you get a quote, you need to know whether "design" means a set of mock-ups or a working website. Some firms drop your logo into a template and sell it as "design". We compare templates and custom code in website builder vs custom code.
What does a web designer do?
A web designer's job starts with understanding the business, not decorating screens. On a typical project the designer will:
- Learn the business goal and the customer: should the site bring calls, bookings or quote requests?
- Review competitor sites and sector conventions.
- Draw up the sitemap and a content plan for each page.
- Sketch low-detail wireframes that show layout only, without colour or images.
- Create the visual design on top of the approved wireframe: palette, typography, photo style, icons.
- Design desktop and mobile screens separately.
- Work with the developer to check the design is built correctly.
In large agencies these tasks are split between a UX researcher, a UI designer and a front-end developer. In small studios the same team usually runs the project end to end, which means nothing promised in the design gets lost in the code.
The web design process, step by step
The process varies between firms, but a solid project usually runs like this. It is the same order we follow on our business website projects.
| Step | What happens | What we need from you |
|---|---|---|
| 1. Discovery | Goal, audience, competitors and scope are agreed | An overview of your business, sites you like |
| 2. Sitemap and wireframes | Page list and layout sketches | Approval of the page structure |
| 3. Visual design | Home page and a sample inner page, desktop and mobile | Feedback, logo and brand colours |
| 4. Development | Design becomes code, admin panel is set up | Text and photos |
| 5. Content and testing | Content goes in, tested across devices and browsers | Final proofreading |
| 6. Launch | Site goes live, Search Console and sitemap are set up | Domain access, if you already have one |
Projects rarely stall at design. They stall at content. If text and photos are ready, a 5-page site can be done in a few weeks; waiting for content can take months. Agree who prepares the content at the discovery meeting.
What makes a web design good?
"I like it" is not enough to judge a design. Use concrete criteria:
1. A clear message on the first screen. Visitors should understand what you do, where you are and what to do next the moment the page opens. Make a specific promise instead of "quality service".
2. Comfortable on mobile. Buttons big enough for a thumb, a menu that opens and closes, no sideways scrolling, a phone number you can call with one tap.
3. Speed. Google measures page experience with Core Web Vitals: the largest content visible within 2.5 seconds (LCP), a response to interaction within 200 milliseconds (INP) and no layout shift while loading (CLS under 0.1). Heavy themes, uncompressed photos and unnecessary plugins hurt these numbers.
4. Readability. Enough contrast between text and background: the W3C accessibility guideline WCAG 2.2 recommends at least 4.5:1 for normal text. Lines should not be too long and paragraphs should be short.
5. Consistency. Buttons of the same type look the same everywhere, heading sizes follow a scale and spacing follows a system.
6. Trust signals. Address, phone, references, real photos and the required legal texts (privacy notice, cookie policy) are easy to find.
7. Easy contact. The contact page is one click away, the form is short, and there is a WhatsApp or phone option.
8. A search engine foundation. A unique title and description on every page, a logical heading structure and clean URLs. Design should support these, not break them. We cover the rest of that foundation in our guide to what SEO is.
Quick checklist
Use these questions to review your current site, or a design you have been shown, in ten minutes:
- [ ] Does the first screen of the home page say what we do and where we are?
- [ ] On a phone, does the menu open and are the buttons easy to tap?
- [ ] Can the page be read without scrolling sideways?
- [ ] Does tapping the phone number start a call?
- [ ] Are the photos real, or stock images seen on every other site?
- [ ] Do buttons and headings look the same on every page?
- [ ] Does the contact form have five fields or fewer?
- [ ] Can we change text and photos ourselves in the admin panel?
- [ ] Do pages open in under three seconds on a phone?
- [ ] Is there a privacy notice and cookie information?
If you answer "no" more than three times, the design may be getting in the way of your business rather than helping it.
Types of web design: which one fits?
- Showcase site: a few pages covering the business, services and contact details. Enough for new and small businesses.
- Company site: more pages, several languages, a blog and references.
- E-commerce site: catalogue, basket, payment and shipping; product pages and checkout steps become critical.
- Landing page: a single page with one goal, built for a campaign or an ad. Sending ad traffic to a dedicated page usually works better than sending it to the home page.
- Custom web application: projects driven by function, such as booking, listing management or a customer portal.
Design needs also change by sector. On a hotel website, room photos, a date picker and the booking button take the lead. To see what that looks like, browse our hotel website examples.
How much does web design cost?
Price depends on the number of pages and languages, custom modules (booking, e-commerce) and whether the design is a template or made for you. At Grapyweb a 5-page showcase site starts at 19,900 TL and a bilingual 10-page company site at 39,900 TL (excluding VAT, with domain, hosting and SSL included for the first year).
For a figure based on your own project, the quote wizard works out the scope in a few questions.
Questions to ask when choosing a design team
A portfolio can look great, but these questions tell you how the team actually works:
- Will you show the mobile design separately? A team that only presents desktop mock-ups will "squeeze" mobile in during development.
- Do you use a template, or is the design made for us? Both are legitimate, but you should know which you are getting.
- How many revision rounds are included? "Unlimited revisions" usually means an unclear scope; two or three defined rounds are healthier.
- Who writes the text and who supplies the photos? The answer directly decides the timeline.
- Can we update the site ourselves after launch? A site without an admin panel costs you extra for every small change.
- Whose name will the source code and domain be in? If the design and code are not yours, changing providers later gets hard.
Seeing these answers in a written quote prevents most disagreements before they start.
Common mistakes
- Starting design before the content exists. A layout made without text breaks once the text arrives.
- Designing for desktop and leaving mobile for later. A large share of visitors arrive on phones.
- Trying to fit everything on the home page. Every extra section takes attention from the next.
- Opening with a large image slider. It is heavy, and most visitors never see the second slide.
- Using buttons in four colours and four sizes.
- Leaving the site alone after launch. A design gains value when it is improved based on visitor data.
If you prefer to work face to face in Antalya, our Antalya web design page explains how we work and shows our references.
Frequently asked questions
Is web design the same as web development?
No. Web design plans how the site looks, how pages are laid out and how visitors move through them. Web development turns that design into working code, an admin panel, forms and a database. In small teams one person may do both, but they are different skills.
What does a web designer do?
They learn the site's goal and audience, work out the page structure, draw wireframes, choose colours, fonts and visual style, design desktop and mobile screens, and work with the developer to make sure the design is built correctly.
How long does it take to design a website?
It depends on scope. A 5-page showcase site usually takes 2-3 weeks and a 10-page bilingual company site 4-6 weeks. Much of that time goes into gathering content and review rounds.
What is the difference between a template and a custom design?
A template is used on thousands of sites; it is quick and cheap, but you adapt to the template rather than the other way round. A custom design is planned around your content, audience and brand, and because it carries no unused code it usually loads faster too.
How can I tell if a web design is good?
Do visitors understand what you do on the first screen, is the site easy to use on a phone, does it load quickly, and is it easy to get in touch? If the answer to all four is yes, the design is doing its job. The checklist in this article goes further.
Do you need to know how to code to design websites?
Knowing the basics of HTML and CSS is a big advantage, because the designer then knows what is easy or hard to build. Turning the design into code, however, is the developer's job.
