We\u2019ve built 50+ websites.<\/p>\n
Whether it\u2019s a one-page portfolio site or a large enterprise one, here\u2019s the exact design process that we follow \ud83d\udc47\ud83c\udffc\ud83d\udc47\ud83c\udffc<\/p>\n
1) Step 1 \u2013 Project requirements<\/p>\n
What will the site contain? What pages and functionalities do we need? What sections will these individual pages contain? etc.
\nFor example, say we need to design an agency site. We\u2019ll map out the following pages:<\/p>\n
– Home
\n– About us
\n– Contact us
\n– Services
\n– Individual Service details
\n– Previous Projects and Case Studies
\n– Individual Case Study Details
\n– Blog Home
\n– Individual Blog Post<\/p>\n
2) Step 2: Moodboard\/Design References<\/p>\n
Once we\u2019re clear on what all pages will be included in the project, it\u2019s time to find various design references to refine our style better.
\nWe\u2019ll go through hundreds of different site designs to see what we like and what we don\u2019t.
\nBy the end of the mood-boarding session, we should be clear on the kind of \u201cvibe\u201d that we\u2019re going for with our product.<\/p>\n
3) Step 3: Wireframes<\/p>\n
Once we\u2019re clear on the mood board, it\u2019s now time to build the rough structure of the website. This rough structure is called a wireframe.
\nIt helps us visualize what will the overall site look like, where will the main buttons be placed, which sections will show what, etc. Think of it as a skeleton for our site.<\/p>\n
4) Step 4: Content<\/p>\n
Once we\u2019re done with the wireframes, it\u2019s now time to write our site content.
\nThis site content will focus on our unique capabilities as an agency and our value propositions while showcasing previous projects and achievements.<\/p>\n
5) Step 5: Visual Design<\/p>\n
By this stage, we have the site skeleton (wireframes) and content already in place. It\u2019s now time to work on the visuals.
\nThis stage will focus on the overall look and feel of the project. Our typography, images, illustrations, and all other visual elements will be worked upon here. (When you think of \u201cdesign\u201d in day-to-day conversations, usually this is what you\u2019re referring to)<\/p>\n
6) Step 6: Animations<\/p>\n
Once the visual design is ready, we\u2019ll then work on different animations and micro-interactions involved in the product.
\nYou\u2019ve seen those cute loading animations on different sites as you scroll down? All of that is done during this stage of the project.<\/p>\n
7) Step 7: Development and testing<\/p>\n
Once the animations are done, it\u2019s now time to code the site and make it launch-ready.
\nBy this stage, you can already visualize your site on different devices and have 100% clarity on what the end product will look like and behave.<\/p>\n
8) LAUNCH!! The final stage of the project.<\/p>\n
\u2013 \u2013 \u2013 \u2013 \u2013 \u2013<\/p>\n
This is a highly simplified version of the entire process but we hope this helped you understand how things work in the background.<\/p>\n","protected":false},"excerpt":{"rendered":"
Our web design process, simplified We\u2019ve built 50+ websites. Whether it\u2019s a one-page portfolio site or a large enterprise one, here\u2019s the exact design process that we follow \ud83d\udc47\ud83c\udffc\ud83d\udc47\ud83c\udffc 1) Step 1 \u2013 Project requirements What will the site contain? What pages and functionalities do we need? What sections will these individual pages contain? etc. […]<\/p>\n","protected":false},"author":1,"featured_media":367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/posts\/224"}],"collection":[{"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/comments?post=224"}],"version-history":[{"count":4,"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/posts\/224\/revisions"}],"predecessor-version":[{"id":368,"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/posts\/224\/revisions\/368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/media\/367"}],"wp:attachment":[{"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/media?parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/categories?post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coloristy.com\/wp-json\/wp\/v2\/tags?post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}