Having researched into other galleries and museums websites, I had found that they all have a lot of pages. Due to my time restraints and coding ability I wanted to produce a functional website, however, I wanted it to be compact and concise.
I have also started doing some very quick layout sketches.
I decided on producing a seven page website.
Homepage
Exhibitions, talks & events
Visit/contact
About
Food & Drink
Shop
Other information.
I began my digital design by producing a selection of possible wire-frames/scamps.
I produced 4 site variatons of the pages to give me a greater choice when digitising them. Having multiple options allows me to choose elements from different ideas and put them into one design.
I then chose the two designs I perceived to be the best and the most appropriate and created them digitally.
After digitally visualising my designs, I decided that the conventional left hand-side navigation was the most appropriate. Although I thought that the side navigation was better than the top navigation, overall the simple, less crowded pages were the most effective and therefore something that I will carry through my designing and production.
I was happy with the colours, using the type factory teal for the buttons and headers and black at 50% opacity for the body copy.
With all of the designing done and having made decisions on the layout and format I started to think about the coding of the website. I first needed to decide on the page size and from research from my STUDIO BRIEF 02, I knew the size I wanted to use. The size was 1360px by 768px. This is the most popular screen size in Europe and America and has been since 2011.
I started by creating my container at this size. From there I used my digital designs and wireframes/scamps to decide on the width of my navigation bar. The width I decided on was 136px.
I then placed my logo and buttons. All the buttons were roll-over buttons so that when the mouse was over the button it appeared full colour rather than 50% opacity. I also made it so that the logo acted as a home button.
The website has been coded so that anything bigger than the container is scrollable. This occurs on most of the pages and allows me to fit more information on to a single page. I was careful not to make the pages too long so that you were not scrolling endlessly to find information.
I chose to use the 'what's your type?' slogan as it was friendly, welcoming and appropriate. I just designed it as an image before coding it and positioning it so that it looked correct.
Once my homepage was set up I produced the other pages. I coded them so that they all had the navigation bar and were linked together and functional before I started adding the content.
As with my other projects over this module and this project I have been working with a pad of paper to note down anything I see fit. When I was designing and coding the web I used it for a lot of calculations and writing down key information that I needed to remember.
For all my pages on this website I designed and produced them on illustrator as I do not possess the required skill to code it all fully. This does mean that some elements of the website do not function 100% correctly and there isn't a mass of secondary and tertiary pages, however, other than that the website functions full and provides the used with a good amount of information - all the important information.
The exhibitions page contains information on up and coming events and talks from leading designers and typographers. Although there is a lot of information on this page it is laid out and structured in a way that means it does not feel like an information overload. The pictures and choice of colours also mean that the information does not feel dense.
The visit and contact page is entirely text based, however I designed it so that it was easy to find the information you are looking for as well as present the information in an attractive and interesting way.
The choice of colours is very useful when laying out a design that contains a large amount of text as the 50% black is not abrupt at all and blends well with the teal green.
I found the about page the most difficult to design anything interesting with as there is a small amount of information and that is it. Looking back the first digital design for this page may have been more effective, however I don't know how it would have worked with the navigation bar on the left. The issue with this page is that it is unbalanced and the information is is not obvious and the eye is instinctively drawn towards the type and image. This is a page that if i was to do it again would get a complete redesign.
The top half of the 'food & drink' page is similar to the about page and is not very interesting. This page is more interesting but I still think more could have been done with the information or maybe a better choice of image.
It was at this point that I cemented the idea that I wanted the type factory to have both a casual cafe and a sophisticated restaurant.
The imporatnt information is all very visible making the website easy to use, however, when you arrive on the page some of the top information is cut off by the container and you have o scroll to find it. This is something that I would resolve if I had more time or was doing it again.
The shop page is well laid out however it does not at all function as I wanted it to. This is again due to my coding ability. I wanted each image when hovered over to show another image and when clicked on, highlight what has been clicked on an give you more information. Instead it is just a well-grided collection of images.
The final page, again is entirely type based. As I have a few type based pages in the website I wanted to use a different layout to break up the information. The layout is not to different as to make the website difficult to use, it just arranges the information in a different way. This is more dense and serious information which is why it is the last page and has a very basic layout.
I think the website is sufficient as it provides all of the relevant important information, however, its functionality is not how I wanted it.
As well as design and code a website I also design an app proposal for phones and a Facebook page.
The app is very similar in content to the website, however it does not include all the detiled information that the site has nor does it have some of the pages.
The same colours are used to tie it in with everything else. The app has a loading/start up page which is simply the logo. It as this as I thought it was an important feature to have the logo as the focus at the start.
The app has viewer pages than the website as I didn't think the other information or about pages were as relevant. I though that if people were on the move they are more likely to want to know about the exhibitions, how to get there or in contact, the restaurant and cafe information and the shop.
The exhibition page would function similarly to a blog and you would just scroll through the information. As the three categories suggest you would be able to see current exhibitions as well as past and future ones.
The contact and visit information would be near identical to that of the website and it would allow you to touch phone numbers, email addresses and addresses so that you could call, email or find your way there from wherever you were.
The food and drink section would then have 2 options, either the tf cafe or apex, the rooftop restaurant. depending on which one was selected information would come up and it would be possible to scroll down to see the menu. A feature whereby you could call and book a tanle would also be an appropriate addition to this page.
Finally the shop would allow you to select what category you wanted to brows and then you could have the choice of viewing all the products in a grid or viewing them as swipe-able images. swipe-able images means that when you swipe your finger across the screen it would move to the next or previous priduct depending on which way you swiped it.
An important feature of the app that has been missed off of the propose design is a back button allowing you to go back to the pages you have previously been on.
As a final element to the company's identity I thought it was appropriate that the type factor should have a Facebook page.
The Facebook page allows the type factory to gain popularity, receive feedback, advertise up and coming events, things from the shop and post resource related information such as interview with designer and typographic articles.
Te social media could also be adapted across of platforms such as Twitter and Instagram.
No comments:
Post a Comment