IncomeWikiRevision 1
Web Design
@namkyu · Sep 1, 2026, 8:10 AM
Added web design pricing, tools, workflow, services, and risks.+22,769−0
Category: Remote Work Page title: Web design is the process of planning and creating the visual layout, user experience, structure, and interactive elements of websites.
Web 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.
Item | Details |
|---|---|
Business model | Freelancing, agency services, contract work, retainers |
Typical customers | Small businesses, startups, creators, SaaS companies, e-commerce brands |
Common deliverables | Landing pages, business websites, redesigns, UI designs, e-commerce sites |
Coding required | Not always |
Common tools | Figma, Webflow, Framer, Wix, WordPress |
Upwork web designer rate | $15–$30/hour |
Landing page project | $300–$1,500 |
Business website design | $1,500–$5,000 |
E-commerce website design | $3,000–$10,000 |
Custom web application design |
Canonical Markdown
1
Category: Remote Work2
Page title: 3
Web design is the process of planning and creating the visual layout, user experience, structure, and interactive elements of websites.4
5
Web 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 Facts8
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 Do27
28
Web design includes more than choosing colors and fonts.29
30
Common work includes:31
32
- Planning page structure33
- Creating wireframes34
- Designing layouts35
- Choosing typography36
- Creating color systems37
- Designing navigation38
- Creating responsive mobile layouts39
- Designing buttons and forms40
- Improving user experience41
- Creating reusable components42
- Preparing assets43
- Building prototypes44
- Working with developers45
- Building websites in no-code or low-code platforms46
- Testing the final site on different screen sizes47
48
Some web designers only provide design files.49
50
Others provide a complete service from planning through launch.51
52
# Web Design vs Web Development53
54
Web design and web development overlap but are not identical.55
56
**Web design** primarily focuses on:57
58
- Layout59
- Visual design60
- User experience61
- Typography62
- Navigation63
- Responsive behavior64
- Page structure65
66
**Web development** focuses more on:67
68
- Frontend code69
- Backend systems70
- Databases71
- Authentication72
- APIs73
- Custom application logic74
75
Tools 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
# Earnings78
79
Web designers can charge hourly, per page, per project, or through ongoing maintenance retainers.80
81
## Hourly Rates82
83
Upwork currently lists web designers at approximately **$15–$30 per hour** as its median marketplace range.84
85
Actual rates can be considerably higher for designers with expertise in:86
87
- Conversion-focused landing pages88
- SaaS websites89
- E-commerce90
- UX strategy91
- Webflow development92
- Branding93
- Complex web applications94
95
Marketplace rates should be treated as hiring benchmarks rather than guaranteed income.96
97
# Project Pricing98
99
Upwork 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
110
A landing page project may include:111
112
- One page113
- Responsive design114
- Call-to-action placement115
- Basic visual hierarchy116
117
A business website may include:118
119
- 5–10 pages120
- Custom layouts121
- CMS integration122
- Responsive design123
- Brand-consistent UI124
125
E-commerce projects can cost more because they may include:126
127
- Product pages128
- Collections129
- Cart design130
- Checkout flow131
- Search132
- Navigation133
- Payment integration134
- Mobile optimization135
136
# How It Makes Money137
138
## Landing Page Design139
140
Landing pages are one of the simplest web design services to package.141
142
Common customers include:143
144
- SaaS companies145
- Agencies146
- App developers147
- Consultants148
- Course creators149
- Advertising campaigns150
151
A service may include:152
153
- Page structure154
- Hero section155
- Features156
- Social proof157
- Pricing158
- FAQ159
- Calls to action160
- Mobile design161
162
Landing pages can be sold as design-only projects or as complete design-and-build services.163
164
## Business Websites165
166
Small businesses often need websites containing:167
168
- Home169
- About170
- Services171
- Contact172
- FAQ173
- Blog174
- Location information175
176
A web designer can provide the entire project including design, setup, CMS, responsive layouts, and launch.177
178
## Website Redesigns179
180
Many clients already have websites but dislike:181
182
- Outdated appearance183
- Poor mobile design184
- Confusing navigation185
- Weak conversion186
- Inconsistent branding187
- Slow content management188
189
A redesign can be easier to sell because the client already understands why a website matters.190
191
## E-commerce Design192
193
E-commerce designers work on:194
195
- Homepages196
- Product collections197
- Product pages198
- Navigation199
- Cart200
- Checkout201
- Promotional sections202
- Mobile shopping experience203
204
E-commerce work can become more valuable when design decisions directly affect purchases.205
206
## SaaS Website Design207
208
SaaS companies commonly need:209
210
- Homepage211
- Product pages212
- Features213
- Pricing page214
- Comparison pages215
- Use-case pages216
- Documentation entry pages217
218
SaaS web designers may specialize in conversion-focused marketing websites rather than application UI.219
220
## Webflow or Framer Development221
222
A designer can charge not only for the design but also for building the final website.223
224
For example:225
226
Figma design → Webflow build → Responsive setup → CMS → Forms → Domain connection → Launch227
228
This increases the amount of value delivered without requiring traditional full-stack development.229
230
## Monthly Maintenance231
232
Recurring services may include:233
234
- New landing pages235
- Text updates236
- New sections237
- Blog layout changes238
- Conversion experiments239
- Design updates240
- CMS management241
- Seasonal campaigns242
243
This can turn one-time projects into recurring revenue.244
245
# Minimum Entry Setup246
247
Web 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
261
A beginner can therefore learn and build portfolio projects without buying professional software immediately.262
263
Paid plans become more important when working with clients, collaborating with teams, using custom domains, or publishing larger websites.264
265
# Design Tool Costs266
267
## Figma268
269
Figma currently offers a free Starter plan.270
271
Its 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
281
The free Starter plan currently includes:282
283
- Unlimited drafts284
- UI kits and templates285
- Limited access to Figma products286
- AI credits287
288
Professional adds features such as:289
290
- Unlimited files and folders within a team291
- Team libraries292
- Advanced prototyping293
- Improved developer handoff294
295
A solo beginner does not need a paid Figma plan to start learning web design.296
297
# Website Builder Costs298
299
## Webflow300
301
Webflow can be used for both designing and publishing websites.302
303
Its current Starter Site plan is free.304
305
Current 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
315
The free Starter plan includes:316
317
- Webflow.io domain318
- 2 static pages319
- 1 GB bandwidth320
- Limited CMS321
- 50 form submissions322
- Webflow AI323
324
The Basic plan adds:325
326
- Custom domain327
- Up to 300 static pages328
- 10 GB bandwidth329
- Unlimited form submissions330
331
Webflow also has separate Workspace plans for designers, freelancers, and agencies.332
333
Current 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
343
A freelancer can begin with a free Workspace and upgrade as the number and complexity of client projects increase.344
345
# Practical Workflow346
347
## 1. Understand the Client's Goal348
349
Before designing anything, determine why the website exists.350
351
Common goals include:352
353
- Generate leads354
- Sell products355
- Book appointments356
- Explain a service357
- Collect email subscribers358
- Sell software359
- Build trust360
- Display a portfolio361
362
A visually attractive website can still fail if it does not help the visitor take the intended action.363
364
## 2. Identify the Target Visitor365
366
Understand:367
368
- Who visits the site369
- What they want370
- What problem they have371
- What information they need372
- What would prevent them from buying373
- What action the client wants them to take374
375
This influences page structure and content hierarchy.376
377
## 3. Create the Sitemap378
379
List the required pages.380
381
For example:382
383
- Home384
- About385
- Services386
- Pricing387
- FAQ388
- Contact389
390
Avoid designing pages before the scope is clear.391
392
A five-page website and a 30-page website should not be quoted as the same project.393
394
## 4. Plan Page Structure395
396
Create a rough wireframe before spending time on detailed styling.397
398
A landing page might contain:399
400
- Hero401
- Problem402
- Solution403
- Features404
- How it works405
- Testimonials406
- Pricing407
- FAQ408
- Call to action409
410
Wireframes help solve layout and hierarchy before visual details are added.411
412
## 5. Create the Visual Direction413
414
Define:415
416
- Colors417
- Typography418
- Button style419
- Spacing420
- Image style421
- Card style422
- Icon style423
424
Use the client's existing brand system when available.425
426
If the client does not have one, clarify whether basic brand direction is included in the web design scope.427
428
## 6. Design the Main Page429
430
Design the most important page first.431
432
For many projects this is the homepage or landing page.433
434
Get approval on the overall visual direction before designing every secondary page.435
436
This can reduce expensive revisions later.437
438
## 7. Create Responsive Layouts439
440
Websites need to work across:441
442
- Desktop443
- Laptop444
- Tablet445
- Mobile446
447
Do not simply shrink the desktop layout.448
449
Mobile may require:450
451
- Different navigation452
- Stacked content453
- Shorter sections454
- Larger touch targets455
- Different spacing456
- Simplified interactions457
458
## 8. Build Reusable Components459
460
Create reusable design elements such as:461
462
- Buttons463
- Navigation464
- Cards465
- Forms466
- Testimonials467
- Pricing cards468
- Footer469
- Section headers470
471
This improves consistency and makes future changes easier.472
473
## 9. Build or Hand Off the Site474
475
If the designer also builds websites, transfer the approved design into:476
477
- Webflow478
- Framer479
- Wix480
- WordPress481
- Another website platform482
483
If a developer handles implementation, provide organized design files and clear specifications.484
485
## 10. Test the Website486
487
Before launch, check:488
489
- Mobile layouts490
- Links491
- Forms492
- Navigation493
- Buttons494
- Images495
- Typography496
- Browser behavior497
- Responsive breakpoints498
- Basic accessibility499
- Page content500
501
Also check whether calls to action lead to the correct destination.502
503
## 11. Launch and Review504
505
After publishing:506
507
- Test the live domain508
- Test forms509
- Test mobile510
- Check analytics511
- Check indexing settings512
- Confirm SSL513
- Confirm contact information514
515
A project is not complete simply because the design file looks correct.516
517
# Common Technology Stack518
519
There is no single required tool stack for web design.520
521
A practical setup may include:522
523
- **UI design:** Figma524
- **Website building:** Webflow, Framer, Wix, or WordPress525
- **Graphics:** Figma, Photoshop, Illustrator, or Canva526
- **Icons:** Licensed or free icon libraries527
- **Images:** Client assets, photography, stock libraries, or generated assets528
- **Fonts:** Google Fonts or licensed commercial fonts529
- **Client feedback:** Figma comments or project-management tools530
- **Analytics:** Google Analytics or another analytics platform531
- **SEO:** Platform SEO controls and Search Console532
- **Domain:** Client-owned domain registrar533
534
A designer does not need every tool.535
536
Figma plus one website-building platform is enough to begin offering complete small-business website projects.537
538
# Skills Required539
540
Useful skills include:541
542
- Layout543
- Typography544
- Color545
- Visual hierarchy546
- Responsive design547
- UX fundamentals548
- Wireframing549
- Prototyping550
- Basic accessibility551
- Client communication552
- Basic conversion principles553
554
Designers who also build websites may benefit from:555
556
- HTML557
- CSS558
- Basic JavaScript559
- CMS concepts560
- Domains561
- DNS562
- Hosting563
- Forms564
- Basic SEO565
566
Coding 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 Customer569
570
Avoid positioning the service only as:571
572
"I make websites."573
574
Choose a more specific offer.575
576
Examples: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
584
A specialized offer makes it easier for clients to understand the result they are buying.585
586
Create several portfolio projects that match the target market.587
588
For example, if targeting SaaS clients, create:589
590
- SaaS homepage591
- Pricing page592
- Feature page593
- Mobile version594
595
Do not rely only on unrelated experimental designs.596
597
# Example Starter Service598
599
## Small Business Website600
601
**Client provides:**602
603
- Logo604
- Business information605
- Services606
- Contact information607
- Existing brand assets608
- Photos if available609
610
**Designer provides:**611
612
- Homepage613
- About page614
- Services page615
- Contact page616
- Mobile-responsive design617
- Basic contact form618
- Website build619
- Domain connection620
- Two revision rounds621
622
**Optional upgrades:**623
624
- Additional pages625
- Blog626
- CMS627
- Copywriting628
- Booking integration629
- E-commerce630
- Logo design631
- Analytics632
- Ongoing maintenance633
634
This is easier to quote than offering unlimited generic web design.635
636
# Costs637
638
Potential 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
655
Decide whether platform subscriptions are:656
657
- Included in the project price658
- Paid directly by the client659
- Reimbursed separately660
661
For recurring website costs, having the client own the billing account can make long-term handoff easier.662
663
# Risks / Things to Know664
665
## Scope Creep666
667
A five-page website can gradually become:668
669
- 10 pages670
- Blog671
- Booking system672
- E-commerce673
- Custom animations674
- Copywriting675
- Logo redesign676
677
Define the scope before beginning.678
679
Additional features should be priced separately.680
681
## Unlimited Revisions682
683
Unlimited revisions can destroy project profitability.684
685
Define:686
687
- Number of revision rounds688
- What counts as a revision689
- When additional work becomes billable690
691
A complete change in design direction should not automatically count as a small revision.692
693
## Content Delays694
695
Web projects often stall because the client has not prepared:696
697
- Copy698
- Product photos699
- Team photos700
- Pricing701
- Service descriptions702
- Legal pages703
704
Define who is responsible for content and when it must be delivered.705
706
## Mobile Design Can Be Underestimated707
708
Designing only the desktop version creates problems later.709
710
Responsive design should be included in the original project scope.711
712
## Platform Costs Continue After Launch713
714
A client may continue paying for:715
716
- Website hosting717
- Domain718
- CMS719
- Plugins720
- E-commerce features721
- Business email722
723
Explain recurring costs before launch.724
725
## Ownership Needs to Be Clear726
727
Clarify ownership of:728
729
- Domain730
- Website account731
- Design files732
- Photos733
- Fonts734
- Premium templates735
- Plugins736
737
Client-owned accounts are usually easier to hand over after the project ends.738
739
## Templates Increase Competition740
741
Modern website builders and AI tools make simple websites easier to produce.742
743
Competing only on the ability to place text and images on a page can create strong price pressure.744
745
Higher-value differentiation can come from:746
747
- Conversion strategy748
- Strong visual design749
- Industry specialization750
- UX751
- Copy structure752
- Brand consistency753
- Responsive quality754
- Reliable delivery755
756
# Frequently Asked Questions757
758
## What is web design?759
760
Web 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
764
No.765
766
Tools such as Figma, Webflow, Framer, Wix, and WordPress allow many websites to be designed and built without traditional programming.767
768
Basic HTML and CSS knowledge can still be useful.769
770
## Can I start web design for free?771
772
Yes.773
774
Figma currently has a free Starter plan, and Webflow also provides free Starter options for learning and building test projects.775
776
A paid plan may be required when publishing a client website on a custom domain.777
778
## How much do web designers charge?779
780
Upwork currently lists a median web designer range of approximately $15–$30/hour.781
782
Project 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
786
Upwork currently gives a marketplace example of approximately $300–$1,500 for landing page design.787
788
Actual 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
792
Upwork currently gives an example range of approximately $1,500–$5,000 for a 5–10 page business website design.793
794
A complete design-and-build service can be priced differently from design-only work.795
796
## Should I learn Figma?797
798
Figma is one of the most widely used interfaces for UI and web design and offers a free Starter plan.799
800
It is useful for wireframes, page design, components, prototypes, and developer handoff.801
802
## Should I learn Webflow or Framer?803
804
Either can be useful if you want to deliver complete websites rather than design files only.805
806
Webflow provides a strong CMS and production website platform.807
808
Framer is also widely used for visually driven marketing websites and fast publishing.809
810
The better choice depends on the type of client work you want to specialize in.811
812
## Do web designers need Photoshop?813
814
No.815
816
Many web designers can complete most interface work in Figma.817
818
Image 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
822
AI tools can accelerate wireframes, copy, page generation, and asset creation.823
824
However, businesses still need decisions about:825
826
- Brand827
- Layout828
- Messaging829
- Conversion830
- User experience831
- Content hierarchy832
- Mobile design833
834
Designers 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
838
Landing 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
842
Yes.843
844
A solo designer can expand into:845
846
- Web design847
- Webflow development848
- Framer development849
- Branding850
- Copywriting851
- SEO852
- E-commerce853
- Website maintenance854
- Conversion optimization855
856
As project volume grows, design, development, copywriting, and project management can be divided among multiple people.857
858
# Sources859
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.