Showing posts with label Design for Web. Show all posts
Showing posts with label Design for Web. Show all posts
Monday, 13 January 2014
Friday, 13 December 2013
OUGD504 - Design For Web (6): Final Outcome
Crit
From the crit I took on board a few of the feedback comments that were made, mainly that the colour is too bright and the design might be a bit too contemporary for the subject.
After the crit we had a visiting lecturer talk in the form of Numiko, the web design company. This was a good opportunity for me to see their work and maybe draw some inspiration from it and apply it to my web design.
When they started showing examples of their work I found it was very helpful to see what they are doing in current designs and how they have designed it all.
I found particular inspiration in this page.
While designing my website I have been continually thinking about it with the typical thoughts that any designer has when designing for web, that there are loads of limitations and that designing for it is completely different to designing for print. However when I saw their work and this page it made me realise that designing for these two medias aren't really that different aside from the way they'll be displayed in the end. The build up and initial designing stages are all the same.
From their talk I drew out a few quick sketches, going from my initial idea (second from bottom on the right) to my new one (top & bottom right).
Picturing these designs mentally they worked a lot better than the ones I had at the minute and used up more of the screen space instead of leaving quite a lot of white space. I also decided that this was the time to listen to the feedback about the colour change, so instead of the bright green, I would find something a bit darker and easier to look at.
The first thing I changed was the screen size. I have found that although I was working in the standard screen size, it was quite limiting and I didn't like the fact that didn't fill the screen well. I decided to work in 1280X800 for this updated website.
To start with I redesigned the wire frames for the pages. Once again, there are three, one for the homepage, one for the five information pages and one for the timeline page.
Wire frames
After the feedback about the colour I have decided to change it to something a lot more readable.
I found that when I printed off the design sheets, as the colours were RGB they printed off a bit bluer to how they appear on screen, and the colour they had printed off in was a lot better than the green. This is my compromise so I don't have to go with black. With this blue, I have also chosen a very light grey instead of just having white.
In the designs for the buttons/rollovers I have decided to change them all from squares to circles, and will make the rollover a little more interesting visually than just changing an image to a word. They will now invert colours as well.
In regards to the navigation, on the homepage below the main buttons, I will now include the names for those pages. In terms of the navigation at the top of the content pages, I will get rid of the words that appear when hovered over as these buttons become much more memorable from the homepage.
For the timeline, the main change I am making to this page is that I want to try make it at a basic level of interactivity, where the user can click on the five titles and link to the five content pages.
Homepage
Content page
For the content pages I kept it generally the same layout, changing the navigation alignment and the way the title and date is viewed.
Something I was unhappy with in the previous designs was that I didn't have any emphasis on the dates for the alphabets, meaning it was lost in the rest of the text. I wanted to make this a clear point of reference so included it in the heading box in a much larger point size so it is very clear.
Also, on the previous design, there was nothing in the navigation bar which suggested what page you were on, so I made this change to this design, where whichever page you are on, that page icon will be inverted in the navigation bar.
The scrolling was also an issue on the last website and something that wasn't working great previously. Instead of having the single box of images/text move down, I have made it so the whole page will scroll down instead, making it a much more fluid page design.
App
After completing the website, I went to the App proposal I had previously done and reworked it around my new designs.
Something I have taken into consideration this time is when the tablet/phone is flipped horizontally. I included a couple of images to show how the information would translate to this orientation. As this is touchscreen based I made everything on a larger scale and gave a lot more space to everything.
From the crit I took on board a few of the feedback comments that were made, mainly that the colour is too bright and the design might be a bit too contemporary for the subject.
After the crit we had a visiting lecturer talk in the form of Numiko, the web design company. This was a good opportunity for me to see their work and maybe draw some inspiration from it and apply it to my web design.
When they started showing examples of their work I found it was very helpful to see what they are doing in current designs and how they have designed it all.
I found particular inspiration in this page.
While designing my website I have been continually thinking about it with the typical thoughts that any designer has when designing for web, that there are loads of limitations and that designing for it is completely different to designing for print. However when I saw their work and this page it made me realise that designing for these two medias aren't really that different aside from the way they'll be displayed in the end. The build up and initial designing stages are all the same.
From their talk I drew out a few quick sketches, going from my initial idea (second from bottom on the right) to my new one (top & bottom right).
The first thing I changed was the screen size. I have found that although I was working in the standard screen size, it was quite limiting and I didn't like the fact that didn't fill the screen well. I decided to work in 1280X800 for this updated website.
To start with I redesigned the wire frames for the pages. Once again, there are three, one for the homepage, one for the five information pages and one for the timeline page.
Wire frames
 |
| Homepage |
 |
| Content pages |
 |
| Timeline page |
I found that when I printed off the design sheets, as the colours were RGB they printed off a bit bluer to how they appear on screen, and the colour they had printed off in was a lot better than the green. This is my compromise so I don't have to go with black. With this blue, I have also chosen a very light grey instead of just having white.
 |
| Chosen Colours |
In regards to the navigation, on the homepage below the main buttons, I will now include the names for those pages. In terms of the navigation at the top of the content pages, I will get rid of the words that appear when hovered over as these buttons become much more memorable from the homepage.
For the timeline, the main change I am making to this page is that I want to try make it at a basic level of interactivity, where the user can click on the five titles and link to the five content pages.
Homepage
For this page I kept the general look the same as the previous website, but as the screen size is larger, the navigation buttons can be, and because of the colour change, they definitely become more memorable.
Below shows what happens when one of the buttons is hovered over.
For the content pages I kept it generally the same layout, changing the navigation alignment and the way the title and date is viewed.
Something I was unhappy with in the previous designs was that I didn't have any emphasis on the dates for the alphabets, meaning it was lost in the rest of the text. I wanted to make this a clear point of reference so included it in the heading box in a much larger point size so it is very clear.
Also, on the previous design, there was nothing in the navigation bar which suggested what page you were on, so I made this change to this design, where whichever page you are on, that page icon will be inverted in the navigation bar.
The scrolling was also an issue on the last website and something that wasn't working great previously. Instead of having the single box of images/text move down, I have made it so the whole page will scroll down instead, making it a much more fluid page design.
Below shows the rollover button for hovering over the symbols.
Timeline
For this timeline page, the main thing I wanted to achieve was something interactive.
To achieve this, I made the timeline image as a background image for the box, and the made the five buttons separately to be put over the top.
Below shows what happens when one of these links is hovered over. When clicked these links will take you to those specific content pages.
Finished Website
Overall I am pleased with the outcome of this website. Everything is much easier to read and the whole thing works a lot more like an actual website too.
Changing the squares to circles was definitely the best decision I have made. The whole website looks a lot softer, while keeping with my initial ideas for a contemporary design. I have kept it true to my initial designs, but developed on from what I had in the previous website.
I am mostly pleased with getting the interactive element into the timeline. Initially I didn't think this was possible at my level of coding, and I would have to just have it as an image, but I have managed to work a way around it and make it work the way I want.
After completing the website, I went to the App proposal I had previously done and reworked it around my new designs.
Something I have taken into consideration this time is when the tablet/phone is flipped horizontally. I included a couple of images to show how the information would translate to this orientation. As this is touchscreen based I made everything on a larger scale and gave a lot more space to everything.
 |
| App button |
I also put this design into what it would be if it was seen on a mobile device.
Website proposal
In terms of the website proposal, I have decided not to update this just because I have updated my website. The general options and idea behind the original proposal is still how I would want it, but the visuals would reflect the design of my updated website above.
Sunday, 8 December 2013
OUGD504 - Design For Web (5)
Website App Proposal
After completing the desktop version of my website, I started to look into designing an App version of it. I didn't want to change the design so much but I knew I had to make it more interactive as it will be on a touch screen and the user will be using their fingers to press. This means that all the rollover buttons on the homepage are pointless because when they click on them, they will be directed to the page anyway.
To solve this, I decided to recreate the buttons, putting the page titles above the images, so the user will know exactly what they will be looking at.
For the minute I looked at designing for the tablet being portrait. The desktop website is designed to be landscape so I need to get all the information on these pages to work on a portrait orientation. To solve this, I changed it so that on the content pages, the text is at the top, and the images are below, where you can scroll down to look at the rest of the images. I have also made the icons all larger so it is easier to see. The text is also at a larger size, with a navigation bar along the top which is all along the width.
For the phone App, the orientation is portrait but a lot thinner, so this was another challenge to work around. For the homepage I kept the majority of it with the same design, but made the buttons larger and put two on a row instead of three.
For the content pages, I have changed them completely. The first page is purely the information, which will scroll down if there is too much for the screen. At the bottom I put a button which will link it to the page with the images on.
I made the navigation bar on two rows instead of one, which will make it easier for the user to click on them. On each page there is also a button that will go back to the last page the user was on.
I am happy with the way both the App proposals look. They both stay within the design of the desktop website, but are more interactive and easy to use for the user.
For this proposal I widened out the content in which to use. I originally narrowed it down because there is such a huge amount and I would never be able to code it all. However as this is a proposal I can broaden that content out. I decided to do the subject of the evolution of the alphabet as a whole instead of focussing on five specific times.
My initial idea was to have the main page as one linear timeline, in which there was a navigation bar at the top with six links, and then the rest of the page would be an interactive timeline where all the information could be gone to by clicking on the titles throughout the page.
 |
| Initial idea |
- People may not want to scroll through the whole page to find what they are specifically looking for.
- The navigation bar has a limited amount on it, none of which could apply to a user
I then decided that this timeline page could be just one part of the website instead of the main page. With this in mind, I did a basic layout plan for the website.
 |
| Website layout plan |
I wanted the whole website to be interactive, but keeping in with a minimal colour scheme, like my original website.
 |
| Homepage |
 |
| Region page |
 |
| Region - when region is hovered over |
 |
| Europe page |
 |
| Origin page |
 |
| Origin - when section is hovered over |
 |
| Timeline page |
 |
| Timeline - when link is clicked |
 |
| Content page |
 |
| A-Z page |
After completing this, I looked into perhaps doing it a little more minimal, with no background colour and a thinner font used. I think this works better for the navigation bar. The navigation bar above doesn't look as sophisticated as the one below. The one above almost seems like it belongs on a kids website, which is not what I'm looking for at all.
I then combined the two. This definitely balances everything out and doesn't make it look as child-like as the first mock-up. The thinner typeface definitely makes it look a lot more sophisticated, and having the background colour a lot lighter adds to this as well.
Subscribe to:
Posts (Atom)