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.
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
The begining
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.
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

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.
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.
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.
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
Here we go!
Get from a client your final Figma draft approval and proceed to web development
Now we are 100% sure about:
Color scheme
Margins and paddings
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

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
Rustem Galeev
UX / UI designer
Contact me