-
Notifications
You must be signed in to change notification settings - Fork 0
/
web-design-process-explained-12-easy-steps.html
334 lines (318 loc) · 21.7 KB
/
web-design-process-explained-12-easy-steps.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
---
permalink: /web-design-process-explained-12-easy-steps/
---
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/029ff40d7b.js" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XVK8SSNQSC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XVK8SSNQSC');
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "The Web Design Process Explained in 12 Easy Steps",
"image":
"https://sybiltec.com/images/ux-work-womans-hands-drawing-wireframe-350x183.jpg",
"datePublished": "2023-05-29T16:00:00+01:00",
"dateModified": "2024-05-21T09:00:00+01:00",
"author": [
{
"@type": "Person",
"name": "Sybil Mayard",
"url": "https://sybiltec.com/"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://sybiltec.com/"
},{
"@type": "ListItem",
"position": 2,
"name": "The Web Design Process Explained in 12 Easy Steps"
}]
}
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Web Design Process Explained in 12 Easy Steps | Sybiltec</title>
<meta name="Description" content="Thank you for considering me as your web designer. If you're wondering what the web design process looks like, read this article to understand what's involved.">
<meta name="robots" content="all">
<link rel="canonical" href="https://sybiltec.com/web-design-process-explained-12-easy-steps/">
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="website" />
<meta property="og:title" content="The Web Design Process Explained in 12 Easy Steps | Sybiltec" />
<meta property="og:description" content="Thank you for considering me as your web designer. If you're wondering what the web design process looks like, read this article to understand what's involved." />
<meta property="og:url" content="https://sybiltec.com/web-design-process-explained-12-easy-steps/" />
<meta property="og:site_name" content="Sybiltec" />
<meta property="og:image" content="https://sybiltec.com/images/ux-work-womans-hands-drawing-wireframe-350x183.jpg" />
<meta property="article:published_time" content="2023-05-29T16:00:00+01:00" />
<meta property="article:modified_time" content="2024-05-21T09:00:00+01:00" />
<meta property="article:tag" content="web design" />
<meta property="article:author" content="Sybil Mayard" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@sybiltec" />
<meta name="twitter:site" content="@sybiltec" />
<meta name="twitter:label1" content="Written by">
<meta name="twitter:data1" content="Sybil Mayard">
<meta name="twitter:label2" content="Estimated reading time">
<meta name="twitter:data2" content="10 minutes">
<meta name="google-site-verification" content="4CQdjA8VuHHdJlLAeL33JXUNCcg92x6Yy2MK2H-F5rs" />
<meta name="geo.region" content="GB" />
<meta name="geo.placename" content="London" />
<meta name="geo.position" content="51.495673;0.141465" />
<meta name="ICBM" content="51.495673, 0.141465" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"image": "https://sybiltec.com/images/logos/sybiltec-logo-social.png",
"name": "Sybiltec Web Design",
"address": {
"@type": "PostalAddress",
"streetAddress": "2 Veridion Way",
"addressLocality": "Bexley",
"addressRegion": "London",
"postalCode": "DA18 4AL",
"addressCountry": "GB"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 51.495673,
"longitude": 0.141465
},
"url": "https://sybiltec.com",
"telephone": "+447768059730",
"priceRange": "$$",
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "09:00",
"closes": "18:00"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"image": "https://sybiltec.com/images/logos/sybiltec-logo-social.png",
"url": "https://www.sybiltec.com",
"sameAs": ["https://www.instagram.com/sybiltec/", "https://www.facebook.com/sybiltec", "https://www.linkedin.com/company/sybiltec/"],
"logo": "https://sybiltec.com/favicon.png",
"name": "Sybiltec Web Design",
"description": "Sybiltec provides web design services to small businesses in the South East London region and surrounding areas. Whether you are looking to build your first website or redesign an existing one, we offer a service that's right for you. Services include: small business websites, e-commerce websites and online learning platforms. We work with Shopify, WordPress, Wix, WooCommerce and LearnDash.",
"email": "info@sybiltec.com",
"telephone": "+447768059730",
"address": {
"@type": "PostalAddress",
"streetAddress": "2 Veridion Way",
"addressLocality": "Bexley",
"addressCountry": "GB",
"addressRegion": "London",
"postalCode": "DA18 4AL"
}
}
</script>
<link rel="stylesheet" href="https://sybiltec.com/styles.min.css" type="text/css">
<link rel="icon" type="image/png" href="https://sybiltec.com/favicon.png">
</head>
<body>
<div class="announcement-bar">
<div class="container-1140">
<span><i class="fa-regular fa-envelope"></i><a href="mailto:info@sybiltec.com" target="_blank">info@sybiltec.com</a></span>
</div>
</div>
<div class="header">
<div class="container-1140">
<div class="row">
<div class="col-2">
<div class="logo">
<a href="/"><img src="https://sybiltec.com/images/logos/low-res/sybiltec.webp" alt="Sybiltec Web Design"></a>
</div>
</div>
<div class="col-10">
<div class="nav">
<div class="topnav" id="myTopnav">
<a href="/">Home</a>
<a href="https://sybiltec.com/about/">About</a>
<a href="https://sybiltec.com/services/">Services</a>
<a href="https://sybiltec.com/clients/">Clients</a>
<a href="https://sybiltec.com/faqs/">FAQs</a>
<a href="https://sybiltec.com/blog/">Blog</a>
<a href="https://sybiltec.com/contact/" class="btn-contact">Contact Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero center">
<div class="container-1140">
<h1>The Web Design Process Explained in 12 Easy Steps</h1>
</div>
</div>
<div class="main section">
<div class="container-1140">
<ol class="breadcrumb">
<li>
<a href="https://sybiltec.com">Home</a>
</li>
>
<li>
The Web Design Process Explained in 12 Easy Steps
</li>
</ol>
<p>Date updated: 21 May 2024 | by Sybil Mayard</p>
<p>Thank you so much for considering designing a website with us - you've certainly made the right choice. If you're interested to know what our <strong>web design process</strong> is like, I've outlined the steps below to help you understand what is involved.</p>
<h2>1. Initial Consultation</h2>
<p>You've shown interest in our services, so the first step will be for us to discuss your requirements and determine whether we'd be a good fit for your project. This consultation will be in the form of a Zoom call or an in-person meeting, depending on your location. I will ask you questions about yourself, your business, your requirements for the website and what you would like your website to achieve. To maximise our time together, we recommend that you do a little preparation before the meeting so please think about aspects such as website structure/content, branding, your budget, your preferred website builder platform, and additional services you may need (e.g. copywriting, SEO, logo design etc.) You'll also have the opportunity to ask me any relevant questions about my background, skills, services and pricing. After the meeting I'll send a follow-up email to summarise what we discussed along with a quote for the services to be provided.</p>
<h2>2. Paperwork</h2>
<p>You've chosen to go ahead with the project, and you have let me know that you want to get started right away - great! I will send you an agreement summarising my terms, which will need to be signed and dated by you. I will also ask for a deposit to be paid, which will be 25-50% of the total cost. Once I have received the signed agreement and the deposit, we will begin the work.</p>
<h2>3. Sitemap</h2>
<p>Based on what we discussed during the initial consultation, we will create a sitemap of the website. This is a diagram that outlines all of the pages and how they are linked together. The sitemap helps us to determine the structure of the website and to identify how the website can provide your visitors with the best experience possible. Click here for an <a href="https://drive.google.com/file/d/1LoEZ5FUMFVi9wgWL2EBNb-f967I2TIM3/view?usp=sharing" target="_blank" rel="noopener noreferrer">example of a sitemap</a>.</p>
<h2>4. Homepage Design</h2>
<p>Your homepage is usually the first page that your visitors will see, so I'll begin with creating the homepage design. The design will be created keeping in mind the branding requirements that we discussed during our initial consultation (colours, fonts, logos, and look and feel). The design will be produced using the online prototyping tool Figma. Once complete, I will send you a link to the design for review. You will be able to view and scroll the design in your browser just like an actual webpage, but as this is a prototype, functionality will be limited so buttons and links won't be clickable. I may also use placeholder images and text - these are temporary, and will be replaced with the actual images and text later during the website build process.</p>
<p>Please allow at least three working days for the homepage design to be created. If you have requested for our copywriting service, it may take a few more days for the designs to be created as I will need to liaise with my copyrwriter to ensure that the design and copy fit perfectly together.</p>
<h2>5. 1st Design Review</h2>
<p>Once you have received the link to the homepage design and had time to review it thoroughly, please provide me with your feedback. There is no particular format for this - you can comment directly on the Figma file, or send your comments via email. If you prefer, we can schedule a meeting and discuss your feedback if that is easier.</p>
<h2>6. Amendments and 2nd Design Review</h2>
<p>You've given me your feedback, so I will make the changes to the homepage design accordingly. Once again, we will ask you to review this second version of the design. I do ask that we limit the number of revisions to two, however, if you would like additional revisions please let me know. Each additional revision will be charged at a rate of £150.00.</p>
<h2>7. Designs For the Other Pages</h2>
<p>I will create designs for the other main pages of your website, following the same process as outlined in steps 4 and 5, above. The "main" pages would usually be the blog page, product page (if you have an e-commerce business), the About Us page and the Contact page. All pages will be designed in line with the design of the homepage.</p>
<h2>8. Website Build</h2>
<p>It's now time to start developing your website. During our initial consultation, you would have indicated whether you have a preference for the platform to be used for building your website. If you do not have a preference, I will choose the platform which is most suited to your requirements (Wix, WordPress or Shopify). The website build process takes around 1-2 weeks to complete.</p>
<h2>9. Domain and Email Setup</h2>
<p>If you have already purchased a domain, please grant me access to your domain provider so I can configure the domain and connect it to your website. If you do not have a domain already, then I can work with you to identify the best domain (and email) package for your needs. Once your domain has been connected to your website, it will be live on the internet but I'll ensure that it isn't indexed by search engines, so it won't show up in search engine results pages (SERPs).</p>
<h2>10. Testing</h2>
<p>To ensure that your website functions well, I will carry out thorough testing. This stage includes testing of links, buttons, contact forms, newsletter signup forms and any other systems associated with the website (e.g. email marketing platform). I will check every page to ensure that text, images and any other components are displaying correctly on both desktop and mobile devices. Finally, all content that is written in English will be proofread (if you have provided me with any non-English content, I do ask if you can ensure that it has been proofread beforehand).</p>
<h2>11. Launch</h2>
<p>Congratulations, your website is now live! A few more tasks need to be done, including submitting your website to Google Search Console to track search performance, and setting up Google Analytics to monitor visitor behaviour. You will be provided with access to all of the relevant platforms.</p>
<h2>12. Post-Launch</h2>
<p>We are confident that you will be delighted with your new website, however, if you do have any questions or concerns, please reach out to me as soon as possible and I'll do my best to resolve the issue. If you have indicated that you would like to edit the website yourself, I will arrange a session with you to explain how to make changes to the website. Alternatively, you can choose one of our website maintenance packages if you would prefer for us to handle the website changes. Finally, I will ask you to provide me with a Google Review (I may publish your review on other platforms such as social media or on this website).</p>
</div>
</div>
<div class="contact section">
<div class="container-1140">
<div class="row">
<div class="col-8">
<h3>Would You Like To Start A Project With Us?</h3>
<p>Click the contact button to get in touch with your requirements</p>
</div>
<div class="col-4">
<a class="btn-primary" href="https://sybiltec.com/contact/">Contact Us</a>
</div>
</div>
</div>
</div>
<div class="footer section">
<div class="container-1140">
<div class="row">
<div class="col-3">
<h4>Links</h4>
<p><a href="/">Home</a></p>
<p><a href="https://sybiltec.com/about/">About</a></p>
<p><a href="https://sybiltec.com/contact/">Contact</a></p>
<p><a href="https://sybiltec.com/terms-and-conditions/">Terms and Conditions</a></p>
<p><a href="https://sybiltec.com/privacy-notice/">Privacy Notice</a></p>
<p><a href="https://sybiltec.com/sitemap/">Sitemap</a></p>
</div>
<div class="col-3">
<h4>Services</h4>
<p><a href="https://sybiltec.com/ecommerce-websites/">E-commerce Websites</a></p>
<p><a href="https://sybiltec.com/website-review/">Website Review</a></p>
<p><a href="https://sybiltec.com/website-design/">Web Design</a></p>
<p><a href="https://sybiltec.com/website-maintenance/">Website Maintenance</a></p>
<p><a href="https://sybiltec.com/training/">Training</a></p>
<p><a href="https://sybiltec.com/leaflet-design/">Leaflet Design</a></p>
</div>
<div class="col-3">
<div class="ml-form-embed"
data-account="2216689:x9i7o3w7n4"
data-form="5270027:e5c2j0">
</div>
<h4>Address</h4>
<p>The Engine House<br>2 Veridion Way<br>Erith DA18 4AL</p>
</div>
<div class="col-3">
<h4>Get in Touch</h4>
<p>
<p><a href="mailto:info@sybiltec.com?subject=Website Enquiry">info@sybiltec.com</a></p>
<a href="https://www.linkedin.com/in/sybil-m" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-linkedin"></i></a>
<a href="https://instagram.com/sybiltec/" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-instagram"></i></a>
<a href="https://www.pinterest.co.uk/sybiltec/" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-pinterest"></i></a>
<a href="https://www.facebook.com/sybiltec" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-facebook"></i></a>
<a href="https://x.com/sybiltec" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-x-twitter"></i></a>
</p>
<p>
<a href="https://www.uksmallbusinessdirectory.co.uk/bid/284687/" rel="noopener noreferrer" target="_blank"><img src="https://www.uksmallbusinessdirectory.co.uk/links/uksbd-100.png" alt="Business Directory"></a>
</p>
</div>
</div>
</div>
<div class="copyright section center"><p>Copyright ©
<span id="year"></span> Sybiltec Web Design</p>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function toggleDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
console.log("click");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
</body>
</html>