Soccer world shop By Omar ALMATRAFI Deakin College Principle interactive media ASSIGNMENT 2 Contents Introduction 2 Shortcuts Page Structure and Site Design 2 Breadcrumb 2 Search 2 Scan columns 3 Navigation and Wayfinding 3 Quote 3 Page headers and page footer 4 Page header 4 Page Footer 4 Typesetting 4 Graphics and color 5 Quote 5 Conclusion 5 References 6 Introduction URL: http://www.worldsoccershop.com/ Selected the ‘World Soccer Shop’ website to analyze the different aspects of it. The business category of this website is e-commerce and its genre is sports. The website sells sports items related Soccer, Rugby and Lacrosse. The culture value of the World Soccer Shop is the outstanding benefits and its relationship with its community, employee and customers. The main purpose of this website is to provide better services for its customers, so they can easily buy sports products. It sells Soccer, Rugby and Lacrosse sports products under different categories such as: sports t-shirt, bags, balls, caps and hats, jackets, sports accessories and various other items. The goal of the company is to increase brand awareness for its business and services in the international market and to increase clientele. The company also provides other services to achieve its purpose and goals for their business such as; customized designs on multiple items or products according to customer, like on jackets, jersey, bags, etc. Shortcuts Page Structure and Site Design As the web technologies are enhanced day by day the websites are also becoming more predictable and similar. Although, not all of the pages on websites share the exact features and layout described below, most of the pages of website incorporate all of these basic components. Breadcrumb Breadcrumb is a type of site navigation which is mostly and extensively used to easily understand the navigation devices which is particularly used in the large websites with the deep levels of organization of content. This is generally included on the most two popular places of the website, one is the top of the website header and another is just above the content of main page or home/index page. In the selected website it is used at both the place of website as the social icons and user login links and another is website menu which contains the search and shopping category. Search Most of the e-commerce websites which sells products and services offer local search functionality to its users to search its products and services available on the website easily. The ideal place for the search bar on a website is the ‘website header’ because and it is clearly visible by the user when they open the website and also it looks attractive. The ‘World Soccer Shop’ website also offers the local search facility to its users. The website place the search box or bar into its header area and the size of the search box also best fitted in that small area which looks very attractive. Scan columns The scan columns subdividing the webpages field into the several functional regions. It is basically used to organize the different page elements, web search boxes, contact information and navigation links on the website. It is also used for the advertising purposes and other necessary page elements. The ‘World Soccer Shop’ uses a left scan column to show the links of the webpages and products. In the footer of the website the scan columns are used to separate and manage the links of contact information, privacy, policies, about the company, etc. Navigation and Wayfinding Quote “Even with the best possible design of any single page, your site will fail to attract visitors if not equipped with a neat, consistent, and intuitive navigational interface. This article addresses the main issues designers confront when building effective navigation tools.” “Written by: Dmitry Kirsanoy’s” Wayfinding and navigation both are the related to each other however, they’re not same things. Basically, Wayfinding is the built of the environment which enables the users to successfully navigate through the complex spaces on the website. The Way finding’s has mainly four main modules: • Orientation: Where the user thinks at which place they currently exist. • Route decisions: The user thinks can they find the way, where they want to go? • Mental mapping: The user thinks, is his website experience consistent to know where they are and where they want to go next. • Closure: How can they recognize that they are arriving at the right place? The navigation is a function on the website that the users will use to navigate through the website, such as: footer navigation, related links, pagination, global navigation, breadcrumb trails, etc. The navigation is also the visual manifestation of this system like buttons, hyperlink text and tab. The website-navigation has the mainly two functions: first inform the user, currently where they are and another allows the user to move or navigate other part of the website. The text hyperlink type navigation helps the users to understand where they are and where they want to go by clicking on the link or buttons given there. According to the convention of the interface the links which is visited may be assigned as another visual treatment comparing the unvisited links. Generally the links are becomes blue or gray when user visited that link. In the selected website ‘WorldSoccerShop’ the header navigation and footer navigation is used. All the pages and subpages are clearly hyperlink in header and footer area of the website which helps the users in wayfinding and navigation. Page headers and page footer Page header Page header is a small part of website which shows on top of all the pages of the website. The website header or page header provides the site identity for the website. The placing of its content may vary from site to site. It is the most visible place of the whole website so that it also helps the users to decide where they are, where they have to go and how they arrive there. In the selected website ‘WorldSoccerShop’, the website has a clean and clear logo which include all the appropriate links, buttons and information such as: website logo, page links, social links, search boxes, cart, user login, etc. so that user can easily navigate all the pages and other functionality and features of the website. It is visible at the top of all the website pages. Page Footer The page footer is also an important part of the website which mostly contains the legal information about the website. It is visible at the bottom of all the pages of the website, which may contains the information like page author, copyright information or statement, contact information, redundant navigation link, etc. The selected website contains the footer in each of its pages which is clearly visible. The website page footer also contains the various information about the company and website such as: popular products links, country based information, business category and the links of some mostly accessible pages of the website, so it is well arranged however, the footer does not contain copyright information about the website which may be a negative impact on some of its users and the company. The website owner would have to update the copyright information of the website in the page footer. Typesetting The typesetting is basically the concept of the arrangement of physical and digital text in the graphics design and fields of publishing the content with images. In the selected website lots of graphic designing is used for the background of the website, on the slider images, product images, etc. to make the website more attractive according to its genre. The content and texts used in the images and graphics of the website are arranged in an attractive, clear and promoting design. Graphics and color Quote “I strive for two things in design: simplicity and clarity. Great design is born of those two things.” “Written by: Lindon Leader” A rich graphic design for any website gives a huge boost for the website. It increases the visual appeal, professionalism, usability and brand value for the website. It makes the website navigation ease and simple. The graphic of the website must be content appropriate and eye-pleasing text styles and colors. The color is the important element of design that is used to create the ideas, invoke feelings and convey messages. The color and graphics used in the selected website is very attractive and interactive. As it’s a sports website, all the graphic images, content and color combination are related to sports teams. The home page of the website showcases a slide show of current sales, gift ideas and brands the website sells, all of which are bright and attention seeking against the black and red theme. Conclusion/summary This document played an important role in understanding the concepts of interactive media and web designs. It explained that every web element has its importance onto the website. The website must be made keeping in mind the relevant customers and targeted audience so that the clear objective has been portrayed in front of the customers. Hence the chosen sportswear website has outstand as per the website design standards. The selection of colors, graphics and content compliments the website theme and aims. The basic elements are properly placed in the website and the rules are followed like logo positioning is at the left hand side, social icons are there at the homepage. Header and footer are clearly segregated and search box is too there as a filter for easy searches. In future if needs to be recommended some other features can be added and the content alignment is a bit different and is not justified footer section hence can be updated. References Webstyleguide.com. (2016). Page Structure and Site Design | Web Style Guide 3. [online] Available at: http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html [Accessed 22 Dec. 2016]. Graphicdesigndegreehub.com. (2016). What is Typesetting?. [online] Available at: http://www.graphicdesigndegreehub.com/faq/what-is-typesetting/ [Accessed 22 Dec. 2016]. GETTING PUBLISHED. (2016). What is typesetting?. [online] Available at: https://gettingpublished.wordpress.com/2010/01/22/what-is-typesetting/ [Accessed 22 Dec. 2016]. Designgraphics.org. (2016). designgraphics.org - Importance of Color in Web Design. [online] Available at: http://www.designgraphics.org/article22.html [Accessed 22 Dec. 2016]. Webstyleguide.com. (2016). Web Style Guide. [online] Available at: http://www.webstyleguide.com/ [Accessed 22 Dec. 2016]. Entheosweb.com. (2016). Web Design Tutorials. [online] Available at: http://entheosweb.com/website_design/default.asp [Accessed 22 Dec. 2016]. Graphicdesigndegreehub.com. (2016). How is Multimedia and Web Graphics Different?. [online] Available at: http://www.graphicdesigndegreehub.com/faq/how-is-multimedia-and-web-graphics-different/ [Accessed 22 Dec. 2016].