Week 11: Outside of Class - Website 20%

This week we had to have our website 20% done for Monday, so here is mine.

I still have to add some text at the bottom under the "What We Do" section, however I'm almost finished with the first page. I would like to maybe add a fun footer and I am also kind of unhappy with my feature area. I am not sure why, but I think I might want to change the image. It is really tough to photoshop blind cats, especially since I am very inexperienced so I feel like it isn't very convincing. I am hoping maybe I can locate some better images to use. I also am not sure about the decorative style of the elements around the cat image, so I may change those as well.

Week 11b

Today in class I began working on my website. I basically did the framework and began adding some small elements such as text. I am having a lot of trouble making my feature area be responsive as it looks like this when in a certain position:

As you can see, the black space which holds the image isn't adjusting properly. It is only at this width of the screen. I tried adding media queries for different size windows, but it didn't seem to help. In addition, opening the menu when in the smallest screen size yields this:

Once again, not really sure why this is happening, but I am hoping I can get help in class next Wednesday, as on Monday my group will be at the studio visit.

Week 11a

Today I missed class because I was sick, however I got our homework which was to begin the website and have it 20% done by Monday.

Week 10: Outside of Class- Sparkbox Style Prototype

This week for homework we had to do a Sparkbox Style Prototype. Here is mine:

I picked colors that were a little more muted for my overall color scheme. The foundation colors are black, gray, and white. I chose this combo because I wanted there to still be an undertone of seriousness. I included an image of the illustrative details I would like to include throughout the website. I am not set on these yet, but I think they are headed in the right direction. To the right of that is an illustration of a blind cat. I thought it may be fun to have some illustrations of the cats they have. I like the style of this illustration and it is a bit different from the elements to the left of it. I think that this is the kind of style I am more leaning towards. Finally, the bottom image is the same image from my last blog post. It is the splash image you see on the home page. In addition, I made the icons using elements from the web. I would like to make them more my own, and I will, but for now they gave me a good launch point for my future design. I also made the logo for the rescue, since the one they had wasn't similar to the aesthetic I want. I played around with some ideas of including a cat face, or an illustration of a blind cat, but it didn't feel right. I still think I will change this. Overall, I honestly found doing this to be difficult and would've preferred to have built my own. I couldn't understand how to change some elements so that they wouldn't respond a certain way when the screen resized. I tried my best regardless.

Week 10b

Today in class we spent the first hour looking at inspirational websites for their graphic qualities. The rest of the time was in class work time. I spent more time trying to figure out the illustrative quality I wanted to embed in the photos on my website. I came up with this:

I think it is playful and fun, however I am not sure if it will be too busy. I am interested to hear what others have to say on Monday in class.

Week 10a

Today in class we were introduced to the Sparkle Box style prototype which is essentially just a responsive style tile. We also met with Professor Pannafino to discuss our wireframes. He told me mine looked pretty good and said that I shouldn't create a contact page since it would essentially be worthless. So, I removed my contact page. The rest of the time was in-class work time, so I started working on some imagery for my style tile and also looked at potential fonts and color schemes. I am thinking about doing illustration mixed with photography, although I am not sure what style of illustration I want. I am playing around with a more playful style now. I also photo-shopped a cat to be blind, since blind cats aren't very common and also the images on the website are pretty low resolution. Here is my photo-shopped blind cat:

I am very much a novice with Photoshop, but I think this is relatively convincing. It seems like an odd thing to do, but in the context of my website it will make sense. This image will hopefully be my websites initial splash image and will have illustration included in it. It will be a touch point for visitors.

Week 9 Outside of Class: Wireframes

For tomorrow (Monday) we had to have our wireframes worked up in Axure. I have 4 pages, a home, about, donate, and contact. The most important pages are the home and donate pages which I spent the most time trying to nail down. The home is less involved, it mainly directs the user to the donate page and provides a little bit of information about the non profit, although the about page is more in-depth about that. I also have adaptive views for each page, but have only included the home as an example for the adaptive views. I definitely want to get some critique on my adaptive views before moving forward. Here are my wireframes: