IncomeWiki

Revision 1

Web Design

@namkyu · Sep 1, 2026, 8:10 AM

Added web design pricing, tools, workflow, services, and risks.
+22,769−0
1Category: Remote Work
2Page title:
3Web design is the process of planning and creating the visual layout, user experience, structure, and interactive elements of websites.
4
5Web designers can work as freelancers, contractors, employees, or agency owners. Services can range from designing a single landing page in Figma to creating and launching complete business websites using platforms such as Webflow, Framer, Wix, or WordPress.
6
7# Quick Facts
8
9
10| Item | Details |
11| ----------------------------- | ------------------------------------------------------------------------- |
12| Business model | Freelancing, agency services, contract work, retainers |
13| Typical customers | Small businesses, startups, creators, SaaS companies, e-commerce brands |
14| Common deliverables | Landing pages, business websites, redesigns, UI designs, e-commerce sites |
15| Coding required | Not always |
16| Common tools | Figma, Webflow, Framer, Wix, WordPress |
17| Upwork web designer rate | $15–$30/hour |
18| Landing page project | $300–$1,500 |
19| Business website design | $1,500–$5,000 |
20| E-commerce website design | $3,000–$10,000 |
21| Custom web application design | $5,000–$15,000+ |
22| Free tools available | Yes |
23| Difficulty | Beginner to advanced |
24
25
26# What Web Designers Do
27
28Web design includes more than choosing colors and fonts.
29
30Common work includes:
31
32- Planning page structure
33- Creating wireframes
34- Designing layouts
35- Choosing typography
36- Creating color systems
37- Designing navigation
38- Creating responsive mobile layouts
39- Designing buttons and forms
40- Improving user experience
41- Creating reusable components
42- Preparing assets
43- Building prototypes
44- Working with developers
45- Building websites in no-code or low-code platforms
46- Testing the final site on different screen sizes
47
48Some web designers only provide design files.
49
50Others provide a complete service from planning through launch.
51
52# Web Design vs Web Development
53
54Web design and web development overlap but are not identical.
55
56**Web design** primarily focuses on:
57
58- Layout
59- Visual design
60- User experience
61- Typography
62- Navigation
63- Responsive behavior
64- Page structure
65
66**Web development** focuses more on:
67
68- Frontend code
69- Backend systems
70- Databases
71- Authentication
72- APIs
73- Custom application logic
74
75Tools such as Webflow, Framer, Wix, and WordPress have made the distinction less strict because one person can now design and launch many websites without writing the entire site manually.
76
77# Earnings
78
79Web designers can charge hourly, per page, per project, or through ongoing maintenance retainers.
80
81## Hourly Rates
82
83Upwork currently lists web designers at approximately **$15–$30 per hour** as its median marketplace range.
84
85Actual rates can be considerably higher for designers with expertise in:
86
87- Conversion-focused landing pages
88- SaaS websites
89- E-commerce
90- UX strategy
91- Webflow development
92- Branding
93- Complex web applications
94
95Marketplace rates should be treated as hiring benchmarks rather than guaranteed income.
96
97# Project Pricing
98
99Upwork currently provides examples such as:
100
101
102| Project | Example price |
103| ----------------------------- | ---------------: |
104| Landing page design | $300–$1,500 |
105| Business website design | $1,500–$5,000 |
106| E-commerce website design | $3,000–$10,000 |
107| Custom web application design | $5,000–$15,000+ |
108
109
110A landing page project may include:
111
112- One page
113- Responsive design
114- Call-to-action placement
115- Basic visual hierarchy
116
117A business website may include:
118
119- 5–10 pages
120- Custom layouts
121- CMS integration
122- Responsive design
123- Brand-consistent UI
124
125E-commerce projects can cost more because they may include:
126
127- Product pages
128- Collections
129- Cart design
130- Checkout flow
131- Search
132- Navigation
133- Payment integration
134- Mobile optimization
135
136# How It Makes Money
137
138## Landing Page Design
139
140Landing pages are one of the simplest web design services to package.
141
142Common customers include:
143
144- SaaS companies
145- Agencies
146- App developers
147- Consultants
148- Course creators
149- Advertising campaigns
150
151A service may include:
152
153- Page structure
154- Hero section
155- Features
156- Social proof
157- Pricing
158- FAQ
159- Calls to action
160- Mobile design
161
162Landing pages can be sold as design-only projects or as complete design-and-build services.
163
164## Business Websites
165
166Small businesses often need websites containing:
167
168- Home
169- About
170- Services
171- Contact
172- FAQ
173- Blog
174- Location information
175
176A web designer can provide the entire project including design, setup, CMS, responsive layouts, and launch.
177
178## Website Redesigns
179
180Many clients already have websites but dislike:
181
182- Outdated appearance
183- Poor mobile design
184- Confusing navigation
185- Weak conversion
186- Inconsistent branding
187- Slow content management
188
189A redesign can be easier to sell because the client already understands why a website matters.
190
191## E-commerce Design
192
193E-commerce designers work on:
194
195- Homepages
196- Product collections
197- Product pages
198- Navigation
199- Cart
200- Checkout
201- Promotional sections
202- Mobile shopping experience
203
204E-commerce work can become more valuable when design decisions directly affect purchases.
205
206## SaaS Website Design
207
208SaaS companies commonly need:
209
210- Homepage
211- Product pages
212- Features
213- Pricing page
214- Comparison pages
215- Use-case pages
216- Documentation entry pages
217
218SaaS web designers may specialize in conversion-focused marketing websites rather than application UI.
219
220## Webflow or Framer Development
221
222A designer can charge not only for the design but also for building the final website.
223
224For example:
225
226Figma design → Webflow build → Responsive setup → CMS → Forms → Domain connection → Launch
227
228This increases the amount of value delivered without requiring traditional full-stack development.
229
230## Monthly Maintenance
231
232Recurring services may include:
233
234- New landing pages
235- Text updates
236- New sections
237- Blog layout changes
238- Conversion experiments
239- Design updates
240- CMS management
241- Seasonal campaigns
242
243This can turn one-time projects into recurring revenue.
244
245# Minimum Entry Setup
246
247Web design has a relatively low financial barrier if the designer already owns a computer.
248
249
250| Requirement | Example | Starting cost |
251| --------------- | ------------------------------------- | -------------: |
252| Computer | Existing laptop or desktop | Already owned |
253| Design software | Figma Starter | Free |
254| Website builder | Webflow Starter | Free |
255| Portfolio | Figma, free site, or hosted portfolio | Free possible |
256| Fonts | Free commercial fonts available | $0 possible |
257| Stock assets | Free libraries available | $0 possible |
258| Domain | Optional when learning | Not required |
259
260
261A beginner can therefore learn and build portfolio projects without buying professional software immediately.
262
263Paid plans become more important when working with clients, collaborating with teams, using custom domains, or publishing larger websites.
264
265# Design Tool Costs
266
267## Figma
268
269Figma currently offers a free Starter plan.
270
271Its current Professional pricing includes:
272
273
274| Seat | Price |
275| ----------- | ---------: |
276| Full seat | $16/month |
277| Dev seat | $12/month |
278| Collab seat | $3/month |
279
280
281The free Starter plan currently includes:
282
283- Unlimited drafts
284- UI kits and templates
285- Limited access to Figma products
286- AI credits
287
288Professional adds features such as:
289
290- Unlimited files and folders within a team
291- Team libraries
292- Advanced prototyping
293- Improved developer handoff
294
295A solo beginner does not need a paid Figma plan to start learning web design.
296
297# Website Builder Costs
298
299## Webflow
300
301Webflow can be used for both designing and publishing websites.
302
303Its current Starter Site plan is free.
304
305Current paid Site plans include:
306
307
308| Plan | Price when billed yearly |
309| ------- | ------------------------: |
310| Starter | Free |
311| Basic | $15/month |
312| Premium | $25/month |
313
314
315The free Starter plan includes:
316
317- Webflow.io domain
318- 2 static pages
319- 1 GB bandwidth
320- Limited CMS
321- 50 form submissions
322- Webflow AI
323
324The Basic plan adds:
325
326- Custom domain
327- Up to 300 static pages
328- 10 GB bandwidth
329- Unlimited form submissions
330
331Webflow also has separate Workspace plans for designers, freelancers, and agencies.
332
333Current Workspace pricing includes:
334
335
336| Workspace | Price when billed yearly |
337| --------- | ------------------------: |
338| Starter | Free |
339| Core | $19/month |
340| Growth | $49/month |
341
342
343A freelancer can begin with a free Workspace and upgrade as the number and complexity of client projects increase.
344
345# Practical Workflow
346
347## 1. Understand the Client's Goal
348
349Before designing anything, determine why the website exists.
350
351Common goals include:
352
353- Generate leads
354- Sell products
355- Book appointments
356- Explain a service
357- Collect email subscribers
358- Sell software
359- Build trust
360- Display a portfolio
361
362A visually attractive website can still fail if it does not help the visitor take the intended action.
363
364## 2. Identify the Target Visitor
365
366Understand:
367
368- Who visits the site
369- What they want
370- What problem they have
371- What information they need
372- What would prevent them from buying
373- What action the client wants them to take
374
375This influences page structure and content hierarchy.
376
377## 3. Create the Sitemap
378
379List the required pages.
380
381For example:
382
383- Home
384- About
385- Services
386- Pricing
387- FAQ
388- Contact
389
390Avoid designing pages before the scope is clear.
391
392A five-page website and a 30-page website should not be quoted as the same project.
393
394## 4. Plan Page Structure
395
396Create a rough wireframe before spending time on detailed styling.
397
398A landing page might contain:
399
400- Hero
401- Problem
402- Solution
403- Features
404- How it works
405- Testimonials
406- Pricing
407- FAQ
408- Call to action
409
410Wireframes help solve layout and hierarchy before visual details are added.
411
412## 5. Create the Visual Direction
413
414Define:
415
416- Colors
417- Typography
418- Button style
419- Spacing
420- Image style
421- Card style
422- Icon style
423
424Use the client's existing brand system when available.
425
426If the client does not have one, clarify whether basic brand direction is included in the web design scope.
427
428## 6. Design the Main Page
429
430Design the most important page first.
431
432For many projects this is the homepage or landing page.
433
434Get approval on the overall visual direction before designing every secondary page.
435
436This can reduce expensive revisions later.
437
438## 7. Create Responsive Layouts
439
440Websites need to work across:
441
442- Desktop
443- Laptop
444- Tablet
445- Mobile
446
447Do not simply shrink the desktop layout.
448
449Mobile may require:
450
451- Different navigation
452- Stacked content
453- Shorter sections
454- Larger touch targets
455- Different spacing
456- Simplified interactions
457
458## 8. Build Reusable Components
459
460Create reusable design elements such as:
461
462- Buttons
463- Navigation
464- Cards
465- Forms
466- Testimonials
467- Pricing cards
468- Footer
469- Section headers
470
471This improves consistency and makes future changes easier.
472
473## 9. Build or Hand Off the Site
474
475If the designer also builds websites, transfer the approved design into:
476
477- Webflow
478- Framer
479- Wix
480- WordPress
481- Another website platform
482
483If a developer handles implementation, provide organized design files and clear specifications.
484
485## 10. Test the Website
486
487Before launch, check:
488
489- Mobile layouts
490- Links
491- Forms
492- Navigation
493- Buttons
494- Images
495- Typography
496- Browser behavior
497- Responsive breakpoints
498- Basic accessibility
499- Page content
500
501Also check whether calls to action lead to the correct destination.
502
503## 11. Launch and Review
504
505After publishing:
506
507- Test the live domain
508- Test forms
509- Test mobile
510- Check analytics
511- Check indexing settings
512- Confirm SSL
513- Confirm contact information
514
515A project is not complete simply because the design file looks correct.
516
517# Common Technology Stack
518
519There is no single required tool stack for web design.
520
521A practical setup may include:
522
523- **UI design:** Figma
524- **Website building:** Webflow, Framer, Wix, or WordPress
525- **Graphics:** Figma, Photoshop, Illustrator, or Canva
526- **Icons:** Licensed or free icon libraries
527- **Images:** Client assets, photography, stock libraries, or generated assets
528- **Fonts:** Google Fonts or licensed commercial fonts
529- **Client feedback:** Figma comments or project-management tools
530- **Analytics:** Google Analytics or another analytics platform
531- **SEO:** Platform SEO controls and Search Console
532- **Domain:** Client-owned domain registrar
533
534A designer does not need every tool.
535
536Figma plus one website-building platform is enough to begin offering complete small-business website projects.
537
538# Skills Required
539
540Useful skills include:
541
542- Layout
543- Typography
544- Color
545- Visual hierarchy
546- Responsive design
547- UX fundamentals
548- Wireframing
549- Prototyping
550- Basic accessibility
551- Client communication
552- Basic conversion principles
553
554Designers who also build websites may benefit from:
555
556- HTML
557- CSS
558- Basic JavaScript
559- CMS concepts
560- Domains
561- DNS
562- Hosting
563- Forms
564- Basic SEO
565
566Coding is not required for every project, but understanding how websites are implemented makes designs easier to build correctly.
567
568# How to Get the First Customer
569
570Avoid positioning the service only as:
571
572"I make websites."
573
574Choose a more specific offer.
575
576Examples:
577
578- "I design landing pages for SaaS companies."
579- "I build websites for local service businesses."
580- "I redesign outdated small-business websites."
581- "I design and build Webflow websites for startups."
582- "I create conversion-focused landing pages for paid ads."
583
584A specialized offer makes it easier for clients to understand the result they are buying.
585
586Create several portfolio projects that match the target market.
587
588For example, if targeting SaaS clients, create:
589
590- SaaS homepage
591- Pricing page
592- Feature page
593- Mobile version
594
595Do not rely only on unrelated experimental designs.
596
597# Example Starter Service
598
599## Small Business Website
600
601**Client provides:**
602
603- Logo
604- Business information
605- Services
606- Contact information
607- Existing brand assets
608- Photos if available
609
610**Designer provides:**
611
612- Homepage
613- About page
614- Services page
615- Contact page
616- Mobile-responsive design
617- Basic contact form
618- Website build
619- Domain connection
620- Two revision rounds
621
622**Optional upgrades:**
623
624- Additional pages
625- Blog
626- CMS
627- Copywriting
628- Booking integration
629- E-commerce
630- Logo design
631- Analytics
632- Ongoing maintenance
633
634This is easier to quote than offering unlimited generic web design.
635
636# Costs
637
638Potential costs include:
639
640
641| Cost | When it applies |
642| ----------------- | ----------------------------------- |
643| Design software | Paid team or collaboration features |
644| Website builder | Client site hosting |
645| Domain | If included in the service |
646| Stock photography | Commercial visual assets |
647| Fonts | Premium typography |
648| Plugins | Additional website functionality |
649| Templates | Faster starting point |
650| Hosting | Depending on platform |
651| Email | Business email setup |
652| Contractor | Development or copywriting support |
653
654
655Decide whether platform subscriptions are:
656
657- Included in the project price
658- Paid directly by the client
659- Reimbursed separately
660
661For recurring website costs, having the client own the billing account can make long-term handoff easier.
662
663# Risks / Things to Know
664
665## Scope Creep
666
667A five-page website can gradually become:
668
669- 10 pages
670- Blog
671- Booking system
672- E-commerce
673- Custom animations
674- Copywriting
675- Logo redesign
676
677Define the scope before beginning.
678
679Additional features should be priced separately.
680
681## Unlimited Revisions
682
683Unlimited revisions can destroy project profitability.
684
685Define:
686
687- Number of revision rounds
688- What counts as a revision
689- When additional work becomes billable
690
691A complete change in design direction should not automatically count as a small revision.
692
693## Content Delays
694
695Web projects often stall because the client has not prepared:
696
697- Copy
698- Product photos
699- Team photos
700- Pricing
701- Service descriptions
702- Legal pages
703
704Define who is responsible for content and when it must be delivered.
705
706## Mobile Design Can Be Underestimated
707
708Designing only the desktop version creates problems later.
709
710Responsive design should be included in the original project scope.
711
712## Platform Costs Continue After Launch
713
714A client may continue paying for:
715
716- Website hosting
717- Domain
718- CMS
719- Plugins
720- E-commerce features
721- Business email
722
723Explain recurring costs before launch.
724
725## Ownership Needs to Be Clear
726
727Clarify ownership of:
728
729- Domain
730- Website account
731- Design files
732- Photos
733- Fonts
734- Premium templates
735- Plugins
736
737Client-owned accounts are usually easier to hand over after the project ends.
738
739## Templates Increase Competition
740
741Modern website builders and AI tools make simple websites easier to produce.
742
743Competing only on the ability to place text and images on a page can create strong price pressure.
744
745Higher-value differentiation can come from:
746
747- Conversion strategy
748- Strong visual design
749- Industry specialization
750- UX
751- Copy structure
752- Brand consistency
753- Responsive quality
754- Reliable delivery
755
756# Frequently Asked Questions
757
758## What is web design?
759
760Web design is the planning and creation of a website's layout, visual style, navigation, user experience, and responsive behavior.
761
762## Do I need coding skills to become a web designer?
763
764No.
765
766Tools such as Figma, Webflow, Framer, Wix, and WordPress allow many websites to be designed and built without traditional programming.
767
768Basic HTML and CSS knowledge can still be useful.
769
770## Can I start web design for free?
771
772Yes.
773
774Figma currently has a free Starter plan, and Webflow also provides free Starter options for learning and building test projects.
775
776A paid plan may be required when publishing a client website on a custom domain.
777
778## How much do web designers charge?
779
780Upwork currently lists a median web designer range of approximately $15–$30/hour.
781
782Project pricing can vary from a few hundred dollars for a landing page to several thousand dollars for business, e-commerce, and application design.
783
784## How much can I charge for a landing page?
785
786Upwork currently gives a marketplace example of approximately $300–$1,500 for landing page design.
787
788Actual pricing depends on whether the service includes research, copywriting, responsive design, development, animations, and revisions.
789
790## How much can I charge for a business website?
791
792Upwork currently gives an example range of approximately $1,500–$5,000 for a 5–10 page business website design.
793
794A complete design-and-build service can be priced differently from design-only work.
795
796## Should I learn Figma?
797
798Figma is one of the most widely used interfaces for UI and web design and offers a free Starter plan.
799
800It is useful for wireframes, page design, components, prototypes, and developer handoff.
801
802## Should I learn Webflow or Framer?
803
804Either can be useful if you want to deliver complete websites rather than design files only.
805
806Webflow provides a strong CMS and production website platform.
807
808Framer is also widely used for visually driven marketing websites and fast publishing.
809
810The better choice depends on the type of client work you want to specialize in.
811
812## Do web designers need Photoshop?
813
814No.
815
816Many web designers can complete most interface work in Figma.
817
818Image editing tools become useful when projects require significant photo manipulation or custom graphics.
819
820## Is web design still worth learning with AI website builders?
821
822AI tools can accelerate wireframes, copy, page generation, and asset creation.
823
824However, businesses still need decisions about:
825
826- Brand
827- Layout
828- Messaging
829- Conversion
830- User experience
831- Content hierarchy
832- Mobile design
833
834Designers who use AI to work faster may be more competitive than designers who compete only on manual production.
835
836## What is the easiest web design service to start with?
837
838Landing pages and simple small-business websites are relatively easy to package because the scope can be clearly defined.
839
840## Can web design become an agency?
841
842Yes.
843
844A solo designer can expand into:
845
846- Web design
847- Webflow development
848- Framer development
849- Branding
850- Copywriting
851- SEO
852- E-commerce
853- Website maintenance
854- Conversion optimization
855
856As project volume grows, design, development, copywriting, and project management can be divided among multiple people.
857
858# Sources
859
860- [Upwork — Web Designers](https://www.upwork.com/hire/web-designers/) — Current web designer hourly rates and project pricing examples for landing pages, business websites, e-commerce sites, and custom web applications.
861- [Upwork — Web Designer Hourly Rates](https://www.upwork.com/hire/web-designers/cost/) — Current marketplace median rate of approximately $15–$30 per hour for web designers.
862- [Figma — Plans & Pricing](https://www.figma.com/pricing/) — Current Starter, Professional, Organization, and Enterprise plans and seat pricing.
863- [Webflow — Plans & Pricing](https://webflow.com/pricing) — Current Site and Workspace pricing, hosting limits, CMS access, and freelancer workspace options.
864- [Webflow — Updated Pricing and Simplified Plans for May 2026](https://help.webflow.com/hc/en-us/articles/51059955082387-Updated-pricing-and-simplified-plans-for-May-2026) — Official explanation of Webflow's 2026 Site plan and pricing changes.
865- [Framer — New Billing System](https://www.framer.com/help/articles/learn-more-about-our-new-billing-system/) — Official documentation for Framer's current site and editor billing structure.
866- [Framer — AI Credits, Simpler Plans, and Lower Prices](https://www.framer.com/blog/ai-credits-simpler-plans-and-lower-prices/) — Official 2026 update covering Framer plans, editor pricing, and AI credits.
867- [Wix — Plans & Pricing](https://www.wix.com/plans) — Current Wix website plans, hosting, custom-domain, business, and e-commerce features.