mortiz_Web_Style_Guide
- 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