Here you can see that the Bear's Den logo writes itself, coming onto the screen. This is the first thing that will happen on the home page. The then ISLANDS text will drop down from the top, and the islands one by one fade into the page, depending on how many have been released. This creates much more interactivity on the home page. This is for the website and mobile version of the site. From here (on the website only), you can click anywhere on the page, or scroll, and the main home page will slide up from the bottom, and the initial page will slide up off the screen.
On the website only version, when you hover over the islands they grow slightly in size to indicate they are being touched. The when you click on an island the view zooms in one that one island, with the other islands fading out of view until they are no longer there, so the selected island fills the page in the right way. The information for the link then slides down from the top (the same as for the ISLANDS text on the initial home page), as well as the white background that the information sits on.
 |
| You can see one of the islands has grown in size as the mouse hovers over it. |
 |
| The view zooms in one that island until it is this close. |
 |
| The information and page slide down from the top of the screen. |
 |
| Until they sit in place like this. |
For the mobile version of this feature, when you click on an island the view zooms in the same as the website, until the island fills the screen, and in this zooming in process all the other islands fade out. From here similarly the information will slide down from the top into place. Then you will be able to slide left and right through all the different unlocked islands. When you swipe to a new island, the page views already loaded, it doesn't go back to the initial page and zoom into the island then drop the information, everything is already there and loaded.
 |
| Initial home page is a lot more simplified, with no social media keys shown, these only appear once you click on something. The top menu bar is also greatly simplified as well, with the islands themselves taking up majority of the space, to make them as large as possible so people don't accidentally click on the wrong island, so the top menu is simple to not overcomplicate this home page. |
 |
| From clicking on the menu bar in the top right corner, this menu slides down from the top of the screen, showing all the different options available to you. The islands also fade out of view not to overcomplicate the page. To close the menu you imply click back on the menu button or on the sea area. |
 |
| example log in or sign up page. Which option you are on is highlighted the same green as the social media icons, taken from the colours on the islands themselves. |
 |
| Example island page, an exclusive clip from a music video, with a short caption below explaining what this is. As you can see the island is visible behind the page information to remind you which island you are on. |
 |
| Another example page with more content, so the white background box extends only to the top of the icons, which is as far down as it will go,so the sea will always be visible, creating an effective final point to the page. This time this is a page from the menu instead of an island, so no island is visible in the background. This news feed shows only information from your country, which you select when you sign up, to create a personalised feed when you're signed in, but all the information when you're not. |
The feedback from ONLY Studio has been taken into consideration and applied in these designs, such as the "pre-order" text being constantly visible on the desktop version instead of "login", to promote the sales more. The social media icons were also removed from the home page of the mobile version, to make more room for the islands themselves, so people don't click on the wrong island by mistake as they're too small and close together. A moving GIF has also been produced, to demonstrate how this would appear on the initial first image screen on the website, creating more interest on the page.
This has been a very interesting and challenging brief, as I have never produced anything for web before, so it has taught me a lot about how much you have to think about when designing websites or apps, and not just the way they look but how they move and how you interact with them as well. It was very beneficial to get feedback from ONLY Studio, as our work was looked at from a web design specialist, so they knew exactly what they were talking about and how it would work in the working industry, and what things would work better or worse in practice as well, which was great to learn how they look at design, from a potential users perspective, but also a very almost critical perspective as well in relation to dimensions and feasibility of space.
Digital Production:
If this website was to be produced commercially, the designer would only have to design the way it looks, the basic structure, and possibly create a few moving parts as have been done here, but then this structure and aesthetic would be handed over to the developer to produce and actual make work, still having the designers input to ensure everything looks as it should do and everything works in the way the designer envisioned.
However in the studio, because we are designers, we can only design the website and create a few moving aspects rather than create the whole thing coding and all, as this is not our speciality and we are not taught this on the course. This therefore means we are stuck at the design stage, and to get a website actually produced would have to pass our designs onto a developer or use a website creating website such as weebly or wix, which does everything for you, you just have to drag and drop things into place.
Non-digital production:
When producing the artwork for this brief, the islands illustrations in particular, they were produced using watercolour paints and free hand painting them straight onto a sketchbook page, without putting any kind of mark or guides down beforehand. This created a very free appearance, one that didn't look structured or planned, which is really appropriate for islands themselves as nobody plans to build an island, nature creates them. These watercolour paintings were then photographed and uploaded into Photoshop and manipulated to create a slightly more stylised appearance, one that still looked like watercolour though, as this is an important feature to show off. If this was to be produced commercially, this hand rendered aspect would probably be produced digitally using watercolour brushes on Photoshop to create a much cleaner approach. Or a designer would produce the watercolour islands in exactly the same way that I have done, actually painting the islands using watercolour paint, perhaps with more of an original idea as to what the islands should look like or what space they should occupy.
No comments:
Post a Comment