Week 14B: Work From Home

Since I am not going to class on Wednesday due to the option of working from home, I am posting my progress on here for critique. I finished the improvements from the last class, and have started on my subpage by adding the content and imagery.

 I feel like the listed information definitely needs to be shortened or hidden somehow, especially in the mobile view. I am considering some sort of hide/reveal function which would allow the user to click "See (or Read) More", once they're done they could then click "Less." I have found some basic Hide/Reveal functions, but would like to search for a more animated function to be more cohesive with the animated underline on my touch points.

Week 14A

Today in class, we critiqued each others' homepages, and were given time to make adjustments afterwards. The suggestions I received were:

• Decrease intensity of shadow
• Center paragraph with leaf
• shorter line length
• Align donate with other touch points
• Different color in nav, or eliminate underline or bold
• line spacing, lighter text for body
• Smaller text in mobile
• have logo size down in mobile

I was able to change the rollover states of the touchpoints and nav links, decrease the drop shadow of the touch points, adjusted the line length and spacing, and aligned the donate touch points with the others.

Homework:

- finish adjustments on homepage

-show progress on subpage

Week 13: Outside of Class

This weekend outside of class, I completed my homepage. So far I am very pleased with how it turned out, and welcome any suggestions from classmates on how to improve it even more. I feel like there needs to be more spacing between the elements which I hope to figure out how to fix soon.

Desktop

Mobile

I even researched some interesting button effects since I felt that the donate, volunteer, and join us buttons needed some sort of special rollover state other than just changing colors or size. They are the touch points of this organization, and they need to appear as important as they are. Therefore, I added an underline that progresses out from the center of the div.

Shoot First, Ask Questions Later

Back in March, a bunch of us design students from Millersville went to a talk at York College called "Shoot First, Ask Questions Later" by Ken Barber. He works for House Industries, which has been noticed by Warner Brothers, Jimmy Kimmel, Autorama, and even the creators of the show "Powerpuff Girls" for their unique typefaces. They are unique in their process because they still draw out the letters  several times before they will make them digital. He firmly believes in stepping away from the computer every once in a while and do things by hand, which I found to be very inspiring because I have found that it clears my mind to just sit and sketch things out before rendering them on my computer. That way I'm not immediately faced with the constraints of technology.

Week 13B

Today in class, we looked at each others' sub pages and assisted classmates who were having difficulties with their code. I wasn't having any major difficulties that I haven't fixed on my own (Stack Overflow and w3 Schools have been my resources). I did help out another student style individual divs in her HTML which helped her out with sizing icons at the bottom of the screen. Since I have started on my homepage, some of the elements from there carried over to my subpage, and I added some graphics to it as well during class.

Desktop

Mobile

Homework

-Have homepage DONE for next class (graphics, typefaces, etc)

Week 13A

Today in class, we looked at each others' homepage structures. So far I am not having any difficulty with mine, so I began to put some of the graphics into my site to test the placement.

Homework:

- create basic HTML/CSS layout of subpage

Week 12: Outside of Class

This weekend outside of class, I worked on the basic HTML/CSS structure of my home page. I feel that this gives me a better idea of how I would like to layout my website before diving in and designing it right away.

Desktop

Mobile

Week 12B

Today in class, I continued to further refine my illustrations, and even added a flower pot underneath my shovel. I also changed the typeface under CACG (again), and am more pleased with it now. With the illustrations almost complete, it's time to start the basic layout of the website through colored boxes, just to get a feel of the responsiveness and how the elements and content will be laid out.

Homework:

•  create basic HTML/CSS structure of homepage for next class (no text or images)
• responsive, colored boxes to show placement

Week 12A

Today in class, my classmates critiqued my illustrations, and suggested to change the typeface as expected, as well as purple instead of green for "project" which make the logo more cohesive without being too busy. It was also suggested to me to lighten up the color of the gradient on the butterfly, and add thinner, broken up strokes instead of having the thickness that I do now. After working on it in class, this is the improved illustrations:

Homework:
- continue refining icons

Week 11: Outside of Class

Version 1

This week outside of class, I worked on refining my icons and logo for the website. I am struggling with how I would like my logo to look, and experimented with adding depth to it to match the butterfly, but it didn't quite work right, so I stuck with a flat design of my illustrated "CACG", and a thinner, less playful "PROJECT" below that. I still feel like The typeface below CACG could be changed still, but I feel like I am heading in a good direction

Week 11B

Desktop

Today in class, we looked over each others' revised sketches, and they all seemed to have been much improved. Some suggestions I received includes:

- no elements boxed in, more free flowing touchpoints

- leaves, flowers, circles, for framing images

Tablet

Mobile

Homework:

- try to finish icons
- finish my three touch point icons and logo

Week 11A

Today in class, we looked at each others' sketches and style prototypes. It was suggested to me for the sketches to explore different framing of images (wood, organic, etc.) and different background colors.

Homework:

- revise sketches

- explore different framing of images

- explore different background colors

Week 10: Outside of Class

This week outside of class, I worked on my style prototype, but unfortunately forgot to do my sketches as instructed up until class began, but was given the time to work on them during class. I feel that the combination of a playful tone but clean type is successful, but the color scheme and logo might need some tweaking.

Week 10B

Today in class, we looked at each others's wireframes in small groups, for about 30 minutes each, in which my group mates sketched out potential layouts and designs for my website. I felt that this activity really helped, considering I was struggling a bit with how exactly I wanted my website to look. I decided to go with my traditional layout, and my group mates agreed it is the most successful. I attempted a left vertical navigation, but it just doesn't seem like it will work out for this website. It was suggested that, since the Charleston Area Children's Garden Project doesn't have a logo, to design one for them, which I will do over the weekend.


Experimental

Traditional

Partner's Sketches:

Homework:

- based on feedback, finish a detailed color sketch of 1 home and sub page (desktop & mobile)

- Read "Our New Responsive Design Deliverable: The Style Prototype" and create a style prototype using their source code **CHANGE EVERYTHING**