Introduction

The purpose of this study is to provide a respectable website documentation that exhibits the
conceptual design and ideas in the webpages in order to obtain the client's approval prior to
commencing to build a robust working website. E-commerce, commonly referred to as electronic
commerce or internet commerce, is the term used to describe the transfer of funds and information for
the purpose of transacting business through the internet. The term "ecommerce" is commonly used in
reference to the online seller of tangible goods, but it could also apply to any form of business deal
made possible by the internet. This report will contain the detail documentation of Sunglow clothing
site. This will contain branding, colors, typography, wireframes and mockups.

Purpose
More and more companies are adjusting to technological advancements as a result of the surge of
digitizing and technological transfer. One can use virtual payment with street vendors and grocery stores
alike. Making purchasing hassle-free for everyone is the overarching goal of this growth. In a typical
online marketplace, customers can browse the variety of products and activities the company offers,
look at images or photos of the products, and obtain information about the products' costs,
characteristics, and specifications. Consumers can frequently find certain models, brands, or items by
using "search" tools in online stores. Shopping experience is extremely exhausting since one have to
walk back and forth between stores. Direct marketing to webpage users and consumers is possible for
clients. Selling straight to the customer on their website allows companies to get their contact details,
unlike platforms where those who purchase their goods are the marketplace's clients. They can
advertise innovative products, provide promotions, and send email marketing promotions to their
clients once they have their email addresses. A key component of Sunglow's e-commerce approach is
the creation of their website. It is a fantastic method for them to develop their brand, win over devoted
clients, learn new things, and use innovative advertising methods. However, it might also be hard for
them to only use one route for all of their purchases. It might be beneficial for businesses to vary their
online sales channels as e-commerce grows more highly competitive.

Branding
By using components like a logo, design, objectives, and a constant theme across all advertising
messages, branding aims to give consumers a clear, favorable impression of a business, its goods or
services. Brand positioning enables businesses to stand out from the competition and develop a devoted
core audience. A distinctive brand can significantly affect company bottom line by offering business a
comparative edge over the competition and assisting them in acquiring and retaining clients at a far
lesser cost. An established company can be an important element in drawing clients and producing
profit in eCommerce, when new businesses (and hence, competitive threats), are popping up each day.

Name: I’ve named the ecommerce website to ‘Sunglow Clothing’. It will be crystal clear that it is the
same name as the company and that it offers clients hip products.

Logo: A well-designed logo motivates customers to stay by establishing competence and building trust.
It provides information on who company are, what they do, and how it helps prospective clients. It
sends the message that company will do exceptional information to people who are not aware of the
brand or products. The logo for the sunglow is shown below:
Slogan: Slogans are designed to illustrate the brand's personality and stick in people's minds. Because a
strong slogan not only inspires devotion in the client but also explains what the company exists for, it is
thought that a meaningful phrase has a greater influence on the client than the branded product itself.
The slogan I decided is “Your Fashion, your choice” that will match the clothing business.

Colors
Color determines how consumers feel around a website, promotes brand awareness, and emphasizes
crucial website aspects. It's crucial to pick the proper colors because they influence people's responses
in different ways. The key components of effective web design are white space, contrasts, and attractive
color combinations. In the current world, color is really essential. Thinkers' opinions, behaviors, and
behaviors can all be affected by color. It can make the eyes feel better or worse, boost the blood
pressure, or make people feel less hungry. The appropriate use of color can potentially reduce power
use. Among the first components to visually and psychologically convey the meaning of the layout is the
color palette. Since color may symbolize the specialty and even the overall firm publicity campaign when
handled appropriately, the color scheme is actually among the most crucial components.

 I've made the decision to use the colors white, black, and tortoise in the online store. The colors I used
in my design specification for the webpage are:

Color Name Hex code RGB code Color

White #FFFFFF RGB(255,255,255)
Black #000000 RGB(0,0,0)
cornslik #FFF8DC RGB(255,248,220)
Typography
Typography is the discipline of positioning lexical items so that the writing is readable, understandable,
and aesthetically pleasing to the viewer. Font style, look, and structure are all part of typography that
tries to evoke particular feelings and communicate particular meanings. In web design, typography
serves two fundamental objectives. The first is to encourage readability, while the other is to assist in
expressing a design piece's message, mood, and mood. Beauty play a role in typography's additional
purpose. People are attracted to clear, simple patterns that are pleasing to the sight. Keeping text
readable, generating emotions, and developing a recognizable brand recognition are just a few of the
various functions of typography layout. Consumer perception of a brand can be positively affected by its
logo's use of good typographical components, and demonstrations can be made more engaging by using
aesthetically appealing font combinations.

I will be using Ibarra Real Nova Bold 700 style to design the website.

Font Name Google Link

Ibarra Real Nova 700 style <link href="https://fonts.googleapis.com/css2?
family=Ibarra+Real+Nova:wght@700&display=s
wap" rel="stylesheet">

Site Structure
A site schematic, sometimes called a sitemap, is a graph that displays the connections among different
webpages, media, and other assets. Search engines like Google carefully check the text to investigate
the webpage. Public websites can also produce sitemaps. The site layout of a webpage makes it possible
for the online tool to rapidly and easily navigate through all the parts for crawling. Moreover, a sitemap
provides information about the website's sections, like the time of the most significant alteration, how
regularly the site is updated, its significance in comparison to other sites, etc. The most crucial sites on a
website are listed in a roadmap, ensuring that search engines can discover and analyze them. Sitemaps
also enable us to understand the layout of the business, providing a way to explore. Since they have long
been a component of the guiding principles for web design, webpages are not a new idea. It is now
much more important to engineer Meta tags effectively since search engines have started using them. It
is important to make it clear that if sitemaps are primarily desired for search engine marketing purposes,
only traditional Meta descriptions will work.
Wireframes
A wireframe is a two-dimensional representation of the graphical user interface for a webpage that
stresses the organization and order of the information, the tools that are present, and the planned
activities. A wireframe usually lacks design, color, or aesthetics because of this. Not to add that the
Wireframe aids in creating connections between various website designs. It ties the website's basic
structure to its graphical style by presenting the routes throughout the webpages. In specifically, it
describes how particular sources of evidence ought to be presented constantly on the UI. Choosing how
much room to give each object or where to place it even aids to decide which data should be
highlighted. Not to add, by initially separating the functionality and aesthetic of a wireframe layout,
client may focus on the crucial components of the website. The customer can provide some feedback on
anyway they want stuff to work or look by just examining the wireframe of a webpage until it get too
caught up in however client want this to look.

Login page
Product page

Product Description
Mockups
In the world of web design, a website mockups is a more advanced reproduction or high-fidelity
schematic that depicts how a website might appear. In website mockups, the architectural and logic of a
blueprint are blended with the images, graphics, and user interface (UI) elements of the finished
product. In other ways, mockups allow users to see what a venture will ultimately look like, and the
addition of additional features like buttons also suggests possible capabilities.
Conclusion
The web fonts and colors for the webpage have been selected. A roadmap or site structure image has
been created using draw.io. Wireframes for the webpage were then developed. I've created a website
design paper for this evaluation that demonstrates the theoretical foundation and guidelines of Sunglow
Clothing. First, I talked about the inspiration behind the site in the part on mission. After that, I even
offered a title, logo, and slogan for the e-commerce website's marketing section.