WEBSITE DESIGN
CELIA SPENCER Responsive 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 19 WORKS CONSULTED 22 TIME LOG 30 SELF ASSESSMENT REVISION HISTORY FINAL DESIGN
31 32 33
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, providing a concrete positive user experience. An introduction on who Baby Villain will be featured on the website, alongside a gallery of previous work and a contact form for consumers to engage with. The outcome of the website provides a functional design, providing the brand with a stable platform for the target market to hire Baby Villains service. This target market is consisted of a primary and secondary audience. The primary being a local and young business owner desiring one-off jobs from the service provided. The secondary being a more corporate business that would be returning client, requiring larger and more time worthy jobs. With these ethos in mind, the Baby Villain website was designed in order for these clients to visit.
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 to determine if the service provided would be suitable for them to hire (objective #5: clarity and usability & objective #1: explain services). They will use the website in order to see the level of quality in the work the brand produces (objective #3: highlight skill and ability), and their style. They will also consequently use the site to contact the company produces (objective #2: sell service). 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
SECONDARY CONSUMER This consumer requires a large range of services for
EXPERIENCE AMATEUR
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.
COMPUTER LITERACY AVERAGE
OBJECTIVE From navigating the site, the consumer has decided
EDUCATION SECONDARY/TERTIARY
to contact the brand (objective #2: sell service) to further discuss their abilities relevant to them (objective #3: highlight skill and ability). They primarily require this ability to converse directly with
OCCUPATION SENIOR AT HIRING COMPANY
the brand to discuss their personal requirements.
EXPECTATIONS The consumers want a personal connection with the
10
RESIDENCE AUSTRALIA
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
CTWO
WE ARE LABEL
CANDY BLACK
17
From the analysis of CTWO, it can be found that as oppose to their complex site design, a simpler layout could be more effective. The use of a fluid colour scheme and consistent fonts is vital. We Are Label illustrated this, keeping with a cleaner design with good use of sans and sans-serif font and text alignment. The site was however difficult to navigate. Candy Black proved to be the most superior design, with a clean aesthetic scroll that clearly conveyed who they were. The gallery beautifully displayed their work and the navigation bar effortlessly directed clients to contact them.
18
WEBSITE DESIGN
BABY VILLAIN
19
BABY VILLAIN DESKTOP: HOME PAGE V1 WIREFRAME MOCK UP
20
BABY VILLAIN DESKTOP: HOME PAGE V2 WIREFRAME MOCK UP
21
BABY VILLAIN MOCK UP
WIREFRAME
DESKTOP GALLERY: V1
22
BABY VILLAIN
MOCK UP
WIREFRAME
DESKTOP: CONTACT V1
23
BABY VILLAIN
MOCK UP
WIREFRAME
DESKTOP: CONTACT V2
24
BABY VILLAIN
25
MOCK UP
WIREFRAME
TABLET
BABY VILLAIN
26
MOCK UP
WIREFRAME
PORTABLE DEVICE: HOME PAGE
BABY VILLAIN
27
MOCK UP
WIREFRAME
PORTABLE DEVICE:Â GALLERY
BABY VILLAIN
27
MOCK UP
WIREFRAME
PORTABLE DEVICE: CONTACT
BABY VILLAIN SITE ANALYSIS NAVIGATION COLOUR
FONT
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
CONTRAST UNITY
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
ALIGNMENT Through a clean design and small use of elements, the website is easily read
READABILITY
All content presented is of high quality and relevant to both the brand and the user
CONTENT REPETITION PROXIMITYÂ
The continuing theme of orange alongside full screen hero images for the gallery, and a consistent used of fonts provides a sense of unison and repetition to the web design. The website design holds related items that are grouped visually, creating less clutter and making for a more organized layout
29
WORKS CONSULTED W3 SCHOOLS: STACK OVERFLOW: CODE ACADEMY:
https://www.w3schools.com
https://stackoverflow.com
https://www.codecademy.com/learn
30
Three hours a week was given to the project on top of the existing contact hours for the subject
TIME LOG
WEEK 9: Await grading from lecturer and discuss any unknown feedback, including questions on: - Time log - Wireframe
31
WEEK 10: Plan design for website on other devices - Desktop - Iphone - Ipad WEEK 11: Updating supporting documents, making suggested changed and adding additional required work - Areas for improvement discussed - not completed - Areas of project success discussed - not completed - Comments & Self Assessment - not completed - Revision History - not completed - Repetition - Proximity - Return to home - Text for SEO WEEK 12: Make coding changes - Responsive images - Stackable navigation - Call to action home screen
SELF ASSESS
Areas for improvement: - The addition of multiple pages - More text enabling for further SEO - Cleaner code; less messy - Accurately and detailed descriptions of changes made - Integration of JavaScript - More support for leading viewers to social media Areas proud of: - A non-traditional design - Aesthetic hover effects - Responsive navigation - Design was usable and worked somewhat effectively
32
REVISION HISTORY
33
FINAL DESIGN
BABY VILLAIN
34
DESKTOP
DEVICE
35