Design Document: Diana Shoes
Design Document: Diana Shoes
Description
Diana Shoes opened in 1998 and it is a location for Shoes for all the ages and genders. With nationwide outlets and also a web presence, Diana shoes has Shoes, sandals, sneakers and boots for men, women and kids. Diana Shoes also carries accessories like socks and sneaker cleaners.
Being a reputable shoe manufacturer in Sydney, Diana Shoes is focused on quality products and service. Concentrating on client satisfaction, Diana Shoes aims to help make shopping enjoyable for its clients. The company's upcoming web design will expand its reach and accessibility even more, which makes it a preferred footwear provider for families throughout the nation.
A product catalog for men, women and kids with descriptions and images will be on the Diana Shoes Web site. Customers can shop on the internet with secure payments and promotions. A store locator will help customers find an outlet and consumer reviews will establish trust. Socks, accessories and shoe treatment are also on the Web site. Customers can read About Diana Shoes history and values at the about Us page and follow fashion trends at a blog/news section. Access to social media and customer support integration will improve the customer experience.
Highlights
The redesigned Diana Shoes Web site will include new features.
Social Media Integration: This will enable users to interact with Diana Shoes' social networking accounts - Facebook, Instagram and Twitter. By incorporating social media, the website can reach and engage customers on several platforms.
CSS3 Animations and Transitions: CSS3 animations and transitions are going to be employed to add effects on the site. These effects might include transitions between pages, animated buttons, along with interactive elements which respond to user actions.
Sticky Navigation/Header/Footer: A sticky navigation menu, footer and header will appear as users move down the page. This helps with navigation and keeping details like contact details or shopping cart in reach.
JavaScript Functionality: Interactive elements like picture sliders, popup windows and form validation are going to be implemented using JavaScript. These interactive features stimulate user engagement and dynamic browsing.
Responsive Design: The website will be created by using responsive design concepts and be functional on most devices - desktop computers, laptop computers, smartphones and tablets. This will deliver a consistent and easy to use experience for all users no matter what device (Almeida & Monteiro, 2017).
Overall, these features are going to combine to produce a contemporary, user friendly site for Diana Shoes, boosting its internet presence and the shopping experience for customers.
Diana Shoes: Core Target Audience Analysis
Based on the information provided about Diana Shoes, we can identify a core demographic that would be most interested in their offerings:
Age & Gender: Families with young children (ages 0-12) or teenagers (13-19), adults (over 20). This includes people who are looking for comfortable, affordable, and stylish footwear for their entire family.
Other Demographics:
Education Level:While education level isn't a major factor, Diana Shoes likely targets a broad range from school going kids to high school graduates to college-educated parents.
Interests:Practicality and value are key. Parents, usually 25-50, need practical, sturdy shoes - particularly for active kids. They want comfort, support and value for money, and they often want classic styles from respected brands. Teenagers 13-19 need fashion trends and brand recognition and want fashionable, useful shoes that reflect their style. For them affordability is a crucial consideration along with suitability and comfort for their activities. Younger kids (twelve years old) count on comfort, ease of use and fun, imaginative designs. They like shoes with popular characters and want tough options which will endure active play and growth spurts. Knowing the interests of every family member enables Diana Shoes to tailor its products, Web content and marketing to appeal to every segment.
Background & Culture:Diana Shoes likely caters to a diverse clientele in Sydney and potentially across Australia. Cultural background might influence specific shoe styles, but the overall focus remains on practicality and affordability.
Language:Primarily English, as the website is based in Sydney, Australia. but the website could benefit from including multi-lingual options to cater to Sydney's diverse population.
Employment Status:Full-time professionals, entrepreneurs, or those with part-time jobs, retired professionals, as well as non-working people.
Location:Since Diana Shoes is based in Sydney with outlets nationwide, their target audience primarily resides in Australia, particularly in urban and suburban areas.
Additional Considerations:
Income Level:While Diana Shoes offers a variety of products, their focus on affordability suggests they target a middle-income demographic.
Lifestyles:Busy families with active children who are always on the go. They need shoes that can withstand the wear and tear of daily activities.
By understanding this core demographic, Diana Shoes can tailor their website content, product offerings, and marketing strategies to resonate with these potential customers. This could involve:
Highlighting the durability and comfort of their children's shoes.
Featuring images of happy families enjoying themselves while wearing Diana Shoes.
Offering easy online ordering with fast delivery options.
Providing clear size charts and product information to simplify decision-making.
By focusing on the needs and preferences of this core audience, Diana Shoes can create a website that is not only attractive but also effective in driving sales and brand loyalty.
Sitemap
Navigation Scheme:
Global Primary Navigation:
Located at the top of the website on all pages for easy access.
Includes main categories: Men, Women, Kids, Account, Cart, About Us, and Contact Us.
Each category has a dropdown menu for easy access to sub-categories or specific pages.
Global Secondary Navigation:
Located below the primary navigation, providing additional links to important pages.
Includes links to specific collections or product categories under Men, Women, and Kids.
Also includes links to Account-related pages such as Profile, Order History, Payment, and Saved Address.
Local Navigation:
Located within specific pages to provide navigation within that section.
For example, on the Men's Collection page, there will be links to different types of shoes or specific collections for men.
Utility Navigation:
Located at the top or bottom of the website, providing access to utility functions.
Includes links to Cart, Search, and possibly other utility functions like Language Selection or Help.
In-text Navigation:
It is used within the content of the pages to provide additional context or links.
Links within product descriptions or blog posts which take users to other Web pages
Visual Representation:
The secondary and primary navigation will be placed horizontally at the top of the website with dropdown menus for sub-categories.
Local navigation is rendered vertically on the left or right side of the content area depending on the page layout.
Utility navigation will be at the top or bottom of the website, separately from primary content.
In-text navigation will be hyperlinked text within the content - distinguishable from regular text.
Functionality:
On hover on main categories in primary navigation brings dropdown menus that have links to specific pages/sub-categories. Clicking a category or even a subcategory brings visitors to that page. Local navigation will update based on that page and contain links from that section. Utility navigation will allow quick access to functions like cart view or product search. In-text navigation links navigate relevant resources or pages within the present tab or a brand-new tab, based on the browser setting. This particular navigation scheme seeks to make it simple for people to get around the website and locate the info or goods they require (Rahman, 2018).
Wireframes
Login Page
Homepage
MenPage
WomenPage
KidsPage
Cart
Contact Us Page
About Us Page
Profile
Navigation:
Look: Horizontal menu bar at the top of the page.
Font Type: Lato
Font Size: 14px
Color: #999999
Content:
Main Banner: Image slider showcasing featured products.
Product Categories: Grid layout with images and titles for Men, Women, Kids.
Promotional Section: Highlighting current offers or promotions.
Footer: Contact information, About Us, and Social Media links.
Text:
Font Type: Arial
Font Size: 12px
Color: Black
Headings:
Font Type: Playfair Display
Font Size: 36px (for main headings), 24px, 20px (for sub-headings)
Color: #75472e
Footer:
Font Type: Lato
Font Size: 12px
Background:
Color: #e3ddcc
Colors:
Main Navigation: #7c7458
Text: #b6a594
Headings: #b6a594
Footer Text: #e3ddcc
Fonts:
Navigation and Text: Lato, 12px
Headings: Playfair Display, 36px (for main headings), 24px, 20px (for sub-headings)
Colour Scheme Description:
The colour scheme for Diana Shoes' website is inspired by earthy tones and warm neutrals to convey a sense of comfort, reliability, and elegance (Sjlund et al., 2022). These colours are chosen to resonate with the target audience's desire for quality, style, and versatility in footwear.
#e3ddcc (227,221,204): This soft, off-white color will be used as the primary background color, creating a clean and inviting canvas for the website. It symbolizes purity, simplicity, and sophistication.
#75472e (117,71,46): This deep brown color will be used for accents and highlights, adding warmth and depth to the overall design. It represents stability, durability, and earthiness.
#b6a594 (182,165,148): This light brown color will be used for text and other elements to provide contrast against the background. It conveys warmth, comfort, and approachability.
#f7f6ee (247,246,238): This light, creamy color will be used for borders and separators, adding a subtle touch of elegance and refinement. It represents sophistication and timelessness.
#7c7458 (124,116,88): This medium brown color will be used sparingly for additional accents, adding richness and balance to the overall color palette. It symbolizes strength, reliability, and grounding.
Justification and Target Audience:
The chosen color scheme reflects Diana Shoes' commitment to quality, style, and comfort, appealing to a target audience that values these qualities in footwear.
The earthy tones and warm neutrals create a welcoming and harmonious atmosphere, inviting visitors to explore the website and discover the brand's offerings.
These colors are also versatile and timeless, ensuring that the website maintains a fresh and contemporary look that resonates with a wide range of customers.
Typography Description:
For Diana Shoes' website, we will use a combination of two complementary fonts to create a harmonious and visually appealing typographic hierarchy. These fonts are chosen for their readability, elegance, and versatility, enhancing the overall user experience and reinforcing the brand's image.
Heading Font (Primary):
Font: Playfair Display
Sizes:
H1: 36px
H2: 24px
H3: 20px
Justification: Playfair Display is a serif font that gives the headings a touch of class and sophistication that reflects Diana Shoes' premium products (Wasim et al., 2024). The various sizes hierarchize and direct the user's attention.
Body Text Font:
Font: Lato
Size: 14px
Justification: Lato is a sans-serif font ideal for simple browsing and modernity (Wasim et al., 2024). This 14px size makes the entire body text simple to read on mobile devices and desktop.
Navigation and Button Text:
Font: Lato (Bold)
Size: 14px
Justification: Through the bold version of the Lato font for navigation and button text helps make these components pop and encourages users to act (click a link or a purchase).
Footer Text:
Font: Lato
Size: 12px
Justification: The small font-size of 12px makes it legible but not distracting from the page content. Lato has a fresh look which matches the website.
Justification for Choosing These Fonts and Sizes:
Readability: The Playfair Display and Lato fonts are selected for good readability so that visitors can easily read and understand the content on the website.
Consistency: A consistent typography used on the website helps to make a cohesive and professional look that highlights the brand's image and credibility.
Aesthetics: The combination of serif and sans-serif fonts provides visual interest and sophistication to the design that make the website more visually appealing to visitors.
Responsive Design: The chosen font sizes help in readability on both desktop and mobile devices to provide a consistent user experience across all devices.
References
Almeida, F., & Monteiro, J. (2017). The Role of Responsive Design in Web Development. Webology 14(2). Retrieved from http://www.webology.org/2017/v14n2/a157.pdf.
Beaird, J., Walker, A., & George, J. (2020, September 4). The Principles of Beautiful Web Design. SitePoint Pty Ltd. http://books.google.ie/books?id=BczDEAAAQBAJ&pg=PT48&dq=The+principles+of+beautiful+web+design&hl=&cd=1&source=gbs_api
Frain, B. (2020, April 30). Responsive Web Design with HTML5 and CSS. Packt Publishing Ltd. http://books.google.ie/books?id=P03iDwAAQBAJ&printsec=frontcover&dq=Responsive+Web+Design+with+HTML5+and+CSS:+Build+future-proof+responsive+websites+using+the+latest+HTML5+and+CSS+techniques&hl=&cd=1&source=gbs_api.
Sjlund, E., Killberg, F., Peters, R., Paulsen, A., Andersson, A., Kinnervall, C., Bjrk, H., & Hrnberg, M. (2022). How does the colour scheme affect the trust of a website? Linkping University Electronic Press. Retrieved from https://www.diva-portal.org/smash/get/diva2:1665342/FULLTEXT01.pdf.
Rahman, K. M. (2018). A narrative literature review and e-commerce website research. EAI Endorsed Transactions on Scalable Information Systems, 5(17), e1. https://doi.org/10.4108/eai.29-5-2018.154806
Wasim, S. T., Collaud, R., Dfayes, L., Henchoz, N., Slazmann, M., & Lemay, D. R. (2024). Toward Automatic Typography Analysis: Serif Classification and Font Similarities.Journal of Data Mining & Digital Humanities. https://doi.org/10.5281/zenodo.10623072
