Doggy Dating Find Your Dog A Mate
Contents The Brief
4
Introduction
5
Icons Outlined
6
Icons Filled
7
Typeface
8
Colour Scheme
9
Structure
10
In Practice
16
The Brief - Universal Interface Symbols Interface design is something that has now become increasingly popular within today’s society and an application we can use on our mobile phone and tablet is something of the ‘norm’ nowadays. As a Graphic Designer we may not necessarily be the ones coding the application but we can certainly design it. The brief was to create a brand new application which could be anything from organ donning to banking to dating to ‘cloud’ workspaces. We were asked to design a set of symbols that would reflect and communicate the application and the ideas that were created behind it. This would form a starting point and allow ideas to develop further and within this process I then decided to create a application which would be called ‘Doggy Dating’ aimed at dog owners breeding their dog, The symbols needed to be universal and clearly understood throughout the whole of the application providing a simple yet affective approach. Each symbol needed to be reduced down in size and still maintain its form without distorting in anyway. Not only did these icons need to look good reduced and enlarged, but most importantly they needed to be consistent and work together collectively throughout.
The problem and the solution Currently on the market there are several existing similar applications but none of which focus purely on finding another dog in which your dog can breed with. Most of the current applications are aimed mainly at the owner of the dog but the intention is to find someone who has a dog in order for you to meet up all together. Other existing applications focus on dog walking or house sitting when the owner is away. If you’re looking to breed your dog you can either advertise in the local newspaper or use websites online designed for breeding. Owners looking for a more immediate effect and a situation that they are in control with would benefit from Doggy Dating. The focus is going to be purely on the dog rather than the owner themselves which would allow this application to stand out in the app store and increase the amount of app users. There would be several features much like our dating sites which would allow the user to directly message another user and also to arrange a meeting. The user is in control and can pick and choose other profiles they are interested in. 4
Introduction Doggy Dating is an application which allows the user to search and find another dog in their area to breed with there own dog. Its much like a usual dating site we would use to find a partner - except this is for dogs! Within this application you can search for the breed of dog you desire and in exactly what area you need, this enables the user to find a match quicker. You’re able to create your dogs profile much like a human dating site which will give details on age, gender, location and if the dog has had previous puppies and when. Not only does this application allow you to search and find other dogs, it also has added features which allow you to message the owner and arrange a “date” as such for the dogs to meet. This is under the ‘Walks’ section of the application and can be found from the home screen and easy access from the profile and messages page. This allows the user to not only find a breed for their dog, but to also socialise and encourage them to meet new people which they can make their own connections with for future reference. The application is designed to be cheerful, fun and playful - almost reflecting the characteristics of a puppy. This is demonstrated through use of colour, layout and the creation of the icons and ideas behind them. Although having these playful moments it also has a functional purpose with ease of navigation from each page to the next. The layout is consistent across the application giving the user a better experience which once acquainted with the structure has each page at the end of their finger tips.
5
Icons Outlined Messages - This icon is derived from a speech bubble much like most messaging icons making it quick and easy for the user to identify. The edges have been rounded to be consistent with the rest of the application and the word ‘woof’ added. This is to represent the application as when dogs talk to each other we hear wood but to also keep playful as well as fun rather than a serious tone throughout. Profile - Most applications nowadays that require a profile usually involve a head and shoulders or face outline of some sort. I wanted to move away from this to represent the profile being a dog rather than a person but still make sure it was in keeping within the set of icons and feel. This icon shows an outline of a dogs head which again has rounded edges but includes the cute little extras such as the ears. Breeds - As there isn’t another application that has this feature to search for other dogs in this way this icon is one that would be new to the user and purely created for use within Doggy Dating. Its an icon that can be associated with every dog breed as all of them needed representing. This is also used as the app icon but overlapped representing a male and female paw and the different breeds. Settings - Every application needs a settings icon and page where options can be tweaked and changed by the user either for safety or notifications. Again the settings icon is quite well known and is usually a cog or tools of some sort which I have tried to interoperate in with the feel. A spanner and dog bone not only represents the settings part of the icon but also falls in line with the application. Favourites - Other dating applications and websites that are already on the market for us usually have this feature in which we can access our favourite people quickly and at ease. The favourite icon is in a shape of a heart and when in colour is red to resemble love. As the user would be adding dogs to their favourites, they’re short listing dogs which are potential love matches for their own dog to breed with. Walks - Again much like the breeds icon the walks icon is something new and will purely be used for Doggy Dating. As its not a recognised icon it needed to be obvious and playful but still remain consistent with the whole set. This is a extra feature which both dogs can meet up and go for a walk, therefore it seemed only right that the symbol represent an area you’re most likely to walk them - a park! Home - Every application needs a home icon to let the user navigate from the home screen and back again. Most home icons that take you back to the main menu are usually a house of some sort and this is such an important icon I didn’t want to change it dramatically. I’ve changed the usual house icon to a dogs home as such representing a kennel which hints at the usual icon but represents the application. Cost - It seemed only right and polite to show within the app how much it would cost the user if they wanted to breed their dog with another. Again much like the walks and breeds icon this is something that would be new to the user but used in context of this application is completely understandable. Taking the pound symbol and adding in a dog bone represents the applications and still remains obvious.
6
Add to Favourites - This particular icon only appears on the dog overview page which is just before you view the full profile. It allows the user if they think the profile looks suitable to add to their favourites and then continue on to the full profile. As this is part of the profile pages using the profile icon to form a bases showed continuity and by adding in the heart this links to the favourites icon. Don’t Add to Favourites - Linking to the previous icon, this allows the user to continue to look at the full profile but they don’t have to add them to their favourites. This idea is a usual feature in our dating websites and applications and just prompts and reminds the user if they add them there profile is easier to find for the future. The icon taking the same ideas to the previous icon but adding a cross.
Icons Filled
7
Typeface Throughout the application there are two typefaces that are used. The first being Grand Hotel which is used for the headlines at the top of each page. The second is Franklin Gothic Medium which is used for
the text within each page for example the description on the profile page and text within the messaging pages. Neither are purely used in capitals or lowercase they should only be title case or sentance case.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz - Grand Hotel 35pt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz - Franklin Gothic Medium 30pt
8
Colour Scheme Here is a list of colour codes for the colour scheme used within the application. These indicate the only one background colour that is used throughout, the main four colours for text and icons and the colours
for the shadows. The colour scheme is bright and continues the feel of the application being playful, cheerful and fun. Only these colours are to be used within the application and the application icon.
Background Colour
C:7 M:3 Y:12 K:0 R:241 G:241 B:230 HEX:F1F1E6 Main Icon Colours
C:0 M:69 Y:46 K:0 R:237 G:110 B:111 HEX:ED6E6F
C:68 M:2 Y:38 K:0 R:69 G:182 B:172 HEX:45B6AC
C:0 M:51 Y:49 K:0 R:242 G:150 B:123 HEX:F2967B
C:57 M:0 Y:45 K:0 R:117 G:193 B:162 HEX:75C1A2
C:66 M:10 Y:44 K:0 R:88 G:173 B:157 HEX:58AD9D
C:11 M:56 Y:48 K:1 R:221 G:133 B:120 HEX:DD8578
C:60 M:13 Y:51 K:1 R:112 G:173 B:144 HEX:70AD90
Shadows and Highlights
C:14 M:70 Y:47 K:3 R:208 G:100 B:106 HEX:D0646A
9
Structure Throughout the application there are several pages which hold different features and are designed for various outcomes. The structure of the application remaines near enough the same and is one that is consistent throughout. Using normal and expected conventions of structure from an appplication I was able to build each page which would flow from one
Main M e n u
to the other. No matter what the content was on each page they all had to adhere to rules I had created within each page. This included space for type, shapes, the icons and negative space to keep the page from being cluttered. Below is some examples of four pages from the application and then a break down of how the structure was built and how it can be versatile.
Dog O ve r vi e w
Fa vour i t e s
woof
B reed s Search
At the top of each page there is a coloured bar which holds text letting the user know what page they are currently on. The type is always in the same colour, position and size, the only change is the coloured background this depending what page you’re on. The actual content of the page varies between, images, shapes and text and this again depends what page the user is on. However the content that is within this space can change but can only be in this given space. The negative spacing around stays exactly the same even as you scroll down through one page to the next the spacing remains in place and rigid. Within the application there are several different pages and it was important to keep the icons in the same place on every page to make this easier for the user. There are two structures available for this, one which has three icons spaced out equally at the bottom if it is needed to navigate to more pages and the second is to just have one icon which is centred.
10
Just like with every application there is always a opening screen or loading screen before you’re taken to the home page or news feed. This is the only page that doesn’t conform to the structure like the rest of the pages within in the application. The background colour remains the same and the paws are in keeping
with the colour scheme but there is no text and no coloured bar the top. Above are six screens that collectively make the opening screen in which the paws move one at a time diagonally from the bottom right corner and top left corner. When they meet in the middle this then represents and links to the app icon. 11
After the loading screen the user is automatically taken to the main menu which allows the main navigation to the rest of the application. The first icon on the menu is the messaging icon which once tapped will take you
Main Me n u
to view your inbox of messages. By tapping a specific message it will then open up allowing you to see the full conversation between you and the other person. This process is shown below with the different stages;
M e ssa g e s Message Preview Here
woof
Message Preview Here Message Preview Here Message Preview Here
The icons at the bottom of each page are individual and change depending on what page you’re on but still remain within the structure. The home icon consistently stays to the right unless its the only icon needed then its centred. The next icon is the profile
Main Me n u
Messages you recieve Messages you send
Messages you receive
Messages you send
page and this will take you to your own profile in which you can edit your description and profile photo and see how others will view you. The coloured bar at the top will either be red or blue indicating the gender of the dog - red female and blue male.
Dog P r ofil e
Dog P r ofil e
Name Age Location Breed Gender
woof
More Information
12
Use r n a m e
Name Age Location Breed Gender
More Information
As this application allows the owner to search and find specifically the breed they are looking for there is a icon of a paw in which they can achieve this. This is the next icon on the main menu and will take you
to the breeds page and here is the place to search or pick a breed as you scroll down the page. Searching or selecting a breed from the page will result in the same outcome where a list of dog profiles will appear
B r e e ds
Main Me n u
Dog O ve r vi e w
Search
woof
which can be viewed by a simple tap. This will bring up a brief over view of the dogs profile with an image and depending on if they’re suitable or not can be a quick tap on the red icon with a heart for yes or orange icon with a cross for no. Again the coloured bar at the
Do g Ov erv ie w
top of the page is gender orientated to help the user see clearly. If from the overview the dogs profile looks suitable and the red icon is tapped this will take you to the dogs profile. Here you can send them a message, arrange a walk and check how much it would cost.
Dog P r ofil e
Dog P r ofil e
Name Age Location Breed Gender
More Information
Name Age Location Breed Gender
More Information
13
Much like our dating applications there is usually a feature which allows the user to ‘favourite’ other people they really like. This allows the user a more immediate effect rather than keep having to search
Main Me n u
for the user they want to message. This idea is implemented within Doggy Dating which works in a similar way and can be accessed from the main menu. By tapping on the heart icon this will take you to the
Fa vour i t e s
Dog O ve r vi e w
woof
favourites page which will bring up the profile pictures of all the dogs that have been favoured. From here you can go back to the main menu or if a profile image is tapped then it will take you to the dogs overview. This is to give the user a brief reminder and main pieces of
Do g Ov erv ie w
information. There are several further options from this page, back to favourites, back to the home page or by tapping the profile icon in the middle you can view the dogs profile in full. Here you can message, arrange a walk and check the cost.
Dog P r ofil e
Dog P r ofil e Name Age Location Breed Gender
Name Age Location Breed Gender
More Information
14
More Information
Another added feature within this application is the ‘Walks’ section. Again much like our dating websites and application there is options to arrange dates such as meeting for a coffee or going out for dinner. As this
is a Doggy Dating application it feels more appropriate for the dogs to meet up in a neutral and casual environment such as park or beach where you can walk your dog. Not only did this feel more positive for the
Walks
Ma in Men u
MON TUES WED THUR
woof
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January
dog but also for the owners to make sure they are in a safe environment when meeting for the first time. This feature has a tree icon and once tapped will take you to the next page which shows a calender. Here you can check through each much and arrange a walk on a
Do g P ro file
Dog P r ofil e
Name Age Location Breed Gender
More Information
specific date and once this has been arranged a circle will appear. Only from the Profile page can the cost page be accessed and this is structured very much like the profile page. The owner can explain in detail how much it will cost and what the agreement would be.
C ost Name Age Location Breed Gender
Name Age Location Breed Gender
More Information
Cost Information
15
In Practice Having shown the structure of the application previous to this page below are some visuals. They demonstrate what the app icon will look like on a home screen of an Iphone, the loading page once
16
you’ve tapped the app icon and a variety of different pages. These include the main menu, messages page, dog overview page and favourites all with full images to give a real feel of what the application will look like.
17