Interactive Elements

In-text link

CSS selector:

.in-textlink

Sample code:

< a href="https://www.CatSticker.com/">Visit CattoSticker.com!</a>

Rendered element:

Visit CatSticker.com!

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">Default Button</a>

Rendered element:

Default Button

Submit/Reset Buttons

CSS selector:

.button-nav
.button-navreset
#fname
#lname

Sample code:


          <form action="/action_page.php" method="get"> 

          <label for="fname">First name:</label> 

          <input type="text" id="fname" name="fname" placeholder="Insert First Name"><br><br> 

          <label for="lname">Last name:</label> 

          <input type="text" id="lname" name="lname" placeholder="Insert Last Name"><br><br> 

          <button class="button-nav" type="submit" value="Submit">Submit</button> 

          <button class="button-navreset" type="reset" value="Reset">Reset</button> 

          </form>

Rendered element:

Text Input Field with Label

CSS selector:

.phonenumber

Sample code:


          <label for="phone number">Enter your phone number:</label>

          <input id="phonenumber" name="phone number" type="text" placeholder="Enter Here">

Rendered element:

Enter your phone number:

Radio Button with Label

CSS selector:

#1hour
#30mins

Sample code:


          <form>

           <fieldset>

              <legend>Select how much time you want to spend</legend>

              <label>Choose one option: </label>


              <input type="radio"  name="fontSizeControl"  id="hour"

           value="1 hour"  checked="checked" >

              <label for="1hour">1 hour</label>


              <input type="radio"  name="fontSizeControl"  id="mins"

           value="30 mins" >

              <label for="30mins">30 mins</label>

           </fieldset>

          </form>

Rendered element:

Image as a Link

CSS selector:

.image-link

Sample code:


          <a class= "image-link" href="https://www.etsy.com/ca/shop/StrawberryFeelsArt?ref=l2-about-shopname&listing_id=1473529313">

            <img alt="StrawberryFeelsArt"

            src="img/strawberryicon.png" width="70" height="70">

          </a>

Rendered element:

Combined Elements

Main Navigation

CSS selector:

.button-nav

Sample code:


          <a class="button-nav" href="#">Home</a>

          <a class="button-nav" href="#">About Us</a>

          <a class="button-nav" href="#">Visit CatStickers</a>

          <a class="button-nav" href="#">Shop</a>

          <a class="button-nav" href="#">Reserve Now</a>

          <a class="button-nav" href="#">Contact Us</a>

Rendered element:

Home About Us Visit CatStickers Shop Reserve Now Contact Us

Product/Service Listing

CSS selector:

.cart-container
.product-items
.change-imgs
.change-img1
.product-descr
.link
.price
.expanddescription
.radio_btn_select
.button-nav

Sample code:


      <div class="cart-container">

        <div class="product-items">


          <div class ="change-imgs">

            <div class ="change-img1">

              <img src=img/Letsburn_cat.png" alt="Arson Cat Sticker">

            </div>


            <div class = "change-img1">

            <img src="img/cat_removebg.png" alt="Arson Cat Sticker with the backround removed">

            </div>


            <div class = "product-descr">

              <p class= "link">Arson Cat Sticker | Vinyl Matte | Waterproof</p>

              <p class ="price">$4.45</p>

              <a class= "expanddescription" href="https://www.CatSticker.com/">expand description</a>

            </div>


            <form id="radio_btn_select">

              <button class="button-nav" type="cart" value="Add to cart">Add to cart</button>

            </form>

          </div>


          <div class="cart-container">

            <div class="product-items">


              <div class ="change-imgs">

                <div class ="change-img1">

                  <img src="img/capybara_charm.png" alt="capybara acrylic glitter keychain">

                </div>


                <div class = "change-img1">

                  <img src="img/capybara_removebg.png" alt="capybara acrylic glitter keychain with background removed">

                </div>


                <div class = "product-descr">

                  <p class= "link">Banana Milk Cat House</p>

                  <p class ="price">$56.99</p>

                  <a class= "expanddescription" href="https://www.CatSticker.com/">expand description</a>

                </div>


                <form id="radio_btn_select">

                  <button class="button-nav" type="cart" value="Add to cart">Add to cart</button>

                </form>

              </div>

Rendered element:

Arson Cat Sticker with the backround removed

Arson Cat Sticker | Vinyl Matte | Waterproof

$4.45

expand description

capybara acrylic glitter keychain with background removed

Capybara Hot Springs Acrylic Charm 2" | Acrylic Keychain

$12.00

expand description

Payment Form

CSS selector:

.pform
.button-nav
.button-navreset
.cart-container
.payment-form
.radio
#f_name
#l_name
#ship
#country
#postcode
#city
#prov
#credit
#debit
#payment
#phone

Sample code:


          <div class="cart-container">

           <div class="payment-form">

           <form action="/action_page.php" method="get">

           <label for="f_name">First name:</label>

           <input type="text" id="f_name" name="fname"

           placeholder="First Name"><br><br>


           <label for="l_name">Last name:</label>

           <input type="text" id="l_name" name="lname"

           placeholder="Last Name"><br><br>


           <label for="ship">Shipping Address:</label>

           <input type="text" id="ship" name="ShippingAddy"

           placeholder="Address"><br><br>


           <label for="country">Country:</label>

           <input type="text" id="country" name="country"

           placeholder="Country"><br><br>


           <label for="postcode">Post code:</label>

           <input type="text" id="postcode" name="Postcode"

           placeholder="Post code"><br><br>


           <label for="city">Town/city:</label>

           <input type="text" id="city" name="city"

           placeholder="Town/city"><br><br>


           <label for="prov">Province/territory:</label>

           <input type="text" id="prov" name="prov"

           placeholder="Province/Territory"><br><br>


           <label>Select payment type: </label>

           <input type="radio" name="fontSizeControl"

           value="credit" checked="checked" id = "credit">

           <label for="credit">Credit</label>

           <input type="radio" name="fontSizeControl"

           value="debit" id = "debit">

           <label for="debit">Debit</label><br><br>


           <label for="payment">Card number:</label>

           <input type="text" id="payment" name="Payment"

           placeholder="Card number"><br><br>


           <label for="phone">Phone number:</label>

           <input type="text" id="phone" name="phone"

           placeholder="Phone number"><br><br>


           <button class="button-nav" type="submit" value="Submit">Submit</button>

           <button class="button-navreset" type="reset" value="Reset">Reset</button>

           </form>

           </div>

           </div>

Rendered element:

Checkout Cart

CSS selector:

.cart-container
.cart-action
.cart-header
.block
.Cart-Items
.image-box
.about
.title
.subtitle
.counter
.btn
.count
.prices
.amount
.save
.remove

Sample code:


           <div class="cart-container">

           <div class="cart-header">

           <h2 >Shopping Cart</h2>

           <h3 class="cart-action">Remove all</h3>

           </div>


           <div class="Cart-Items">

           <div class = "block">

           <div class="image-box">

           <img src="img/cat_removebg.png" alt="Arson Cat Sticker"

           style={ height="120px" } >

           </div>

           </div>


           <div class = "block">

           <div class="about">

           <h1 class="title">Arson Cat Sticker</h1>

           <h3 class="subtitle">Vinyl Matte | Waterproof</h3>

           </div>

           </div>


           <div class = "block">

           <div class="counter">

           <div class="btn">+</div>

           <div class="count">2</div>

           <div class="btn">-</div>

           </div>

           </div>


           <div class = "block">

           <div class="prices">

           <div class="amount">$4.45</div>

           <div class="save"><p><u>Save for later</u></p></div>

           <div class="remove"><p><u>Remove</u></p></div>

           </div>

           </div>


           </div>

           </div>

Rendered element:

Shopping Cart

Remove all

Arson Cat Sticker

Vinyl Matte | Waterproof

$4.45

Save for later

Remove

Branding

What does the company do, or offer?

CatSticker is a charming and whimsical sticker shop that specializes in creating hand-drawn stickers featuring adorable animals and delightful food items. Our stickers are designed with a pastel color scheme to bring a touch of sweetness and joy to your everyday life.

Who is the company to potential customers?

CatSticker's sticker shop for individuals who appreciate the beauty of handcrafted art and want to add a sprinkle of cuteness to their personal belongings. Our products are tailored for those who love expressing themselves creatively, whether through their bullet journals, stationery, or everyday accessories. We cater to all ages, from children who want to decorate their school supplies to adults looking to add a touch of cuteness to their workspaces.

Listing of products or services:

We offer a wide range of sticker designs that are perfect for decorating journals, scrapbooks, laptops, phone cases, and more. Potiental buyers can look on the website to buy stickers or fill out a form to print their own custome designs.

Brand Components

Fonts

For the font, I will be mainly using the font: Roboto by Christian Robertson. There are are 12 styles in this family like bold, light, etc. For headers 1, 2, 3, and 4, I will the Roboto medium weight. body paragraphs and navigation text will use Roboto light weight.

Colour Palette

My colour palette will consist of 3 colours:

Pastel pink
#fcd2ed

Creamy white
#f7f3e6

Dark gray
#383838

The creamy white will be used for the background color of the site. Sometimes, it will be used as the text on top of the dark gray so there's a contrast in color. The dark gray will be used for CTA buttons and the mainheaders. The pastel pink will used for links.

Potential imagery, and, or, art direction

Potential imagery for the logo is a hand-drawn animal character that is holding or surrounded by sweet treats like ice cream, cupcakes, or candy.(Example is shown below).The other photos is the art direction that will best describe the service. I took inspiration from the Studio Ghibli films and their soft colour palette as well as their art style. Below are examples showing their style. I want the site to look like a stationery store. I want to to capture the essence of cuteness, warmth, and creativity.

The following below are examples of potential imagery I would use on the CatSticker's website. These images shows some cute sticker designs.

Interactive Elements

In-text link

CSS selector:

Sample code:

Rendered element:

Navigation Link

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field with Label

CSS selector:

Sample code:

Rendered element:

Radio Button with Label

CSS selector:

Sample code:

Rendered element:

Image as a Link

CSS selector:

Sample code:

Rendered element:

Text Elements

Headings

CSS selector:

Sample code:

Rendered element:

h1: Header1

h2: Header2

h3: Header3

h4: Header4

Paragraphs

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Combined Elements

Main Navigation

CSS selector:

Sample code:

Rendered element:

Product/Service Listing

CSS selector:

Sample code:

Rendered element:

Payment Form

CSS selector:

Sample code:

Rendered element:

Checkout Cart

CSS selector:

Sample code:

Rendered element:

Shopping Cart

Remove all

Arson Cat Sticker

Vinyl Matte | Waterproof

Branding

What does the company do, or offer?

Who is the company to potential customers?

Listing of products or services:

Brand Components

Fonts

Colour Palette

Potential imagery, and, or, art direction

Citations