WEBSITE DESIGN
CELIA SPENCER Fixed Website Design MMDE11-200_172 SID #13424473
CONTENT PURPOSE AND SCOPE
4
PRIORITIES AND OBJECTIVE
6
TARKET MARKET PROFILE
8
COMPETITOR REVIEW
11
COMPETITOR ANALYSIS
13
SITE DESIGN
17
FINAL DESIGN
22
PURPOSE & SCOPE
BABY VILLAIN
4
The following document will highlight the analysis process for the development for the Baby Villain website. The websites purpose, objective, target market demographics, and competitors have all been analyzed in order for an effective website to be established. This website has been created in order to meet these objectives, mainly to exhibit the brands skills and abilities in the hopes of maximizing brand awareness. The website aims to heighten the Baby Villain reputation to result in a stronger presence in the designer industry, and consequently increase clients. These objectives will be achieved through the creation of an informative and aesthetically designed website, giving viewers the opportunity to navigate the site with ease, and providing a concrete, positive user experience. A home page with navigation, a gallery of previous work, and a contact form for consumers to engage with with be presented on the site. The outcome of the website provides a functional design, giving the brand with a stable platform for the target market to hire Baby Villains service.
5
OBJECTIVES TOP 5 PRIORITISED GOALS
BABY VILLAIN
6
1. EXPLAIN SERVICE
Provide useful information on the extent of Baby Villains capabilities to possible consumers.
2. SELL SERVICE
Selling Baby Villains services to a range of consumers to build a larger clientele in order to gain more experience, and increase portfolio of works.
3. HIGHLIGHT SKILL AND ABILITY
Providing visual examples of previous works and the clients associated in order to support the brands expertise in the service being sold.
4. BULID IDENTITY
Attracting new consumers in order to construct a positive reputation within the industry, increasing brand awareness.
5. USERBILITY
Providing a clear platform that represents the brands identity to any user navigating the site.
7
TARGET MARKET PROFILES
BABY VILLAIN
8
GENDER BOTH MALE AND FEMALE AGE 18-25 EXPERIENCE AMATEUR COMPUTER LITERACY AVERAGE EDUCATION SECONDARY/TERTIARY OCCUPATION UNDEFINED RESIDENCE AUSTRALIA (LOCAL TO THE BRAND)
PRIMARY CONSUMER This consumer will require services for either a local small business or personal use. They specifically hire for one off and/or small/cheap jobs. The consumer has a specific outcome from the service that they desire. OBJECTIVES The primary consumers main interest while navigating the site is to gather information in order to determine if the service provided would be suitable for them to hire. They will use the website in order to see the level of quality in the work the brand produces, and their style. They will also consequently use the site to contact the company. EXPECTATIONS The consumers will be provided with a sufficient amount of material on the brands skills and abilities from the images presented. They will feel that from the information obtained they will be able to make an informed decision on whether or not to hire the service. The user will then have a method of contacting the brand in order to discuss further on the specific service desired (email).
9
GENDER BOTH MALE AND FEMALE AGE 18-25 EXPERIENCE AMATEUR COMPUTER LITERACY AVERAGE EDUCATION SECONDARY/TERTIARY OCCUPATION SENIOR AT HIRING COMPANY
10
RESIDENCE AUSTRALIA
SECONDARY CONSUMER This consumer requires a large range of services for a singular brand/company. They hire based on quality of work and give the brand more responsibility and workload throughout the process of them being hired. OBJECTIVE From navigating the site, the consumer has decided to contact the brand to further discuss their abilities relevant to them. They primarily require this ability to converse directly with the brand to discuss their personal requirements. EXPECTATIONS The consumers want a personal connection with the brand in order to discuss in depth what they require from the hired service.
COMPETITOR REVIEW
BABY VILLAIN
11
CTWO https://www.ctwo.com.au This creative agency provides in depth information on who they are as a brand and what their services provide. Through a busy and over complicated design, users can discover examples of their work with previous clients, and can also be contacted directly through a contact form embedded on the site.
WE ARE LABEL http://wearelabel.com This boutique graphic design firm uses a clean and consistent design to present their brand. Their focus is to present the user with previous client examples of their abilities, with both a gallery of their works and a blog for each. After this the company introduces themselves in an ‘about us’ section. The sites design requires the user to scroll through many pages before reaching the footer where an email address is presented that they can be contacted on, of which is neither embedded or hyperlinked. The sites navigation is unclear and difficult to discover.
CANDY BLACK https://www.candyblack.com This website opens to a clear page, presenting the brands logo and navigation in a fixed header. Following in the body is a concise and accurate statement addressing the service they provide and specialize in. Examples of the brands work can be found below this, presented in an aesthetically pleasing gallery, with hover effects. When an image is clicked, users are lead to more information on the work they provided for their client.
12
COMPETITOR ANALYSIS
BABY VILLAIN
13
CTWO NAVIGATION COLOUR FONT
CONTRAST
UNITY
ALIGNMENT
READABILITY CONTENTÂ
14
The navigation panel is clearly presented in a fixed header alongside the brands logo Consistent colour scheme of white with a dark pink/red with black text Multiple serif and sans serif fonts are inconsistently used throughout the website The use of colour provides a contrast throughout the website giving the ability for some elements to be more prominent than others. The contrasting shapes are not used effectively, breaking the fluidity of the page while separating design elements. The interchangeable hero images, galleries and text elements provide harsh separations throughout the website, breaking the flow as the user scrolls. Consequently, the unity of the design has suffered. There is an inconsistent alignment throughout the page, with elements varying between left, right and center. The elements also disregard any use of the golden mean rule. The involvement of many varying elements create a busy page that is unclear to understand and navigate. The content is accurate and relative to the brand and its services
WE ARE LABEL NAVIGATION COLOUR
FONT CONTRAST
UNITY
ALIGNMENT READABILITY CONTENTÂ
The navigation is not presented clearly and can be found after clicking a small box in the top left corner of the header Consistent and clean colour scheme of red and white is used throughout the design All font used are consistent, with the use of one sans serif typeface, and one serif type face The block coloring provides a positive contrast throughout the page, giving the ability to separate content as the user scrolls The interchangeable 100% width hero image with 960-pixel width text provides a consistent flow through the webpage. Along with the consistent colour flow and fonts, the site is unified through this use of repetition. All text headers are centrally aligned while all paragraphs are right aligned. The consistency of the fonts used provide an easy read for users of this website. All information presented is relevant to the brand and for the user to be presented with
15
CANDY BLACK NAVIGATION
COLOUR FONT CONTRAST
UNITY
ALIGNMENT
READABILITY CONTENTÂ
16
The navigation is presented clearly, fixed in the header and aligned to the left of the screen The muted grey background colour is continued throughout the website, providing a clean slate that supports a very aesthetic design One serif font is used throughout the design, solidifying the clean design of the website The block images used in the gallery provide a simple contrast to the slate grey colour that is used as a base throughout the design The entire website remains extremely consistent and unified through the repletion of a single font, the colour scheme, and only halving the screen when presenting multiple elements. Text is consistency aligned to the right, while images are only equally aligned vertically. The images do not align horizontally in the gallery, providing some contrast in the design. Due to the clean and simple design alongside the use of a single font, the readability of this website cannot be faulted All content is of relativity and of tremendously high quality
WEBSITE DESIGN
BABY VILLAIN
17
BABY VILLAIN HOME PAGE WIREFRAME MOCK UP
18
BABY VILLAIN MOCK UP
WIREFRAME
GALLERY
19
BABY VILLAIN
MOCK UP
WIREFRAME
CONTACT
20
BABY VILLAIN SITE ANALYSIS NAVIGATION COLOUR
FONT
CONTRAST UNITY
ALIGNMENT READABILITY CONTENTÂ
The navigation is clearly presented as the whole screen when first entering the site, providing a clear direction for the user The hex colour codes used throughout the design were #ffa500, #000000, #ffffff and were used consistently through the design A single sans serif font of Open Sands Condensed was used throughout the website, providing uniformity to the page The contrasting colours of orange and black were used, providing excitement in the user. The full size hero images also provided this feeling The flow from screen to screen is unified through the use of constant design elements, a set colour scheme, and the use of a single font All elements are centrally aligned to another, solidifying the previously mentioned unity and flow of the website Through a clean design and small use of elements, the website is easily read All content presented is of high quality and relevant to both the brand and the user
21
FINAL DESIGN
BABY VILLAIN
22
23
VEIW PORTFOLIO ONLINE: BABY VILLAIN