Below is the main homepage showing the sidebar extended with the names of each city revealed, as well as reduced showing only the squares to minimise distraction from the photographs. Underneath, the alternative comparison page shows navigation between photographs and additional information unveiled to inform the user about what they're viewing. Essentially, the second page is more informative than the first, however the audience can utilise the website in different ways to compare the architecture in the way they feel best suits their intention.
I also created wider versions to show how the webpages are viewed fullscreen on larger desktop computers. The homepage allows more photos to be shown at once, making it easier to compare architecture from two different cities by seeing the photos as a collection. The single photo comparison page is widened leaving more negative space around the photographs. It also means that when navigating through the photos, the user sees part of both photographs as they transition left or right.
Mocked up on screen the designs can be seen on a smaller sized web browser compared with a full screen view of both pages. The design is responsive by working on mobile devices as well, on an alternative 'mobile site'.
Evaluation
Overall my website has a minimal design with the main purpose being to compare photographs, which is why there isn't much text and only shades of grey for colour. To make the design slightly more interesting, and if I had more time, I would like to have used my primary research drawings as a reference point to create miniature icons which represent the architecture of each city or country. These would replace the small squares so when the sidebar is reduced, the icons would be more memorable than the order of the identical squares.
If I was to change anything, the first thing would be to put a constant link in to switch between homepage and the separate comparison page, probably somewhere near the about link which opens the information box. I don't think the disappearing button on the right hand side is easy to access and doesn't make sense for it to be there, therefore may go unnoticed without an explanation.
This user experience design could be improved by making the website easier to navigate for first time users, which could be done by either having an small introductory tutorial as the site opens, that shows the main four features such as the extending sidebar to choose the cities. The homepage loads with the sidebar open however, so a clue that you can click the title to shorten it would be helpful. If I was to include this, there would be a skip button for returning users.
I would also like to include an archive page, where all the photos from one city could be seen on a single page, similar to a contact sheet. This means the site could be used for reference or more specific research, and returning users would be able to find something they're looking for more easily.
Concerning search engine optimisation, I feel that there's a good amount of information included that would rank the site higher in search results, such as the info on the 'about' section. To improve this, a possible change in title from 'architecture in Europe' would be advisable, perhaps including the word 'comparison' or similar to instantly show users the purpose of the website. Ideally, if the site was going live, I would intend to publish photographs regularly that fit with my continuous exploration of architecture in Europe, which would also increase the site's search engine optimisation. A public comment or discussion board may also be useful, and with more time I would have liked to develop these ideas into full designs.
Although it's not necessary for graphic designers to code a website, it's essential to understand what's needed to do so, to make the job easier for coding specialists. Nevertheless, I would like to experiment a bit more with coding if I get the chance, which I think will help me to create designs that consider every element of the website. With more time I'd like to work on the mobile version of the site by expanding the number of pages you can access and links within.
Concerning search engine optimisation, I feel that there's a good amount of information included that would rank the site higher in search results, such as the info on the 'about' section. To improve this, a possible change in title from 'architecture in Europe' would be advisable, perhaps including the word 'comparison' or similar to instantly show users the purpose of the website. Ideally, if the site was going live, I would intend to publish photographs regularly that fit with my continuous exploration of architecture in Europe, which would also increase the site's search engine optimisation. A public comment or discussion board may also be useful, and with more time I would have liked to develop these ideas into full designs.
Although it's not necessary for graphic designers to code a website, it's essential to understand what's needed to do so, to make the job easier for coding specialists. Nevertheless, I would like to experiment a bit more with coding if I get the chance, which I think will help me to create designs that consider every element of the website. With more time I'd like to work on the mobile version of the site by expanding the number of pages you can access and links within.
No comments:
Post a Comment