Tumgik
ailishcrossan-blog · 10 years
Text
Font
I decided to use the PuppyBellies font for my website as this looked childish which was appropriate for the target audience. It also had some cool icons - dog bone shown in the images below. 
Tumblr media
I also used Fontello's icon font for the symbols in my ipad version of the website. As they were clear and easy to use.
Tumblr media
0 notes
ailishcrossan-blog · 10 years
Text
Reflection
I found it too tempting to change the style of my website quite late in the project. In the future I hope to maintain the one style throughout, with smaller design changes later in the project. I also need to be more confident with my choices rather than wasting time doubting them. 
0 notes
ailishcrossan-blog · 10 years
Text
Header Change
Could not get the carousel plug in to work to have rotational images in my header, so I've stuck with the standard header. There is opportunity to do this in the future as well as using it for the pet images on each individual pets page.
0 notes
ailishcrossan-blog · 10 years
Text
Navigation Bar Development
Originally I was going to focus on incorporating a basic fixed navigation bar. However after viewing the Happy Cog website, I wanted to do something similar. After talking with my tutor, she recommended a site with the coding that would do just this, using a sticky javascript plug in. 
I got the plug in from:
http://stickyjs.com/
0 notes
ailishcrossan-blog · 10 years
Text
Design Layout Change
I decided to change the layout of the webpage.
- Removing the column at the side and instead using the information found in the column as a header for the webpage. 
- Changing the navigation bar to run across and have the logo in the middle and using just the icon without text for the login/sign up link.
- Additionally, removing the unconventional grid style for the animal options as a result of feedback from my tutor. 
Tumblr media Tumblr media
This design layout was influenced by:
Tumblr media
http://happycog.com/#top
Tumblr media
http://www.bigcommerce.com/partners/?utm_source=webdesignledger&utm_medium=cpm&utm_content=partner-ad&utm_campaign=bsa
0 notes
ailishcrossan-blog · 10 years
Text
Competitive Work - Pet Rescue Phone App
Tumblr media
This app is simple and easy to use, however it is not as colourful and inviting as the website. The Furrget Me Not app will aim to be both colourful, inviting and easy to use. 
Tumblr media Tumblr media
0 notes
ailishcrossan-blog · 10 years
Text
Development Sketches
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
0 notes
ailishcrossan-blog · 10 years
Text
Furrget Me Not - Fonts
Tumblr media
0 notes
ailishcrossan-blog · 10 years
Text
Furrget You Not - Colour Scheme
Tumblr media
0 notes
ailishcrossan-blog · 10 years
Text
Icons: Stroke and Fill
This trend gives better contrast between active and inactive sections. Recognition of active tabs, controls and toolbars is more straight forward. 
Tumblr media
This trend will be useful particularly for the development of the mobile version of the site. As it will be developed with a fixed navigation bar at the bottom of the phone, there is limited space for text, therefore icons will be the main aspect of the mobile navigation. This will also assist in the user adding items to their favourites list.
Content Sourced From:
http://www.slideshare.net/goldengekko/mobile-apps-design-trends-2014
0 notes
ailishcrossan-blog · 10 years
Text
Responsive Layouts
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
- Jeffrey Veen
Tumblr media
The idea of responsive layouts is that  sites are designed to match all forms of digital media. Therefore web designers must essentially design two similar sites, enable the code to react to the screen size and therefore still provide the user with a site that is easy to view, depending on which device they are using. 
content sourced from:
http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
http://www.hongkiat.com/blog/web-design-trend-2013/
0 notes
ailishcrossan-blog · 10 years
Text
Competitive Work - Pet Rescue
Pet Rescue is a website which enables viewers to adopt pets. This website uses bright colours and heartwarming images to grab the users attention. The website is very easy to manoeuvre through, with a navigation bar at the top and bottom of the page, as well as links throughout the page. 
Tumblr media
This site has adequately used Signature Colour as well as White Space to create balance throughout the page. 
The quality of the images and the bright colours makes the user fall in love with the animals. This is opposed to many sites who make the viewer  feel sorry for the animals, feel guilty and therefore unwilling to venture further into the site. 
The site incorporates many links with social media where users can share the animals on Facebook, twitter, etc. Users can also sign up to their Facebook for updates, or additionally receive the monthly newsletter.
Tumblr media
Additionally to searching through the animals, users can filter through the options by size, age, gender and location. This provides the user with a faster and easier service when they have more of an idea of what type of pet they want.  Overall this website provides users with a fast and simple way to adopt a pet. Their choice of navigation, colour and layout creates a great user interface design. 
Sourced from: http://www.petrescue.com.au/
0 notes
ailishcrossan-blog · 10 years
Text
Competitive Work - RSPCA Adopt a Pet
Tumblr media
This website is used for adopting animals, similar to the one I am developing. It uses vibrant colours and cute images to attract the user. Using a four column grid, content is displayed across the webpage.  
This website is not multi-platform however provides an interactive and easy experience for the user. Several good aspects which this site possesses include:
Pet Match Maker - Where users can find pets which best suit them.
Happy Tales - Where pet owners can share stories of their adopted animals
Pet Tally - Tally of how many dogs, cats and other animals have been adopted in total
As well as many other links which inform the user of what animals they have and how to go about adopting them. They also have a section on 'Caring for your Pet' which helps to prepare those thinking of adopting a pet.  The drop down menus used throughout the site are useful and neat, providing the user with an interactive experience. It also enables the user to customise the content which they are looking at and searching for. 
There are also several advertisements scattered throughout the page which would be a good idea to entertain or attract younger users. 
Overall this website is clearly laid out and easy to use. 
Sourced from: http://www.adoptapet.com.au/
0 notes
ailishcrossan-blog · 10 years
Text
Signature Colour
Tumblr media Tumblr media
A great way to stand out in the crowd of colourful, overblown website designs is to emphasise simplicity and function, without giving up on beautiful design. One variation on this theme is the use of just one bright colour against a sea of soft neutrals—like Colly.com (above). The accent colour serves to direct the eye to important information, and the neutrals let the rest of the site recede visually.
Unroll Me uses pops of hot pink against a white and grey background to highlight the three most essential elements of the page; the headline, a directive pointing to where you can sign up, and a button that initiates the sign-up process. The simplicity of this approach ensures that viewers almost immediately understand the point of the service, and are also attracted to the clean, simple interface that they can anticipate using after having seen an example in this page.
The use of Signature Colour is very effective as it provides a neat and ordered site. I think this will be useful in the development of the 'adopt a pet' website as it will bring the attention of the viewer to the most important aspects of the site, without having several aspects competing for their attention. 
Sourced from: http://www.quandtnet.de/articles/5-current-trends-in-ui-design/#
0 notes
ailishcrossan-blog · 10 years
Text
Unconventional Grids
Most websites are built on a grid, with a simple layout like a three-column grid or magazine-style arrangement. But designers have been experimenting with new layouts that radically alter or even break the grid entirely.
Tumblr media
This style gives the website a more innovative, fun and youthful look. This might be useful for the brief if users of the 'adopt a pet site' are young. However this style could be confusing for more traditional web browsers who are used to a simple grid. Since unconventional grids look unique and interesting, I think it might be an interesting way to display the images on the adopt a pet site. 
Sourced From: http://www.quandtnet.de/articles/5-current-trends-in-ui-design/#
0 notes
ailishcrossan-blog · 10 years
Text
Extreme White Space
The trend of white space has been around for a while however recently, it has been taken to a new extreme.
Tumblr media
Despite these websites looking neat, they do however appear to be rather bare. This style is best suited to websites focussing more on images, such online stores like the one shown above. The style definitely evokes a sense of opulence, therefore would most likely be best suited for high end products.
As the subject matter for this project is to develop a website for 'adopting a pet', I do not feel as though this trend of extreme white space would be a good fit.
Sourced From: http://www.quandtnet.de/articles/5-current-trends-in-ui-design/#
0 notes