APPROACH
/ Web Design
Client Approval
Time consuming
Avoid
Pre-Production (05)
Production (05)
Post-Production (04)
SI.no
Process
Approval
File type
Info
01
Goal Identification
Understanding your business, goals, target audience, and project expectations: Questionnaire for Business, Website & Target.
DOC File
Read more
Read less
02
Scope definition
Once we understand the site's goals, we can define the scope of the project, including the necessary pages and features needed to achieve those goals.
PDF File
Read more
Read less
03
Sitemap
With the scope well-defined, we can begin digging into the sitemap, defining how the content and features outlined in the scope definition will interrelate.
PDF File
Read more
Read less
04
Persona Flow
Using the target group details, we'll craft a flow for each persona, mapping out the number of clicks required for them to achieve their objectives on the website.
PDF File
Read more
Read less
05
Style Guide
During this phase, we select a few reference websites for aesthetic inspiration. We'll also determine the primary website colors and typography.
PDF File
Read more
Read less
SI.no
Process
Approval
File type
Info
01
Component Library
Building upon the chosen style guide, we proceed to develop the components library, encompassing icons, buttons, forms, and navigation menus.
Figma File
Read more
Read less
02
UX Wireframing
The wireframe prototype represents the final version of the site in terms of structure. It involves expanding a small sitemap into a low-fidelity prototype.
Figma File
Read more
Read less
03
UI Design
Now, we'll implement the approved style guide into the UX wireframe prototype. This will result in the polished version of the website.
Figma File
Read more
Read less
04
Functionality
During this stage, we plan all the functional triggers that occur when the user interacts with the website.
Figma File
Read more
Read less
05
Responsiveness
It's crucial to consider the various devices our users might use to view the website. Therefore, we design the desktop version to be adaptable to fit into tablet and mobile devices with minimal deviation from the actual flow.
Figma File
Read more
Read less
SI.no
Process
Approval
File type
Info
01
Content
Ideally, having a copy writer in charge of content creation is optimal. However, if that's not the case, we can also assist with content creation. This phase focuses on updating the website with relevant text and media content.
Figma File
Read more
Read less
02
UI Prototyping
UI prototyping involves creating a high-fidelity prototype that provides a comprehensive understanding of how your website will look when developed. This process also aids the development team in understanding the design requirements.
Figma File
Read more
Read less
03
Animation
We handle all micro-interactions and macro-interactions, delivering them as web-friendly files to ensure your content is engaging and converts effectively.
Lottie File
Read more
Read less
04
Dev Handoff
In the final step, we package the files for the development phase. This includes the Sitemap, Component Library, UI Design & Prototyping, as well as media and animations, ensuring all necessary elements are readily available for development.
Figma File
Read more
Read less
SI.no
Process
Approval
File type
Info
01
Goal Identification
Understanding your business, goals, target audience, and project expectations: Questionnaire for Business, Website & Target.
DOC File
Read more
Read less
02
Scope definition
Once we understand the site's goals, we can define the scope of the project, including the necessary pages and features needed to achieve those goals.
PDF File
Read more
Read less
03
Sitemap
With the scope well-defined, we can begin digging into the sitemap, defining how the content and features outlined in the scope definition will interrelate.
PDF File
Read more
Read less
04
Persona Flow
Using the target group details, we'll craft a flow for each persona, mapping out the number of clicks required for them to achieve their objectives on the website.
PDF File
Read more
Read less
05
Style Guide
During this phase, we select a few reference websites for aesthetic inspiration. We'll also determine the primary website colors and typography.
PDF File
Read more
Read less
SI.no
Process
Approval
File type
Info
01
Component Library
Building upon the chosen style guide, we proceed to develop the components library, encompassing icons, buttons, forms, and navigation menus.
Figma File
Read more
Read less
02
UX Wireframing
The wireframe prototype represents the final version of the site in terms of structure. It involves expanding a small sitemap into a low-fidelity prototype.
Figma File
Read more
Read less
03
UI Design
Now, we'll implement the approved style guide into the UX wireframe prototype. This will result in the polished version of the website.
Figma File
Read more
Read less
04
Functionality
During this stage, we plan all the functional triggers that occur when the user interacts with the website.
Figma File
Read more
Read less
05
Responsiveness
It's crucial to consider the various devices our users might use to view the website. Therefore, we design the desktop version to be adaptable to fit into tablet and mobile devices with minimal deviation from the actual flow.
Figma File
Read more
Read less
SI.no
Process
Approval
File type
Info
01
Content
Ideally, having a copy writer in charge of content creation is optimal. However, if that's not the case, we can also assist with content creation. This phase focuses on updating the website with relevant text and media content.
Figma File
Read more
Read less
02
UI Prototyping
UI prototyping involves creating a high-fidelity prototype that provides a comprehensive understanding of how your website will look when developed. This process also aids the development team in understanding the design requirements.
Figma File
Read more
Read less
03
Animation
We handle all micro-interactions and macro-interactions, delivering them as web-friendly files to ensure your content is engaging and converts effectively.
Lottie File
Read more
Read less
04
Dev Handoff
In the final step, we package the files for the development phase. This includes the Sitemap, Component Library, UI Design & Prototyping, as well as media and animations, ensuring all necessary elements are readily available for development.
Figma File
Read more
Read less