In week 3 of The Designers Toolkit we were tasked with creating a Landing Page and a Product Page for a mountain biking company. We were given the copy that needed to be included and must do create the app in the dimensions of an Ipad.
As we are focusing on Balance and Colour for this task we had to follow some given rules being, One set of designs using symmetrical balance, another using asymmetrical balance. And one set using a complimentary colour scheme, the other using contrasting colour scheme and we must use at least 3 of the images.
As we are focusing on Balance and Colour for this task we had to follow some given rules being, One set of designs using symmetrical balance, another using asymmetrical balance. And one set using a complimentary colour scheme, the other using contrasting colour scheme and we must use at least 3 of the images.
|
|
Following this I had looked for some complementary colours schemes which I thought would be effective in creating the app and would give the feel that would go with a mountain biking app.
|
|
Following this I started taking some of my thumbnails which I found used both symmetry and asymmetrical the strongest and developed them further using complementary colour schemes.
For this first design I wanted to layer images of the bikes vertically and then have each one on a contrasting background colour. I will play with both symmetrical and asymmetrical layouts for this design.
First I had to decide how I wanted to layout the text and information that would go for each bike. I felt this first design looked really flat so I added a gradient to it and experimented with the symmetrical and asymmetrical layout of the text.
|
|
|
|
|
|
Following this I had put it into the correct dimensions for the iPad and made any smaller changes.
|
|
|
|
I wasn't really liking how this was looking so decided to move onto the next design.
For this design I wanted to have a tab system In when the user either clicked the chosen tab or scrolled down it would filter between them all and show the chosen page, doing this allowed me to incorporate the navigation menu into the design.
|
|
|
|
Once again I had done both symmetrical and asymmetrical designs for this.
I really liked this colour scheme so I wanted to experiment with using it in an asymmetrical layout.
I had then chosen to develop this a little further and add some of the bikes to it, creating an experimental asymmetrical layout.
When I used the dominant colour the whole way down the design it looked very plain so I added in some structure likes to help fill the design out more.
When I used the dominant colour the whole way down the design it looked very plain so I added in some structure likes to help fill the design out more.
|
|
https://xd.adobe.com/view/2fc2d6bb-09ba-44f8-9679-06ff7b2105e2-7a91/?fullscreen
So far I wasn't liking how any of these designs were looking as I felt they had a childish vibe to them due to using multiple colours, and trying to force a strong use of Symmetry and Colour which would normally come naturally in my design process, so I decided to just limit myself to the amount of colours used in one design, but still using colour, and just to design without forcing the symmetry too much.
For this design I wanted to have more emphasis on my type of design style so I went down the more minimal route, still using colour, just less with more of a contrast between white, black and then a few other colours.
Below I had tested some colours which I thought would have a strong contrast together.
Below I had tested some colours which I thought would have a strong contrast together.
|
|
|
|
|
|
I decided that I felt the Black on Yellow looked effective so I chose to continue with that design.
I had started with the what would be the landing page, to include this in the above landing page I would have it scrolled down from above to ensure that I'm following what the brief asked for,
I had started with the what would be the landing page, to include this in the above landing page I would have it scrolled down from above to ensure that I'm following what the brief asked for,
|
|
|
|
Following on from this I started on the product page.
|
|
|
|
I then wanted to add more colour contrast into the design but without overdoing it so I used a display typeface which I found really effective and added some complementary colours for the names of the bikes, then layered it behind the bikes.
|
|
To the right I had also experimented with making the type appear even bolder as the design felt very flat and the text while being a focal point still felt like it just faded into the background so I layered a different colour behind it to bring it forward more.
|
I really liked how this turned out as it had the minimal vibe which I like but while keeping the symmetry and contrasting colours, while also being different to more commercial mountain biking app stores.
|
Below are the 2 thumbnails which Ive chosen to develop next. With this design I'm wanting to accomplish a clean and minimal look once again but by splitting the page in two with complementary colours.
|
|
Starting this I wasn't too sure on how to create the whole thing with symmetry, or to have a section which uses symmetry and then the menu down the side.
I really like the contrast between these 2 colours so I will incorporate these into my design and use these as my colour scheme along with Black and White accents.
I really like the contrast between these 2 colours so I will incorporate these into my design and use these as my colour scheme along with Black and White accents.
|
|
|
|
|
|
Once I had found a general layout which I found effective I started adding more detail to it.
|
|
|
Following on from this I wanted to experiment with just using either the red or the blue to see how that contrasts with the white and black.
I also wasn't liking how separate the two colours made the design look by splitting it in the middle, so I tried having the bike over the middle of the 2 colours.
I also wasn't liking how separate the two colours made the design look by splitting it in the middle, so I tried having the bike over the middle of the 2 colours.
I really liked how this looked so I experimented with removing the black menu boarder on the left side and leaving the text up there.
I had then also tried centring all the text to create a symmetrical layout.
I had then also tried centring all the text to create a symmetrical layout.
|
|
I then chose to include the navigation in the symmetrical layout.
After this I had just done some experimenting with small accents such as the type, typeface and how I wanted to layer it.
|
|
I had also tried with some serif typefaces to give it a more high end / upper class experience.
|
|
|
|
I wanted this to scroll downwards and the text would appear first and then the bike would come up over it as you kept scrolling.
https://xd.adobe.com/view/380a3fd6-f6ce-4d5b-8ee1-dfe3334c18ae-6d59/?fullscreen
https://xd.adobe.com/view/380a3fd6-f6ce-4d5b-8ee1-dfe3334c18ae-6d59/?fullscreen
In the brief it said we had to use all the given copy and 3 images in the 2 pages, landing page and product page. I was struggling with this because the given copy didn't feel right to be on the landing page. But we were allowed to adjust the dimensions of the page to allow page scrolling.
I wanted to pounce on this and use this in my designs to give me a lot more freedom in my design.
With this being a UX/UI task, I chose to continue the rest of this task on Adobe XD, the industry standard for creating and prototyping apps and websites.
I had started with just a simple layout to allow me to go from the landing page, to the store page and then to be able to scroll left and right to view all the bikes available along with the given information.
I wanted to pounce on this and use this in my designs to give me a lot more freedom in my design.
With this being a UX/UI task, I chose to continue the rest of this task on Adobe XD, the industry standard for creating and prototyping apps and websites.
I had started with just a simple layout to allow me to go from the landing page, to the store page and then to be able to scroll left and right to view all the bikes available along with the given information.
|
Following this I wired it all together and created a flow.
This was just me testing out the software and experimenting with this as it doesn't relate to the brief. PROTOTYPE 1 https://xd.adobe.com/view/7e44afed-beeb-4fb3-b71b-0e3a2847d577-2b17/?fullscreen |
I had then created a few different prototype versions using some of the designs I had created above.
https://xd.adobe.com/view/bc544a4d-1264-4c44-a4fa-6c230aed8aaa-e907/