{"id":7691,"date":"2020-04-13T10:00:10","date_gmt":"2020-04-13T04:30:10","guid":{"rendered":"https:\/\/vividreal.co.in\/vividreal\/?p=7691"},"modified":"2020-04-13T10:00:10","modified_gmt":"2020-04-13T04:30:10","slug":"the-web-design-process","status":"publish","type":"post","link":"https:\/\/vividreal.co.in\/vividreal\/the-web-design-process\/","title":{"rendered":"The Web Design Process"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">What most people don\u2019t realise is that creating a website is a long process. A lot of time is spent on discussions, planning, creating sitemaps, designing, and even more on testing. But unlike building a house or a sculpture, website development usually never stops even after the website has been published! Call it a developers\u2019 curse if you will. But this also means more work which can translate into more money in your pocket!<\/span><\/p>\n<p>If you&#8217;re looking to get a website built, we have a talented team of web designers and developers who&#8217;d love to help. <a href=\"https:\/\/vividreal.co.in\/vividreal\/web-design\/\">Check us out here.<\/a><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we shall discuss the web design process. Here\u2019s how you can streamline the entire process to create beautiful, functional websites and how to deliver them on time, every time. Let\u2019s begin.<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Do your research.<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7696 size-full\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Do-your-research.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Do-your-research.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Do-your-research-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Before you even start planning your website, there\u2019s something you should do. If you\u2019re designing a website for a client, research them intensively. Find out everything about who they are, what they do, how long have they been doing this. Every little detail about their brand will help you create a better experience for the website visitors.<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Set your goals.<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7700 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Set-your-goals.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Set-your-goals.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Set-your-goals-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">A website attracts more people to a brand and helps them understand the brand better. This improves brand awareness, and even sales, if that\u2019s what you\u2019re looking for. Every element on a website must work towards a definite set of goals.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The very first thing you should do before creating a website is to discuss the goals of the website. Conduct a meeting with your client and discuss details about the website. What is the website\u2019s purpose? Is it to provide information? Is it for eCommerce?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also need to discuss other things like the type of audience they expect they want to attract. Another way of figuring out what a client wants in their website is to ask about their competitors or other websites that they like. Ask them what they like on those websites, and what they don\u2019t. Use those websites as a reference.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Discussion of goals is the most important part of the entire project. If these details are not discussed properly in the beginning, a lot of time will be wasted on doing the wrong things and then on fixing them. Save time, and prevent headaches by going down to details with your client at the very beginning of the project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At Vividreal, we ask our client to fill up a questionnaire. It will have questions about their favourite websites, and what they like and dislike on those websites. If we\u2019re designing a logo for them, we\u2019ll also let them choose from a few random logos, to get a better idea of what they are expecting.<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Scope of the project.<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7699 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Scope-of-the-project.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Scope-of-the-project.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Scope-of-the-project-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The project has a chance of growing as time passes. Discuss the scope of the project with the client. As the site gains more popularity, you might be asked to create additional pages, newsletters, web apps and more.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a board or a sheet with all the details you need. Separate goals into tasks and put a checkbox next to it, creating a todo list. Calculate how much time is needed for all the tasks, this will come handy when you\u2019re sending out a project proposal or while creating a contract.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This step is also where you plan out all the necessary pages and features the website will need to reach its goals.0<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Creating a sitemap.<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7694 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Creating-a-sitemap.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Creating-a-sitemap.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Creating-a-sitemap-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">A sitemap is basically the blueprint of a website. You\u2019ll need to create one to make sure you have a clear idea of how the website is supposed to run. There are many tools out there that will help with the creation of a sitemap, but you could make one just by using a pen and a piece of paper.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this step, you create a basic plan to understand how the different pages and features on your website can interrelate to each other. You can also create a wireframe to get a visual idea of the website and its pages.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some tools you can use to create a sitemap:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.xml-sitemaps.com\/\"><span style=\"font-weight: 400;\">XML-Sitemaps.com<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.gloomaps.com\/\"><span style=\"font-weight: 400;\">GlooMaps<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/flowmapp.com\/\"><span style=\"font-weight: 400;\">Flowmapp<\/span><\/a><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Once your sitemap is complete, you can start creating one of the most crucial things you need on your site, good content!<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Creating content.<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7695 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/creating-content.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/creating-content.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/creating-content-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Content on a website primarily performs two major functions: Engaging the audience to take action that paves the way to the completion of your goals, and SEO! Good content is necessary for your website to rank organically on SERPs. We have a great article on free content writing tools that you can use. Check it out <\/span><a href=\"https:\/\/vividreal.co.in\/vividreal\/online-tools-for-great-copywriting\/\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Visual Style<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7696 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Do-your-research.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Do-your-research.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Do-your-research-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s where the designer gets to show off his talent. If the client already has a brand guideline and a theme or a palette of colours that they use to represent themselves, you could use those to design the web pages. If you\u2019re stuck and need some inspiration, check out some hot <\/span><a href=\"https:\/\/vividreal.co.in\/vividreal\/web-design-trends-for-2020-curated\/\"><b>web design trends currently popular in 2020 here<\/b><span style=\"font-weight: 400;\">.<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Try to incorporate high res images in your design. This gives you a more professional and user-friendly look. A design with no images might look robotic and sometimes bland. Images on a page make it seem easier to understand.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Images with large size can, however, slow down your page loading speeds. You can make use of online tools to compress images without losing quality. This way you can display high res images, without compromising on the website loading speed.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If images aren\u2019t your thing, you could also experiment with art, doodles, etc. Just make sure they\u2019re responsive and translate well across all devices.<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Testing time!<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7701 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Testing-time.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Testing-time.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Testing-time-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This is probably the most frustrating part of the process. You\u2019ll have to check every page and make sure every link, every button and every feature is working fine. Check all the bells and whistles of the website and fix all the coding issues that might be present.\u00a0<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Launch<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7697 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/launch.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/launch.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/launch-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">I wish I could say finally! It\u2019s launch time! But sadly, with web design, the launch is usually never the final step. After careful testing, and approval from the client, you can launch the site. Pop open a tiny bottle of sparkling champagne but don\u2019t celebrate for too long. Web design is an ongoing process, you\u2019ll have to maintain the website and solve bugs, coding issues and more.<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"color: #00ccff;\"><b>Maintenance<\/b><\/span><\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7698 aligncenter\" src=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Mainenance.png\" alt=\"\" width=\"600\" height=\"334\" srcset=\"https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Mainenance.png 600w, https:\/\/vividreal.co.in\/vividreal\/wp-content\/uploads\/2020\/04\/Mainenance-300x167.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Over due course, you will stumble upon bugs and coding issues and you\u2019ll have to fix them. The honest truth is, bugs are inevitable. But you can minimise problems at this stage with careful planning throughout the website design process.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Web design isn\u2019t just about making sure a website runs smoothly, and how beautiful it looks. Great web design is actually about the streamlined process that aligns with a strategy to achieve the goals of a client. Hopefully, this article will help you design a strategy to plan, build, and deliver the best possible website(s) right on time. You can always contact the web heads here at Vividreal for anything related to web development and design! Find us <a href=\"https:\/\/vividreal.co.in\/vividreal\/web-design\/\">here<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What most people don\u2019t realise is that creating a website is a long process. A lot of time is spent on discussions, planning, creating sitemaps, designing, and even more on testing. But unlike building a house or a sculpture, website development usually never stops even after the website has been published! Call it a developers\u2019 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":7693,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[34,37,38],"tags":[175,106],"class_list":["post-7691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-web-design","category-web-development","tag-dev","tag-website"],"_links":{"self":[{"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/posts\/7691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/comments?post=7691"}],"version-history":[{"count":0,"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/posts\/7691\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/media\/7693"}],"wp:attachment":[{"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/media?parent=7691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/categories?post=7691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vividreal.co.in\/vividreal\/wp-json\/wp\/v2\/tags?post=7691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}