Page
Landing
The Sulfatonic website stands as a testament to the convergence of innovation and technology, designed to not only showcase the product's unique qualities but also provide an immersive experience for visitors seeking wellness solutions.
Overview
Welcome to a comprehensive case study that delves into the dynamic journey of designing and developing the Sulfatonic website.
Sulfatonic contains sulfur, a naturally occurring element that can be found in various sources. Sulfur is commonly found in volcanic areas, hot springs, and natural mineral deposits. It is also a component of certain minerals and rocks.
This case study will take you behind the scenes, offering insights into the intricate decisions, strategic planning, and creative craftsmanship that contributed to the website's success.
Project duration:July - August 2023
My role: Web design and development
My role: Web design and development
The begining
&
Text
Visual
Pro tip!
Attempt to finalize the text with the client before commencing your design research. Otherwise, it may impact the future design process and necessitate additional revisions.
Attempt to finalize the text with the client before commencing your design research. Otherwise, it may impact the future design process and necessitate additional revisions.
Fonts
Text
If your client has a logo - it is a big step towards typography
Text forms the foundation of effective communication within design, driving user interaction and guiding their journey. The selection of words, tone, and placement shapes the visual hierarchy and user experience, while also conveying brand identity. Thus, the thoughtful inclusion of text profoundly impacts design, creating a seamless fusion of functionality and aesthetics that resonates with users.
I decided to pair fonts
Colors
What
Who
UX and design study
Through active client communication, we were able to finalize headings, texts, and the color palette, ensuring that the design aligned with the client's preferences and objectives.
Findings
Sulfatonic offers a combination of cosmetic and wellness effects, potentially aiding in the treatment of certain serious skin issues
According to the latest marketing research, 70% of potential buyers are women, while 30% are men.
1
After assessing the websites of our competitors, we've opted to embrace the layout style of Glance Magazine, as it represents a widely accepted industry standard.
3
2
Two
Columns
Consider the section
Ensure that all elements within the section have ample space to accommodate the largest text paragraph you possess.
A small segment that marks a significant leap in design. This section sets the tone for all subsequent segments, attaining one of the primary goals of effective design - seamless continuity and unwavering consistency.
2 columns
Margine 40 Px
Gutter 40 Px
Classic magazine layout
Use grids and rulers
Element of consistensy
Be Pro!
Web development
Tilda
Here we go!
Get from a client your final Figma draft approval and proceed to web development
Now we are 100% sure about:
Text
Fonts
Color scheme
Margins and paddings
Images
Text
Fonts
Color scheme
Margins and paddings
Images
Sections by sections
I typically develop from top to bottom. I work on adapting each section to all screen sizes simultaneously, allowing me to focus entirely on that specific section and minimize errors during the final stages.
I find this approach more productive than creating a complete desktop version before moving on to the tablet and phone layouts
details
The
matter
Is the job done? Not quite yet. Make sure that:
The website is hidden from indexing during its creation
Favicon added: 120x120 ICO, 152x152 PNG, 270x270 PNG
All pages have Title and Description, headings marked with H1, H2, H3
Alt tags for all images have been added
Connect forms for data collection, confirm in form settings, select message language and write error messages
All forms on the website have thank you pages or success messages for data submission
All forms are labeled (formname)
All links to external websites open in a new window
All phone numbers and email addresses are made into links
Register the domain, configure A-records
Connect the domain
Enable the HTTPS protocol
Set up redirects from HTTP to HTTPS and from WWW to non-WWW
Connect Google Search Console
Connect analytics systems and pixels
Check for SEO errors in the website settings
Create and set up 404 error page
Set up cookie file notification
Create Privacy Policy page
Enable website indexing
Favicon added: 120x120 ICO, 152x152 PNG, 270x270 PNG
All pages have Title and Description, headings marked with H1, H2, H3
Alt tags for all images have been added
Connect forms for data collection, confirm in form settings, select message language and write error messages
All forms on the website have thank you pages or success messages for data submission
All forms are labeled (formname)
All links to external websites open in a new window
All phone numbers and email addresses are made into links
Register the domain, configure A-records
Connect the domain
Enable the HTTPS protocol
Set up redirects from HTTP to HTTPS and from WWW to non-WWW
Connect Google Search Console
Connect analytics systems and pixels
Check for SEO errors in the website settings
Create and set up 404 error page
Set up cookie file notification
Create Privacy Policy page
Enable website indexing
Get in touch
Just type your contacts
This is the beginning of a beautiful friendship.