100 - Proposing Website

Website and App.
Design for Print and Web is brief where you choose one thing to focus on, either print or web. I chose to focus my design on print, therefore I am proposing what I would do for web. I have already produced all of my Print, the branding and identity for my shop, and a collection that would be sold in the shop. As I have done this, I have a colour scheme to follow, and a theme to follow, therefore the designing of the website didn't take a lot of development apart from laying out the website itself.

Website.

I started to design my website after I researched into different websites that are similar to my shop such as Blott, Paperchase, and greetings card websites that I looked at for my Design for Web brief. I did this so that I could have a better idea of how I should be designing my website. I have used the same colours that I used in my branding, also I have used the same pattern that I used on my branding too, this is so that I can keep it consistent throughout my print and web.

I thought about the homepage and what should go on it, and I thought because I have actually produced the prints for my Penguin collection, I could suggests that this is new to the site. Then every time there is something new on the site it would show an illustration of the collection theme in the top long box, with writing saying 'NEW', and the name of the collection underneath. I also thought that I could show four different products that could be sold in this range underneath the 'NEW' box. Having whats new on the homepage is something that I have found is very popular on websites like this, although they also have a lot more information on the homepage as well as this, for example whats on offer and advertisement. But this is something I don't want to do, I want my website to be full of useful information, and nothing that isn't necessary.

I have also produced a mock up of what would happen if you wanted to hover over the word 'Collection' on the nav bar, and showed what the drop down bar would look like, I also used the blue with an opacity to show what something would look like if it was going to be selected, or hovered over.

To get to this page you just click on collections and it will show you all the different collections that 100 Things To Do has to offer. Not only that it shows you a short description of the collection as each of them are created for different purposes. The Penguin is made for organisation, the Pug collection is made for motivation e.t.c. I think that this is something a bit different, this makes my shop different to the others as most other shops sell different collections, but they are all just different patterns on the same products, whereas my products are all different and used for different things. When designing this page I thought that I would just have the information scroll and the rest of the page would be fixed, this is so that you can always get to a different section, home, basket or search something really fast, and you don't need to go and look for it.

This is the Penguin collection page, showing what the layout would be like for the products being sold on the website. After producing my website for Design for Web, I think I may have created my products slightly too big, therefore I made it so that you can fit four products per line, then if you click on any of the products it will come up larger and with more images and information about the product. I produced two versions of my Penguin page, one with the description of the collection on the top and one without, I think that it would be better if it had the description as my shop is all about the fact that the collections are all different, I have also used the gridding system to place the information.

I also thought when designing this page, the filter system at the side of the information about the collections, and thought that it looked a bit bare, and I should have more filters than just the page that you are on, therefore I decided that I should include the other things on the nav bar such as, Organise, Cards, Notebooks e.t.c. When doing this I found that I have put 'Cards' on the nav bar twice, therefore I need to change that when I go through all of the pages for my site.

These are the two pages with the emended filter bars. This looks fuller and more professional, it also gives the audience another option to go on a different page quicker.

The register and log in pages are very similar, there is no scroll available as there is so little information on the page, it is simple and straight forward. I have kept the filter at the side on this page, as it would give the audience another option if they were looking to register for the shop but they were on the log in page, vice verca. When designing the pages, I followed similar layouts as other shops so that I had the right information on my page.

Final Web Pages.

Homepage

Collections Page

Penguin Page

Register Page

Log In Page

Locations Page

Proposed on a Mac

Mobile App.
For my mobile app, I used the same theme and colours going through my branding and website so that it is all consistent. I also used the same information as my website, but I just changed the layout slightly so that it will be easier to read and access on a phone. I thought about creating a mobile sight version of my website instead, but I think that this would be easier to navigate around, also it would be more useful to have this as an app.

Loading Page

Home Page

Collections Page

Penguin Page

Log In Page

App on Doc

App applied on Iphone

After creating my website for Design for Web, I found that designing my website for Design for Print and Web was a lot easier. I know a lot more about web design now that I have actually done it and coded it, I also find it pretty interested and after you get it right, the success you feel makes it worth the stress of trying to get it like that. If I were to do this brief again or if I had more time, I would have liked to try and code this site, as I think that it would look a lot better than the site I have created for Design for Web, just through practice. As I do a lot of print in my work usually, I should have taken this opportunity to explore more of web and try to do it, whilst its an option. Even though I am really happy with the print I produced, if I were to have done it again, I would have chosen to do the Website rather than print, just to expand my portfolio more.