1. Scissor Kicks Web Style Guide
The purpose of this style guide is to create friendly usability and consistency throughout the
website. It will portray a fun, bright design but will look and simultaneously feel professional.
We hope by using this design, it will be easily accessible to all users and create a lasting
impression encouraging users to return.
The objective of the website is to promote product sales and encourage clientele to purchase
from this Mom and Pop store as opposed to large conglomerates. This web style guide will not
only include recommendations but also requirements for consistency and branding of the
company. These publishing guidelines will represent Scissor Kicks as a credible ad professional
source in this vast industry.
Navigational Interface Design
• Homepage Navigation: The Scissor Kicks logo which is seen throughout the website will
navigate directly to the homepage at http://www.scissorkicks.com. Built into the homepage,
we want to incorporate a calendar of events. This calendar includes local news and events
relevant to soccer clubs, tournaments, and soccer-related events throughout the community.
Instead of the classic calendar format, a bulleted list of the current month’s events is listed in
chronological order.
• Secondary Links: The secondary links are visible horizontally underneath the banner
throughout every page of the website (static). They include (in this order) Home, Men,
Women, Footwear, Goalkeeping, Coaches, Referees, Youth, Accessories, and Clearance.
Each of these primary links has a drop-down menu leading to the secondary links. Do not
stack secondary links. Secondary links are only to be linear so drop-down menus do not
cover other links. See below.
• Drop-Down Navigation Menus: Drop-down navigation menus are only used on the primary
links (Home, Men, Women, Footwear, Goalkeeping, Coaches, Referees, Youth, Accessories,
and Clearance). It is important that drop-down menus not overlap other links.
• Second-level Links: The second-level links are the links that drop down from the primary
links excluding the Home link (the node-link diagram showing the hierarchy of the webpage
is available at the end of the web style guide).
o Under Men and Women: Apparel, Training, Jerseys, Footwear.
o Under Footwear: Outdoor Cleats, Indoor Cleats, Running Shoes.
o Under Goalkeeping: Gloves, Jerseys, Pants, Shorts, Training.
o Under Coaches: Equipment, Apparel, Accessories, Videos.
o Under Referees: Jerseys, Apparel, Accessories.
o Under Youth: Jerseys, Apparel, Footwear, Accessories, Goalkeeping.

2. 2
o Accessories: Bags, Balls, Shinguards, Gloves, Equipment, Water Bottles, DVDs.
o Clearance: Apparel, Footwear, Accessories.
• Left Navigation Column: Once a second-level link is clicked, a left navigational column
will appear. Depending on the link clicked, this gives the user options to organize and sort
content by sizes, brands, prices, and type of equipment. This provides an easier and more
customized experience for shoppers.
• Header: A header is located above the primary links banner. It includes the sign-in link, the
shopping cart link, the site index, and the option for Español link.
• Footer: The footer is also a static, light green banner at the bottom of all pages. It contains
the links: About, Contact Us, Site Map, Facebook, and Privacy Policy. A VeriSign secure
label is at the end of the footer to show users this is a safe website.
o About: This link navigates to the “about us” page. This node includes information
about the history of our store and major accomplishments. A link to the Contact Us
page is also located on this page.
o Contact Us: The Contact Us link takes the user to a page that has our contact
information. Our contact information includes our phone number, address (including
a Mapquest map of our business), hours of operation, and email address.
o Site Map: The map lays out the hierarchical structure of the website in a list format
so it is easy to skim.
o Facebook: There is a link to our Facebook page. This will allow the user to “like” us,
which will promote free advertisement on the web. This may encourage other
Facebook users to check out our website.
o Privacy Policy: The privacy policy link directs users to our privacy policy.
o VeriSign: We contract with VeriSign to gain the trust of the customers who use our
website and whose security we value.
• Sign In Navigation: The sign in navigation is available above the banner in the top right of
every page (static) in the header.
• Shopping Cart Navigation: The shopping cart navigation is visible on the top right of every
page (in the header) throughout the website next to the sign in link (static). It is a link with a
shopping cart icon to the left. It is not a requirement to create a user ID to browse and
purchase our products.
• Site Index: The index lists our products alphabetically, and the letters of the alphabet are
listed horizontally across the top of the page. Under each letter in the body, there is a “return
to the top” link to eliminate scrolling. This allows the user to find items more easily and

3. 3
logically without using the search feature or multiple clicks. There are no “see other product”
links. For example, if a shopper searches for “shoes,” the link goes to the footwear page,
even though it is not the proper title of the webpage.
• Use of Multiple Windows: Multiple windows are not allowed. Clicking on links will
navigate away from the current page onto the next, and breadcrumbs will help the user
navigate to and from pages. However, users still have the option to right-click on links to
“open in new tab” or “open in new window” depending on to their browser’s current
capabilities.
If there are links leading to an external site, a new tab (or window in some earlier browser
versions) will pop up. Currently, the only external links navigate users to official soccer sites
such as FIFA.com for official rules, news, and general soccer information. By creating a new
tab, yes, it directs the user’s attention away from our site, but it also forces them to return to
our site because it leaves our webpage open.
• Breadcrumbs: Because the use of multiple windows is disabled, breadcrumbs appear below
the primary links. The breadcrumbs are also hyperlinks. Breadcrumbs allow the users to
know where they are within the website, and they allow the users to backtrack their clicks.
They are especially helpful for larger sites with many hierarchical levels.
• Back Button: Users are able to use the back button, but it is not necessary due to the built in
navigation system and breadcrumbs. The back button draws attention away from the website,
and we want to avoid that.
• Browser Compatibility: The website is designed for Internet Explorer, Safari, and Mozilla
Firefox. It functions correctly with Google Chrome. This means we must make sure fonts
transfer over correctly, and if they do not, then we must use an alternative font.
Screen Layout and Design
• Accessibility: The website uses cascading style sheets (CSS) to enhance accessibility. This
also gets rid of layout tables. Using CSS allows individual users to navigate through the site
if they are sight-impaired – those who must use speech-based browsers or screen readers.
• White Space: Vast amounts of white space are utilized. This makes the pages feel clutter-
free, crisp, and clean. People are more prone to visit and stay on a website if they do not feel
overwhelmed by the content and overall feel.
• Language: The default language is English. At the top right of every page within the website
(header), there is an option for Español. This way, if anybody enters deep into the website
from an external link, he or she will be able to change the language.
• Color: To keep the feel of the pages simple and clean, the website has a “cool”
monochromatic theme incorporating themed greens, black and white.
o Background: The background is white.

4. 4
o Fonts: For content, the font color is black.
o Primary links banner: The banner and the banner dropdown menu is green: #009900
= RGB (0, 153, 0).
o Primary Links Banner Font: The font color against the banner will be white. This is
reverse text and is normally harder to read, but the contrast and minimal amount of
text eliminate those concerns and adds the necessary flare.
o Accent colors: Since the website will run on a mono color scheme and for
consistency, these are the only colors (excluding white and black) that can be used on
the webpage. The hexidecimal and RGB codes are:
 var. 1 = #00CC00 = RGB (0, 204, 0)
 var. 2 = #009900 = RGB (0, 153, 0)
 var. 3 = #33FF33 = RGB (51, 255, 51)
 var. 4 = #66FF66 = RGB (102, 255, 102)
(Color Palette by Color Scheme Designer URL:
http://colorschemedesigner.com/#2P91Tw0w0w0w0. Space: RGB (Web Safe Colors);
RGB color space reduced to 216 web safe color set.
• Flash: Flash is not used as it is quite distracting. Flash uses a lot of memory, and not all
computers are equipped with the latest Flash upgrades, or they may not have high Internet
connections speeds. If a page does not load fast enough, users may not stick around long
enough to peruse the site. We want the page to load quickly and cleanly, which will
encourage readers to revisit. We also do not want users to be distracted by Flash while
shopping, searching for something, or skimming the calendar.
• Fonts: For content, the sans-serif font Verdana (in 14 px) is used as sans-serif fonts are
easier to read on computer screens. Headings use the same size of font but bolded. Hyperlink
fonts are also Verdana but are 15 px. We never use all caps. All caps portray yelling. We do
not want to yell at our customers.
• Graphics: In this style guide, we use 72 dpi resolution for graphics.
o JPG: For product pictures, we only use JPG. JPG allows a broader range of colors
than GIF.
00CC00
33FF33
66FF66
009900

5. 5
Full photo
o GIF: However, our logo is only available in the aforementioned colors, so GIF is fine.
To convey transparency, GIF will be used, or we can use PNG.
o PNG: PNG was designed with the web in mind, and its primary feature is blending
smoothly with the background to create a more natural line – as opposed to hard line,
which is aesthetically unappealing.
Under no circumstance is there to be text over graphic. All captions are on the sides or
bottoms of pictures. Reading text on graphics is difficult and creates unnecessary strain
on the eyes.
• Image Attribution: The ALT attribute is used for accessibility. We provide textual
descriptions of all images for screen readers. This allows those with visual impairments
to know what the graphic represents.
• The Objective of Using Graphics: It is important to not overuse graphics. In all cases, if
it is better to use text, use text. For example, we would never only have a sketch of a
house in place of the word “home.” Graphics are only to be used to emphasize the text,
for clarification, or for product information.
• Italics: Italics are only used for names of DVDs. Italics are not only difficult to read, but
they also emphasize the name of a book, movie, or professional magazines and journals.
• Logo: The logo (as shown below) is copyrighted material of the Scissor Kicks Company.
It should not be changed, distorted or redrawn in anyway. These precautions are taken to
maintain the company’s identity. Users are able to download official Scissor Kicks logos
for personal use. Any time a logo appears on the website, it navigates directly to the
homepage at https://www.scissorkicks.com.
Because a local artist created our logo, we give
credit on the About Us page. We also have
permission to crop the background (as shown
below). We do this often throughout the website:
crop the background leaving only the player and
ball to spot the Scissor Kicks mascot.
Cropped photo

6. 6
• Identity Element (masthead): The identity element is part of the static primary links
banner. The identity element is Scissor Kick’s company logo. It is important that this
logo not be abused. Use only the specified colors in this style guide or dark shades of
gray for grayscale. For example, to emphasize branding and customer loyalty, the
company logo should never be in reds, blues or yellows. Just as you will never see a
green and yellow Bronco uniform, you will never see our logo in any other colors than
the ones already specified.
Do not distort the masthead by resizing or reshaping. Use only BlairMdITC TT font, and
nothing else. It is not okay to invert colors. That is, do not use a black background for
“scissor” and white for “kicks” because we want to ensure branding.
• Non-HTML Documents: .doc and .pdf files are not used on the website. Even if we
decide one day to make the application process available online, we will contract through
a vendor and use an external site. There currently is not any reason to download a
document from the website. Its primary uses will include comparing products and prices
and informing of upcoming events.
• Legal Information: Legal information is clearly visible on the footer. We do not want to
hide our intentions as a company.
• Privacy Policy: The privacy policy explains how Scissor Kicks collects, stores, and uses
customer information. The privacy policy page also has a direct link to the Contact Us
page.
• Attribution of Sources: The privacy policy includes how and why we collect personal
information and how we use the information we collect. The same information is
available for non-personal information as well. In addition to the recording and using of
personal and non-personal information, we explain the use of cookies, click-through data
used from emails and advertisements we send out, and gathering of information ISPs.
Scissor Kicks does not make available personal or non-personal information to third
parties. All gathered information is only to be used for internal business statistics and key
performance indicators.
• Child Security: The youngest age we ever collect data from is 13. If it happens we
collect information from someone younger than 13, we will take the appropriate steps to
delete the profile. Collecting this information will enhance our marketing strategies;
however, only adults will be able to purchase directly from the website with credit, debit,
or PayPal.

7. 7
• Protection of Personal Information: We as a company employ VeriSign to keep our
online community secure, and we proudly display the logo on the homepage and
purchase pages.
• Advertisements: We may use advertisers who support local events. If we need financial
support in the future, advertisements will only have non-flashy banners right-aligned on
the homepage.
• Search Box: There is a search box in the upper right corner of the website. It defaults to
search the internal website. Two other options are available to either search externally or
combine internal with external. Search results are displayed with the most relevant
information on top. We collect and use this click-through information to periodically
enhance the search feature.
Screen Content
• Line Length: To reduce strain on the eyes, line length is constricted to about 13 words across
the webpage (roughly 420 pixels wide). 420 pixels across allow paragraphs to be broken up
into columns. This website is not designed to be word-heavy, so some smaller sentences may
break this rule, but large amounts of textual information will strictly adhere to the maximum
line length.
• Paragraphing: Paragraphs are not to be longer than 45-55 characters within the previously
specified column widths. This allows chunking of information and easy skimming for the
users.
• Sentence Length: Sentence lengths can vary depending on use. On this website, it is
important that we keep sentences short and simple. It is not important to impress or confuse
users with artsy or ostentatious wording. By using shorter sentences, users can more easily
navigate through paragraphs, skim, and find keywords. Again, sentence length is not much of
a problem considering this website is designed for online shopping. Most of the sentences
will likely come from product reviews from various users or explanations of calendar events
on the homepage.
• Screen Size: According to many credible online sources, the average internet-ready
computer has a screen resolution of at least 1024x768, so this website should run at a page
width of 960 pixels maximum. Depending on content, this could be decreased to 750 pixels.
• Fixed-width: A fixed width of 420 pixels will be used for column length. By using the fixed
width method users who expand their browser windows will still see the same information in
a fixed format. Sentence length won’t stretch as far as the expanded or maximized window.
Since we are using this control feature, readers’ eyes will not be strained by having to read
across a whole computer screen.
• Scroll: Because we have implemented the page width at 960 pixels, users will likely not
need to scroll horizontally. Minimal vertical scrolling may be necessary depending on the
page. Again, this website is not designed for heavy text, and users find it cumbersome to
scroll too often, so scrolling will only be used when absolutely necessary.

8. 8
Linking
• Link Groups: For optimal website navigation, we use primary, secondary, and tertiary.
• Second-level Links: Second-level links appear on every page of the site in this order:
Home, Men, Women, Footwear, Goalkeeping, Coaches, Referees, Youth, Accessories, and
Clearance. The point in naming second-level links is to keep it short and to the point so as
not to confuse users. We want users and shoppers to find the categories they need quickly
and painlessly through brief section headings. We do not want to overwhelm the users with
long names and seemingly endless columns of options.
These second-level links are all in text since text loads more quickly on all connection speeds
as opposed to graphics. Since the second-level links do not change and this website is small
in comparison, it is better to use horizontal navigation. Some studies show that eyes steer
toward the left of the computer screen, and this might be proof that we need a vertical
navigation as our primary; since we are selling clothes in varying sizes and colors, we keep
vertical navigation to a minimum.
o Static headers and footers are used with specific information.
• Underlining: Underlining is only used to indicate a hyperlink within text. For example,
“Contact Us” will be underlined in the privacy policy webpage. In no other instance are we
to use underlining. To create emphasis, we can use other means such as bolding. Try to stay
away from in-text hyperlinks because they are difficult to find.
Search Features
• Index: Though indexes are mainly used to navigate through large sites, it is beneficial to
have one so customers can easily navigate through our website. The index is in alphabetical
order, and all listed items link to the appropriate page in the website. The index link is
located under the search box on all pages. We have many products, and some may not be
identifiable under the current labels and the minimal amount of space we have for primary
links.
• Site Map: A site map also helps the user understand the hierarchical structure of the
Scissor Kicks website. This will map out our linking structure. They will be expanded in
text format into fix width columns. The site map expands into four even columns showing
the products and each product’s features.
• Search Engine: We registered through the Yahoo! Search directory. The annual cost to
subscribe to this is $299.We hope for this to expand our client base and make it easier to
search for a soccer alternative. Yahoo! will also be our secondary search engine. Using the
search box, a client is able to choose whether he wants to search internally, externally, or
both. Yahoo! search is used for external searches.
• Search Tips: Search tips are available if a customer searches for something but turns up no
results (or minimal results). Often times, people will add an “S” or “ING” to the end of a

9. 9
word. This can prove difficult for a small website search box. Auto fill is also incorporated
into the search. This helps with spelling and gives suggestions.
• Advanced Search: The advanced search options will allow the user to narrow down a
search. The options available are any of the words, all of the words, exact words, and omit
these words. This will be helpful in various cases. For instance, someone wants to search
for shoelaces but only turns up results for shoes. This can help narrow the search. This will
also explain the use of the words “and” and “or” in searches.
Usage
• Time of Day and Time Zones: For local purposes, we use Mountain Standard Time.
Quick Reference Usage Table:
Never
Do…
Always
Do…
Never
shorten
Scissor
Kicks
to
“SK”
Always
use
Scissor
Kicks’
full
name
Never
use
all
caps
for
emphasis
For
emphasis,
only
bold
and
use
sparingly
Never
categorize
users
by
gender
Always
use
plural
and
use
“they”
Never
use
any
other
colors
than
what
are
specified
in
this
web
style
guide
Always
use
our
signature
colors