Olivia's Responsive Web Design Project

Responsive Website Design
Olivia Meredith
www.oliviameredith.com
Lecturer / Tutor: James Birt

Table of Contents
01
02: Site Purpose & Scope
03: Objectives
05: Target Market Profiles
07: Competitor Analysis
28: Resources Used
29: Website Design
44: Design Rationale
48: Time Log
51: Revision History
52: Self-Assessment - Fixed Website Design
53: Self-Assessment - Responsive Website Design

02
Site Purpose & Scope
The purpose of this website is to act as a virtual business card and portfolio reflecting my
creative endeavours in the fields of illustration and photography, with the goal of
targeting like-minded creatives and design professionals. This respective business will often be
introducing itself in the form of this site, acting as a point of contact, and so it has been designed to
establish a good impression and instill in users of my target market a desire to return.
As a personal business, reliability and consistency are valued; this site has been designed to reflect
these qualities to its viewer. In addition to this, the target market of those who are interested in
design as well as design professionals in recruiting positions has been closely considered with
the number one objective being to make business information available, followed by the desire to
sell a product and/or service.
In addition to this, the website’s main functions are for creative expression (showcasing works),
obtaining employment opportunities, heightening public interest and networking. This document
has been created to explore and record the details involved in designing and building this website.

03
Objectives
Top Five Prioritised Objectives
#1: To make business information available
The number one objective of this website is to display what the designer does and the services she
offers, including portfolio materials. Acting like a virtual business card or résumé.
#2: To sell a product or service
One of the main objectives of this website is to be a catalogue for the products and services offered. By presenting them
in a well-designed space, the aim is to make the experience an enjoyable one for the viewer/customer so they will go
through with a purchase, enquire about possible jobs and become a returning visitor to the site.
#3: To heighten public interest
One objective is to increase personal brand exposure in hope of attracting new audiences and
expanding public awareness with the goals of gathering a following and increasing sales.
#4: To network
The fourth objective of this website is to reach out to the creative community, increase communication
with other like-minded people, and boost opportunities for collaboration and / or freelancing.
#5: To allow feedback
The website can act as a platform for viewers and customers to express their opinions and provide feedback, be it
positive or negative. A customer review section with star ratings could be incorporated in the future but for now, the
medium to be used is a simple contact form connected to a personal email address.
This will be helpful for improvement and gaining an insight into the needs and desires of the target market.

04
Objectives
Prioritised Objectives - Summary
The number one objective of making business information available was chosen because at this stage in my creative
career, having a website reflective of what I’ve done and what I can do is viewed as a vital stepping stone to
expanding my skills addressing my target market/s. As the website can act as a virtual portfolio or résumé, this correlates
with my number one objective to include the possibility of obtaining employment (secondary user).
Selling a product or service was ranked at number two and not number one as I am currently focused on studying and
working on my own projects, however in the future, this may become my number one objective once I’ve captured the
attention of my target market (primary users) and established relationships.
Raising public interest came in closely at number three of the five prioritised objectives although it works closely
alongside number one. By having this website showcasing things I’ve created, I hope people may share it around so I
can gather more followers and have more opportunities arise. This objective addresses both primary and
secdonary users within my target market.
Also connected to number three is the fourth objective to network which was chosen as I would really like to connect with
other likeminded individuals to inspire each other (these people are more likely to be primary users of my site, as well as my
competitors). It isn’t ranked higher as I already have connections I’m yet to address, although it may go up in the list of
priorities in the future once I have a broader collection of works or if I begin looking to expand.
Finally, providing a way to receive feedback is seen as a fantastic addition to having a web presense as it can be great
for expanding horizons, obtaining new ideas, making improvements and developing as an artist.

05
Target Market Profiles
Primary User
Gender: Predominately Female
Age: 18-25
Experience: Beginner to Advanced
(Web design, Illustration & Photography)
Education: Self-taught or Students
Occupation: Students, Design Creatives, Entrepreneurs
Residence: AUS., U.K. & U.S.A.
Computer Literacy: Competent to Experienced
Description:
The primary user of this website can be described broadly as a person who is interested in design, including
detailed line-work, caricatures and photography with film aesthetic. This interest may be from a hobbyist,
student or working professional’s perspective.
Objectives:
The primary viewer will use this website as a platform that provides easy access to all of the different
aspects of my personal business’s online presence. This includes background information and viewing
galleries of some featured illustrations and photographic work. The primary user may be seeking to have someone design
and develop their website, commission some illustration work, or propose me attending an event of theirs as the
photographer. The primary user would want to explore the depth and scope of my works to
assess the potential suitability or to perhaps gain some inspiration for their own works.
Expectations:
The primary user will have an expectation that they will easily and intuitvely be able to view what
they’re most interested in whilst following a natural “F” pattern, so the site’s design and layout
will cater to this with logo branding capturing the eye at the top, followed by navigation and the
hero image acting as a call to action. Navigation titles are consistent
with headings / signposting to ahere to user expectations. In addition to
this, users will expect to be able to intuitively navigate and view my site and its contents on other
devices such as a mobile phone and/or tablet, so I will ensure my site has these functionalities.
Another user expectation will be to locate my other other web presences, so links to
them will be provided in the footer as well as referenced on the contact page.

06
Target Market Profiles
Secondary User
Gender: Predominately Male
Age: 25-55
Experience: Advanced
(Web design, Illustration & Photography)
Education: Tertiary Level
Occupation: Recruiter or Design Professional
Residence: AUS.
Computer Literacy: Very Experienced
Description:
The secondary user of the site is a potential employer, whether that be someone looking to fill a
permanent design role in the fields of web design, illustration or photography, or someone seeking
comissioned work on a one-off or contractual basis.
Objectives:
The secondary viewer may use this website to assess my competencies, strengths and weaknesses
with the goal of finding an employee with suitable web design, illustration and / or photography skills.
This may include learning more about who I am as a person by reading the About page or following social media links,
viewing my web design, illustration and photographic work to see if my style or skill levels are fitting for their
projects or target market, and to perhaps initiate contact or send through an enquiry.
Expectations:
Like the primary user, a secondary user will have an expectation of being able to navigate the site on a
computer, a tablet or their mobile phones, as well as being able to quickly and effectively find what they are
looking for following the natural “F” shape way of viewing a page.
The site has been designed with these factors in mind. Secondary users will also
expect to see my best works that clearly reflect my skill levels and capabilities.
In relation to this, the hero image acts as a call to action to capture the viewers’ attention and encourage
them to initiate contact. Recruiters will expect that when getting in contact with an enquiry,
request or proposal, they will receive a prompt response.

07
Competitor Analysis
Reviewed Site Summaries
01: http://www.melaniedaveid.com
The portfolio of a German UX designer and art director. Flat, single page design with navigation displayed in
one of two places.
02: http://www.adandypunk.com
The portfolio of a multimedia performance artist. Multi-page design with the header and footer relative to the
content. Strong emphasis on hand-drawn fonts, icons and imagery.
03: http://www.paulineosmont.com
The portfolio of a French art director, web designer and illustrator. Developed by Nicolas Tarier.
Multi-page design with responsive but usually fixed header navigation. Incorporates a lot of different effects I’m
yet to learn how to achieve.

08
Competitor Analysis
Competitor #1 - Melanie Daveid
Home Page
Colour: Monochromatic with the use of red (#F44A52), white,
grey and black. Dark and moody with red accents
that attract the eye to important information.
Font: Cursive, handwritten font used for main logo / page title.
Creative, curly joins and leaning to the left. Decorative but
maintains a an effective level of legibility. Contrasts well with
the capitalised sans-serif used to emphasise what she
specialises in at the top as well as for the navigation
at the bottom of the hero image or logo graphic.
Contrast: Title / logo being displayed in white creates a nice contrast against the
dark grey and black background.
The use of red text for key information (specialisations and navigation)
also contrasts well resulting in clarity. Solid colours enforce this.
Repetition / Unity: There is a sense of unity created by the handwritten font and
illustration used in the logo in terms of visual form and colour.
The repetitive use of the same font, styling and colour for the
top and bottom text results in a sense of comfort and works to create
a unified aesthetic that forms a good impression as a landing page.

09
Competitor Analysis
Home Page Continued...
Alignment: Centrered. Simple and visually pleasing.
Proximity: Navigation items have been spaced out in a way that
creates a sense of separation whilst maintaining unity, to place
emphasis on the individual items and to increase legibility.
The hero image or logo graphic is an effective size to produce
balance and a comfortable visual aesthetic.
Navigation: Displayed clearly at the bottom of the page.
Links and Labels: A neat white line appears when hovering over the
navigation items. The line is a similar thickness to logo
text which adds to the unified aesthetic.
Performance: Reasonable. The page took about four seconds to load
but a visually appealing loading screen was displayed that was
consistent to the style of the website and this let the viewer
know the page was in progress.

10
Competitor Analysis
About Page
Colour: Colour scheme carries through from the home to about page although
with more of an emphasis on red (#F44A52) and white. A bright and light feel in
contast to dark aesthetic of the landing page.
Font: Cursive, handwritten font used for main logo is consistent with the page title.
Large size and character spacing enhances legibility. Simple sans-serif consistent
with home page navigation is used for the text.
Sentence case used for content, capitalisation for navigation.
Contrast: Bold backgrounds (red and white) separate the page in half
vertically. White title text and black navigation text both contrast well against the
red background. Colour blocking is used to create contrast and
separation between different sections.
Repetition / Unity: The repetitive use of the same shade of red (#F44A52) and
two fonts create a sense of unity. The sizes of the text may have aimed to form
visual hierarchy however as it’s not uniform and there is no clear structure,
a slight sense of disharmony is experienced.

11
Competitor Analysis
About Page Continued...
Alignment: The left box is centered like the home page and the right box has
been aligned to the left.
Proximity: Wide padding around the text creates white space that
assists in drawing the viewer’s eye to the text and creating a
comfortable viewing margin. Spaces between paragraphs help with
making large paragraphs of text appear less intimidating or overwhelming.
Navigation: Still appears at the bottom, consistent with the home page,
although colours have swapped and the underline when you hover
over an item is white. No troubles were evident with the site’s
approach to navigation.
Function: Side white box scrolls to display additional information while
red box and hexagonal image remain fixed until you reach the bottom
before progressing onto the “work” section.

12
Competitor Analysis
Work Page
Colour: Purely black and white. The red accent appears as the text
colour when hovering over the links, as an underline when hovering on the
navigation, and in the form of an “x” in a hexagon once clicking on an
image and expanding the right panel.
Font: The use of the same two fonts remains consistent.
Contrast: The left panel transitioning from red in the “about” section to white
in the “work” section creates contrast between the sections. It is also an effective
design decision to use white in this instance to avoid clashing with the
imagery that is the focus. The use of white text contrasts well against the
background of the images.
Repetition / Unity: A unified aesthetic continues including the placement
of navigation which makes it clear where you are and easy to get to
different areas of the site. “About” page image is consistent with the
styling of the hexagonal buttons.
Alignment: Both the left and right side panels are centered.
Proximity: Consistent with the “about” section.
Function: When hovering on images in the right panel, there’s a slow
zooming in effect and a hexagonal “more” button animation appears. Right
panel scrolls whilst left panel remains fixed. If you click on an image in the right
panel and it expands to take up three-quarters of the screen.

13
Competitor Analysis
Contact Page
Colour: This page is most similar in design to the landing page, including links
in the accent colour of red and the navigation hover effect producing a
bold white underline.
Font: The use of the same two fonts remains consistent.
Contrast: The same method of separating sections by colour exists.
Repetition / Unity: A unified aesthetic continues with the repetitive
use of font, sizes, colours and shapes.
Alignment: Both the left and right side panels are centered.
Proximity: Consistent with the “about” section.
Function: When hovering on images in the right panel, there’s a slow
zooming in effect and a hexagonal “more” button animation appears. Right
panel scrolls whilst left panel remains fixed. If you click on an image in the right
panel and it expands to take up three-quarters of the screen.

14
Competitor Analysis
Competitor #2 - A Dandy Punk
Home Page
Colour: Colour emerges through the background imagery in dull shades with high
contrast. Juxtaposes with pops of rainbow colour in the word “now” and in social
media icons in the footer.
Font: Handwritten, sketched style (low x-height, exaggerated ascenders and
descenders) in most parts aside from the case of a simple sans-serif font being
used for the copyright information in the footer.
Contrast: Social media icons are emphasised against the dark background as
they’re bright in colour and have solid outlines whereas the black text only
contrasts enough against the sky of the background image but becomes
illegible when scrolling over the darker parts of the image.
Repetition / Unity: Logo repeats in the header and footer, although it is
displayed in a creamy colour in the footer. The repetitive nature of the logo feels a
bit unnecessary on a page that isn’t very long.
Strong use of the handwritten font creates a unified aesthetic
Alignment: Horizontal navigation and footer. Text doesn’t have a uniform
alignment (may be styled around the octopus arm of the background image.
Proximity: The drawings accompanying the navigation titles are in close
proximity to indicate connection and aid the viewer in understanding what to
expect as the titles used are atypical.

15
Competitor Analysis
About (“Ego”) Page
Colour: In addition to the colours present in the background image, the accent of
a teal or bluey-green colour (#80B8B6) has been added and as it’s a colour that
features in the background image, a sense of harmony is achieved.
Font: Consistent with the landing page. Handwritten, sketched style and the same
simple sans-serif font from the footer has been used for the paragraph text.
Contrast: As the main content section has a white background, it creates an
effective contrast that separates itself from the background imagery.
Repetition / Unity: Strong style created from the hand-drawn elements and its
repetition creates a unified aesthetic.
Alignment: Horizontal navigation and footer. Centered titles and left-aligned
sections blended with justified paragraphs. Non-uniform and explores variety.
Main content section to the left of the human featured in the background image.
Proximity: The proximity between the background image and main content section
forms a relationship where they appear to be connected (it looks like the man is
pointing towards the content). Some graphics extend beyond the boxes.
Navigation: Watercolour inkblots and hand-drawn icons add detail and character
to the handwritten titles of the navigation links. No effects when hovering.

16
Competitor Analysis
Video (“Viddy-Well”) Page
Colour: Consistent with the other pages. Confined to the colour scheme.
Font: Consistent with the other pages; handwritten and a simple sans-serif.
Contrast: White background for the main content section contrasts well against the
background imagery and the video stills.
Repetition / Unity: With the exception of the first video that’s displayed at full-
width, the videos below are evenly spaced and uniform in size which creates unity.
Alignment: White main content box is centered and videos are evently spaced
which has achieved a balanced overall appearance.
Proximity: On this page, the main content box is wider, making the space on
either side more narrow. In comparison with “about” page, this diverts attention
away from the background imagery and focuses the eye on the main
attractions which are the videos.

17
Competitor Analysis
Other Creations (“Squid-Inklings”) Page
Colour: Colour scheme implemented is consistent with the other pages of the site
although this page appears busier due to the colourful gallery.
Contrast: As with the “videos” page, the white background for the main content
section contrasts well against the background imagery and the images.
Repetition / Unity: Evenly spaced grid gallery showcasing images uniform in size
creates a unified whole.
Alignment: Title is left-aligned and images are justified.
Proximity: The proximity between the photos in the gallery creates a nice
separation whilst maintaining a sense of connection. The spaces on either side of
the main content box is ecaggerated in comparison to the “videos” page which
increases the focus even further.

18
Competitor Analysis
Contact (“Summon”) Page
Colour: Consistent with the other pages and the site’s overall colour scheme.
Contrast: The use of white in the form and at the bottom of the main content
box contrasts well against the background imagery as well as the darker imagery
mainly consisting of black that features at the top of the main content box.
There is also a contrast between the straight lines and sketches.
Repetition / Unity: A consistent aesthetic style is formed by the
hand-written lettering and drawings.
Alignment: A bit messy and unbalanced, mainly due to the contact form
being aligned to the right which is the same side as the main feature
of the background image, however the existence of the drawings
to the left creates some balance.
Proximity: The space created by aligning the contact form to the right, aided by
the drawings existing to the left draws the viewers’ eye to the intended focus.
Navigation: Remains consistent throughout.

19Competitor #3 - Pauline Osmont
Competitor Analysis
Home Page
Colour: Monochromatic with the use of a dull yellow or mustard colour
(#CEB889), white, grey and black. Dark and moody background imagery.
Font: Curly, cursive, handwritten font used for main logo / page title.
Creative joins between characters and extravagant accents.
Baseline isn’t straight. Decorative but still legible. Contrasts well with
the capitalised sans-serif used at the top and for the navigation titles.
Interesting addition of serif on the numbers.
Contrast: Title / logo in grey and white creates a nice contrast against the
background. The use of the rusty green colour for accents is stylish and the level of
contrast against the background creates reasonable visibility.
Repetition / Unity: Having the same font and colour repeat at the top and bottom
create unity and a resolved aesthetic. It is believed a nice balance between
being creative and trustworthy is formed by the harmony between the
fonts and use of colour.
Alignment: Centered with navigation evenly spaced.
Proximity: The increased proximity between the navigational links creates
separation and emphasis.
Performance: A stylish animation informs the user the page is loading.
Took about three seconds which is considered to be reasonable.

Competitor Analysis
Works Page
Colour: The colour scheme continues onto the “works” section with a much
stronger emphasis placed on the accent colour (#CEB889).
Font: The serif font used for the numbers in the navigation on the landing page
has been carried through and made more predominate, now taking form in the
titles and descriptions of the displayed works. The handwritten style of the
title / logo seen on the landing page can be seen in a similar style within the
centered small circular logo. Sans-serif font only used for the navigation titles.
Function: As you hover over the images, the background image is replaced
with the one you’re hovering over and an overlaying rectangle that opens like a
book emerges to form a backdrop for the title and small description of the work.
Navigation adapts between sections but appears fixed once at different stages.
Contrast: The hover effect on the images displaying the titles and descriptions
contrast well against the busy imagery. However, the contrast is lacking with the
navigation as it is barely legible against the background imagery.
Repetition / Unity: The widths and heights of the gallery images may line
up nicely but they are not uniform, and the hover effects bring other sizes into the
mix that create emphasis but don’t result in a very harmonious or unified aesthetic.

Competitor Analysis
Works Page Continued...
Alignment: Gallery is centered but images alternate between different
widths and heights.
Proximity: As you scroll, images fall behind the navigational links which
diminishes any proximity between the different elements. Images are also
presented directly next to, above and beneath eachother. The lack of attention
to proximity creates a bit of a jumble which devalues the experience.

Competitor Analysis
About Page
Colour: Consistent with the colour scheme of the website.
Font: Consistent font usage. Serif title and sans-serif text.
Contrast: Navigation contrasts much better against white background. Interesting
“about” title with sections of the characters extending beyond the black box.
Repetition / Unity: Repetitive usage of colour and font creates a unified aesthetic.
Alignment: Centered box split in half with creative use of alignment
(characters extending into the white space).
Proximity: The proximity between the top of the page, the navigational links and
black box is simple and visually appealing.

Competitor Analysis
Contact Page
Colour: Consistent with the colour scheme of the website.
Font: Consistent font usage. Serif title and sans-serif text.
Contrast: Very similar to the “about” page although in this instance, the black title
box extends to the full-width, which adds some variety and increases emphasis.
Repetition / Unity: Repetitive usage of colour and font creates a unified aesthetic.
Alignment: Centered title box with the creative use of a grid-like structure of
alignment including characters that extend beyond the box and into the white
space. Contact form divides the space into two left-aligned columns that creates
separation and maximises an effective use of space.
Proximity: The proximity between the top of the page, the navigational links and
black box is simple and visually appealing. The close proximity between the titles
of the form elements, lines and placeholders indicate connections.

24
Competitor Analysis
Scoring - Out of Five
Melanie Daveid
Colour:
Font:
Contrast:
Repetition:
Alignment:
Proximity:
Mobility:
Overall:
A Dandy Punk Pauline Osmont
4.5
5.0
5.0
4.0
4.5
4.5
4.5
4.5
2.5
3.5
2.5
3.5
3.0
4.0
2.5
3.0
4.5
4.5
3.0
3.0
3.0
3.5
4.5
3.7

25
Competitor Analysis
Impacts on Design Approach
01: http://www.melaniedaveid.com - 4.5/5.0
The simple, flat design of this website was very effective and appealing. In comparison to the other
sites that were analysed, this site stood out in terms of its minimalist approach.
There is evident use of contrast and appropriate fonts that work well to create a unified aesthetic.
Whilst maintaining coherence, there is still a comfortable amount of variety present in the design.
The way it implements a single page design is appealing as it provides the opportunity to either
scroll through the content at your own leisure or navigate directly to where and what you would like
to see, thus catering to the users’ individual desires. The ease of navigation is heightened by the
designer’s use of contrast and repetition. In addition to this, her use of proximity has effectively
made larger blocks of text less intimidating and more approachable.
The way it uses colour and line to form separations between the different content sections was
inspiring to the development of my website design development. As it is simple and doesn’t
incorporate much Javascript, etc., it was perceived to be an effective expression of a portfolio site
that is relative to my skill-set and website’s objectives.
On mobile platforms, the site is consistent with the desktop experience and functions beautifully.

26
Competitor Analysis
02: http://www.adandypunk.com - 3.0/5.0
This simple, multi-page website displays an interesting attempt at balancing creativity and
legibility, although I feel it was the least effective of the sites that were analysed. As not much
attention was paid to the use of colour and contrast, a distinct aesthetic was achieved and
reflected the nature of the artist himself yet the experience of viewing the site wasn’t always
a comfortable one. It is believed that a more thoughtful use of alignment could also help
to improve the design.
I enjoyed the personal touch of incorporating hand-drawn lettering and icons however for Search
Engine Optimisation purposes, using images for titles and links would not be so effective so I would
not want to go down that path. However, it has encouraged me to create my own font one day.
The repetition created through the use of a consistent style worked to achieve a unified aesthetic.
Analysing this site deterred me from incorporating background imagery as it provides a great
example of the importance of contrast between backgrounds and text. It has also taught me more
about the boundaries between expressing your creativity and instilling an impression that fosters
trust which connects to legibility, navigation and quality of experience.
On tablet and mobile, this site’s design is unchanged although it avoids horizontal scrolling by
cropping the background image. The navigation is barely legible as there is no increase in size.

27
Competitor Analysis
03: http://www.paulineosmont.com - 3.7/5.0
From analysing this website, I decided a far more simple approach was the way to go. I really liked
the landing page and would consider designing something similar in the future. It functions as a
call to action that’s reflective of her personal brand’s aesthetic. The landing page demonstrates an
effective use of contrast with aesthetically strong and clear navigation.
I thought this site’s use of colour and font was very effective and consistent in most
instances however the lack of contrast between the navigation and background imagery on the
works page was barely legible which made navigating the site difficult and uncomfortable. These
feelings were amplified by inconsistencies; a lack of repetition and poor attention to alignment.
Effective uses of proximity were noticed on most pages however the works page was definitely the
site’s downfall.
Pauline Osmont’s portfolio taught me more about the possibilities available with Javascript and
other coding languages. She really used an abundance of different effects but it resulted in
seeming overdone and overwhelming at times.
This site is far more functional and visually appealing in terms of alignment and proximity on
mobile platforms. It is a little slow when loading images which could be solved with optimisation.

28
Resources Used
List of Websites Referred to
01. http://www.w3schools.com
used as a reference library for the HTML & CSS languages.
02. http://www.codeacademy.com
used to facilitate interactive learning and familiarisation with the way HTML & CSS works.
03. http://www.stackoverflow.com & http://www.coderwall.com
used to learn more about the @font-face declaration and implementation in an offline environment.
04. http://www.fontsquirrel.com
used their Web Font Generator to produce .woff files for Google Fonts.
05. https://css-tricks.com/line-on-sides-headers/
used to create double lines on either side of my headings.

29
Website Design
Wireframes - Desktop

30
Website Design
Home Page - Fixed Design
Inital Photoshop Colour Layout vs HTML/CSS Form

31
Website Design
About Section - Fixed Design
[Combined with Home section for Responsive Design ]

32
Website Design
Illustration Section - Fixed Design

33
Website Design
Photography Section - Fixed Design

34
Website Design
Contact Section - Fixed Design

35
Website Design
Wireframes - Tablet & Smartphone

36
Website Design
Home Page - Responsive
Refined Photoshop Colour Layout vs Final HTML/CSS - Desktop & Tablet in Landscape Orientation

37
Website Design
Home Page - Responsive
Final HTML/CSS - Tablet in Portrait Orientation & Smartphone in Landscape Orientation

38
Website Design
Gallery Sections - Responsive
Final HTML/CSS - Desktop & Tablet in Landscape Orientation

39
Website Design

40
Website Design
Final HTML/CSS - Smartphone in Portrait Orientation

41
Website Design
Contact Section - Responsive
Final HTML/CSS - Desktop & Tablet in Landscape Orientation
(the page you see once submit is pressed)

42
Website Design

43
Website Design
Final HTML/CSS - Smartphone in Portrait Orientation

44
Website Design
Design Rationale - Fixed Design
Colour: The decision was made to work in monochrome, working with (#9D76A7) to reflect the individual’s values and brand’s
focus on being perceived as creative and imaginative – thus too reflecting the artwork /products. I had originally been drawn
towards solely using a pastel purple colour however it appeared too washed out so I decided on using a darker vibrant shade
(#9D76A7) that felt more confident. A monochromatic colour scheme was chosen to afford simplicity, with the aim of creating a
unified and harmonious design. #9D76A7 is used as the background colour of the header and footer, as well as links when
hovered on and active. Black features as the colour of the logo / title text and white is used for the
navigational buttons and body background.
Font: Josefin Sans’ x-height is half way from the baseline to cap line which sets it apart of many modern fonts, it is believed this
creates more of a geometric, elegant and vintage feel. For these reasons, it was chosen to be used as the title font. As a
sans-serif font, the characters are neatly spaced out, it’s clear to read and thus suitable for screen usage. Grand Hotel was chosen for
the illusion of a hand-made feel that is created by the use of cursive which emphasises the portfolio site’s style of illustration and
lettering. Despite being a handwritten style of font, it is believed legibility is maintained with its vertical lines, x-height and simple
joins. These two fonts and their sizes were chosen with the goal of finding a balance between legibility and creativity.
Contrast: The use of contrast has been incorporated into the website’s design to emphasise different elements and to create a
clear division between pages or sections. Contrast has been achieved with the use of negative space, bold purple rectangles
signifying a separation between content and the size of titles.
Repetition / Unity: Repetition is exercised by maintaining consistency in terms of font, size and a monochromatic colour scheme.
Titles are designed and styled in the same way and as are the breaks between sections across the single page website. The layout of
the different sections were not designed to be uniform, but instead aim to incorporate some variety and are designed more
specifically to the content and what is believed to be the best way to present it. The overall appearance of the website works to
achieve a sense of unified wholeness.

45
Website Design
Design Rationale - Fixed Design
Alignment: Predominately centered alignment aside from the landing page. Through the use of repetition, a sense of unity is formed
by the centered alignment of the titles on the sequential pages. The home page implements the use of the Golden Mean. Gallery
items (photos of illustrations and photographs) are evenly spaced and reference the Rule of Thirds.
Proximity: The character-spacing of Grand Hotel was increased to enhance legibility and the fonts are displayed in sizes that pay
respects to a visual hierarchy. Additional white space at the bottom of each section creates separation between the elements and
allows space for the section to appear fully when linked beneath the fixed header.
Continued...

46
Website Design
Design Rationale - Responsive Design
Colour: The decision was made to continue working in monochrome, however reverting back to my original designs by choosing only
to work with black and white. It is believed that although the purple (#9D76A7) was symbolic of my values and the brand’s focus
on being perceived as creative and imaginative, going with black and white with the colour pop of my images was believed to be a
stronger design decision. This monochromatic colour scheme was chosen to afford simplicity, with the aim of creating a unified and
harmonious design. It is also believed the purple communicated a feminine feel that was not necessarily valued as it is could possibly
narrow the scope of my audience. This design decision was reinforced by the additional emphasis it places on my gallery images.
Font: My rationale for using Josefin Sans and Grand Hotel remains the unchanged.
Contrast: In addition to my previously established rationale involving the use and creation of contrast, as changes were made to the
colour scheme (specifically the purple rectangles I used to separate sections in my fixed design), I needed to create contrast between
sections in other ways. This was achieved by coherent styling of the section headings with uniform double lines spanning either side
the titles. The lines stretching across the width of the screen ensure visual separation and are a clear representation of entering a
different section of content. The use of imagery contrasts well against the white background and text.
Repetition / Unity: In addition to what was mentioned about the fixed design, it is believed the final elastic website design has
improved its sense of unity by more closely considering alignment whilst still exercising some variety with the use of full width sections
as well as the Golden Mean. With the repetitive use of two fonts reflecting the hierarchical structure of the content and Grand Hotel
being well matched to the style of my illustrations, it is believed a unified aesthetic is acheived. These design decisions effectively
reflect my business’s values of reliability and consistency.
Alignment: In addition to what has already been mentioned, the section below the hero image and the contact section implement
the use of the Golden Mean. The styling and positioning of gallery images has been improved so they remain evenly spaced and
aligned across different screen resolutions, and reference is made to the Rule of Thirds with screen widths greater than 768px.

47
Website Design
Proximity: Some additional considerations were made in relation to proximity when developing the fixed website into an elastic
design that responds to the screen width. When downsizing from desktop to tablet dimensions, the proximity between my content
that used “asides” to display the Golden Mean became smaller and smaller which resulted in the page appearing cluttered and
decreased legibility. It may have also been threatening to the natural F-shape approach to viewing content. It is not usually
recommended to remove elements entirely when working with responsive design however I value being concise and I wanted my
website’s focus to be on my artworks rather than distracting the viewer with unnecessary things or content that could be found by
visiting my other web presences. This aligns with my objectives of making my business information available and selling a product or
service in the future. For these reasons, the decision was made to hide the Instagram widget / iframe as well as the photo of me
situated next to the contact form when viewing the website with smaller screen widths. The Instagram mashup is hidden below 884px
and the profile photo hides upon entering “tablet mode” (768px and less).
Navigation: I decided to have the navigation convert to a three-bar button that expands on screen resolutions with a width of 575px
and less as that was the point where the navigation text fits and all four navigational items are able to be viewed across the width of
the screen, without needing to decrease the size of the text which would put legibility in jeopardy.
Contact and Footer: By having a contact page with a functioning form as well as links to my other web presences (including social
media), I have adhered to my objectives of obtaining feedback and networking by giving viewers opportunities to get in contact and
connect on other platforms.
Continued...
Design Rationale - Responsive Design

48
Time Log
Date
24/05/17
26/05/17
26/05/17
28/05/17
31/05/17
02/06/17
07/06/17
09/06/17
10/06/17
14/06/17
16/06/17
24/06/17
25/06/17
26/06/17
Time Spent
30 mins
60 mins
45 mins
30 mins
30 mins
150 mins
90 mins
60 mins
45 mins
45 mins
30 mins
30 mins
90 mins
30 mins
Task Description
Initial wireframing process – rough idea generation with pencil and paper. Explored home page, about section and how the gallery
may be displayed. Navigation was trialled in both vertical and horizontal styles.
Browsing websites on awwwards.com for inspiration. Explored the categories of Art & Illustration, Blogging, Design Agencies and
Web & Interactive, as well as those sites with the tags: CSS3, Clean, Design, HTML5, Graphic Design, Minimal, Photography, Portfolio,
Single Page and Typography. Decided on three sites to analyse as competitors.
Consolidated and refined wireframe ideas with Adobe Photoshop.
Defined site purpose as well as prioritised and justified site objectives.
Home page wireframe made into a simple box model using HTML & CSS that includes a header, main content section with columns and a footer.
Completed Competitor Analysis: assessed three websites found through awwwards.com that have impacted my design decisions by
analysing their use of colour, font, contrast, repetition / unity, alignment and proximity. Summarised findings in relation to website.
Colour Layout – wireframes that had been formed in Photoshop were developed to include additional details such as font choices,
the use of colour and social media icons.
Refined HTML & CSS box model structure and added in the structural differences between the different pages or sections of my single page site.
Completed a Target Market Profile for a primary and secondary user of the site.
Developed Photoshop Colour Layout designs to include imagery and portoflio materials.
The images to be used were optimised and resized accurately to fit the space and to minimise download size and load time.
Drafted up some writing for the website with the aim of being concise and stating the conclusion first.
Continued the development of the website with HTML & CSS - rigged to be a single page design with a fixed header including
inline or horizontal navigation.
Images imbedded into HTML and evenly spaced with CSS.

49
Time Log
Date
28/06/17
28/06/17
30/06/17
01/07/17
02/07/17
02/07/17
02/07/17
18/07/17
28/07/17
29/07/17
01/08/17
01/08/17
04/08/17
04/08/17
04/08/17
Time Spent
90 mins
30 mins
90 mins
90 mins
60 mins
60 mins
30 mins
120 mins
180 mins
120 mins
60 mins
210 mins
20 mins
10 mins
15 mins
Task Description
Researching and reading on stackoverflow.com and coderwall.com - trying to use Google Fonts with the @font-face rule,
and correctly link fonts from relative folder without referencing an external server.
Coding the utilisation of fall-back fonts.
Researching single page websites and ways of getting navigation links to appear “active” when viewing different sections of the site.
Proved to be very difficult without the use of JavaScript or PHP.
Designing documentation - arranging and laying out all the different sections and elements of the presentation with inDesign.
Futher work on the design documentation.
Proposed site design summaries / rationale for about section, illustration and photography sections and the contact page with form.
Revision History and Self-Assessment.
Reviewed feedback, clarified uncertainties and made minor alterations to HTML & CSS.
Updated Photoshop Colour Layout for desktop to reflect development changes and suggestions.
Designed Wireframes / Colour Layouts for tablet and mobile.
Updated design documentation to reflect James’ feedback.
Made changes to HTML & CSS fixed design based on feedback.
Worked on CSS media queries to make my fixed design respond to different screen resolutions (breakpoints for tablet and mobile).
Added dimensions to image names and altered the CSS so my gallery images display correctly across different screen resolutions.
Fixed my navigation links so the whole button is clickable rather than just the text.
Prevented horizontal scrolling on tablet and mobile.

50
Time Log
Date
04/08/17
04/08/17
05/08/17
05/08/17
05/08/17
05/08/17
05/08/17
05/08/17
05/08/17
05/08/17
Time Spent
30 mins
40 mins
30 mins
45 mins
120 mins
30 mins
120 mins
120 mins
45 mins
30 mins
Task Description
Incorporated mashable content through the use of an iframe and a widget to display my Instagram feed.
Added links to other web presences via icons in the footer as well as adding an image next to the contact form.
Added double lines on either side of headings to match my initial designs.
Looked into PHP but settled on simply adding and styling another page to appear once the form has been submitted.
Fiddled with media queries to ensure website elasticity.
Ensured HTML & CSS was effectively commented to exhibit understanding and reference sourced code.
Updated documentation to include additional wireframes, colour layouts, final designs with HTML & CSS as well as my responsive design rationale.
Researching how to get anchor points for single page navigation working in Firefox with little progress or success.
Completed Self-Assessment of Responsive Website Design.
Added final touches to Design Documentation.

51
Revision History
Date
07/06/17
14/06/17
25/06/17
25/06/17
18/07/17
28/07/17
04/08/17
04/08/17
05/08/17
05/08/17
Changes Made
After completing the Competitor Analysis, the decision to design a single page website was made. This decision involved altering my multi-page wireframes to function in a
way that catered to the single page design including the incorporation of stylistic separators (blocks of colour / line). I experimented with alternating between white and a
pale purple background but it looked washed out so I settled on simple rectangles in the same shade of purple as the header and footer with the objective of
emphasising a unified aesthetic.
During the process of converting my wireframes to colour layout diagrams in Photoshop, it became apparent that the hero image I was considering using was far too tall
in height. Without being cropped, it would take up the majority of the screen and that wasn’t the objective. The decision was made to significantly crop the illustration, thus
putting an emphasis on white space and a right-alignment.
When coding the website to have a fixed header and horizontal navigation bar, the decision was made to display the header and footer with a solid purple background to
add a burst of colour to the website. In doing so, it became more apparent that the navigational links required additional contrast so it was decided that in order for them to
appear most legible and functional, they should have a white background.
In addition to the above, when working on the navigation it became clear I didn’t have enough digital works I wanted to present so I made the decision to condense my
gallery of works into two separate sections; illustration and photography. With the addtion of a home page navigational link, I aimed to incorporate a landing page in
addition to my content pages so to allow the opportunity to work with a hero image that reflected my creative style without the commitment of it appearing on every page.
Following the submission of my Fixed Website Design, my lecturer / tutor James suggested I aim to design and create my Responsive Website Design more inline with my
original wireframes / Photoshop colour layout. The decision was made to remove the purple and keep things simple with a monochromatic colour scheme using black and
white, with the colour pop of my images. It was also decided that my hero image would be more impactful and reflective of my works if it wasn’t cropped.
The section to the left under my hero image and the about section were a bit of an unnecessary double-up, so I merged the two pieces of text under the hero image, moved
the profile photo to sit next to the contact form (in desktop view, hidden on other devices), and removed the about section from the navigation.
After doing the mashable content (Instagram iframe / widget), it became apparent that it would more consistent to have the username link below left-aligned.
When adding the icons linking to my other web presences to the footer, it looked and felt more balanced to have the footer’s contents centered.
Removed the “separator” class that displayed visual separations between sections (previously purple rectangles)
with the “fancy” class that displays double lines on either side of the section headings to be more aligned with my original designs.
Added my profile picture next to the contact form for a personal touch (is hidden on tablets in portrait and on mobile as it is not an important part of my site).

52
Self-Assessment - Fixed Website Design
Areas In Need of Improvement:
Areas Most Proud Of:
Comments:
- Decision making skills (I felt as though the process of completing the Competitor Analysis and Target Market Profiles was productive and
rewarding. If I had completed these exercises before approaching wireframing, my wireframes may have had more lasting results with the
additional knowledge of the way competitors approach design and my target markets’ objectives and expectations.
- Processes, in terms of getting too involved in individual aspects. A more well-rounded approach that places emphasis on paying attention to
multiple aspects would be more efficient and time effective (big picture thinker).
- Attention to monitoring time taken to achieve tasks (found myself getting caught up in researching and testing out different approaches, whilst
neglecting effective time mangement)
- Designing and creating a finished product reflective of desired branding and objectives.
- Clearly displayed code that’s easily understandable and well-formatted.
- Adapting to circumstances - designing to suit the skill-set obtained throughout the course so far as well as obtaining some additional
knowledge. I feel I was able to find a nice balance that went against my usual tendency to try to go far and beyond the expectations.
- I spent a lot of time and put in a lot of effort to produce the design documentation and Competitor Analysis and I feel I was able to achieve a
well-rounded, detailed result. I really enjoyed the research stage.
85 out of 100
I really would have liked to use Javascript so I could code active links to display a style when viewing different sections of the single page site
however I was slightly tunnel-visioned with the content we had leant throughout the course and wanted to explore that so a lot of time was spent
searching for HTML / CSS alternatives where it could have been used more productively. Same goes for trying to use Google Fonts in an
offline environment; for some reason I just couldn’t seem to get it to work. I should have brought up this issue sooner but at an important stage
I fell ill and wasn’t as prepared as I would have liked to be. Now having a deeper understanding of the markup language and CSS, I feel as
though the wireframing and Photoshop colour layout processes will be far more efficient in producing functional results.

53
Self-Assessment - Responsive Website Design
Areas In Need of Improvement:
Areas Most Proud Of:
Comments:
- Being more accurate with my percentages and incorporating the use of “em”s in my responsive design.
- Perhaps more well thought out hierarchies in my structure.
- Developing and/or researching a more efficient approach to displaying content below the header and navigation in a single page design with
a fixed header and navigation.
- My improvement in the processes involved. I feel as though I was far more efficient. I avoided getting fixated on small aspects by moving on
after some time and then returning to the issue with a fresh mind and more experience.
- Specifically, I implemented the wireframing and photoshop colour layout processes to aid my website development which was successful in
increased my efficiency and accuracy.
- Being more disciplined with my time log, which resulted in it being a more rewarding process.
- My ability to problem-solve. When having difficulties, as I was better educated, I was able to find effective solutions with greater ease.
95 out of 100
- I would have really liked to get my expanding navigation from the three bars icon to retract again once a link was clicked, however as this
involves Javascript and/or Bootstrap, I made the decision to pursue that goal at a later date.
- In addition to this, if I had more time I would have liked to play around with the snapwidget script that provides my instagram iframe in hope
of getting the photos to link directly to instagram instead of their site.
- Unfortunately I was unable to get my single page navigation to function properly in Firefox and this has left me feeling frustrated and
disappointed. I spent a long time researching, reading forums and trying out different methods but I was unsuccessful. I will be sure to continue
to pursue this goal of browser compatibility in the future. Thankfully, my website functions true to my design in the most popular browsers.

Olivia's Responsive Web Design Project

More Related Content

What's hot (19)

Similar to Olivia's Responsive Web Design Project (20)

More from OliviaMeredith3 (7)

Recently uploaded (20)

Olivia's Responsive Web Design Project