Week 13-Outside of Class

For Homework:

Over the weekend I made a lot of progress with my website. It gets very time consuming when I have to change every thing for both the desktop and mobile. I was successful by adding an image slider into my website.

Thing I still need to fix...

-Alignment in the mobile.

-Add navigation

Week 13B

In Class:

During class we met in small groups to go over any problems that we were having with our webpage. In my group we fixed the percentages of the column one third and column two thirds so it would look like my original design. My group also helped me fix the spacing in between block. This process took awhile and I thank my group for taking the time to look over my code and help figure out how to fix my problems. It wasn't until I met with my instructor on how I could get my responsive mobile view to not disappear. In order for the mobile view port to work we had to delete my navigation. 

After I got all the spacing to work I went in and changed the colors. 

Week 13A

In class:

During class we went over our html/css blocks of our homepage. My responsive side of my website wasn't working and all the boxes would disappear. I was instructed to go back and take time to design how I wanted my mobile view to look like. Below is my process to the final result I hope to achieve. I struggled to get my website to work, so I intended to wait till next class to get more help. 

For Homework:

For the second portion of our project we are required to create a sub-page. This is the html/css colored block display of what would be on my subpage would represent. The red bans going across the screen represent the different sections I have my row clearfixs and columns. This page is intended to be a linked page from the "Apply Now" button for student helpers wanting to apply to dancing dreams. 

Week 12-Outside of Class

For Homework

Over the weekend, we were required to create a basic html/css structure of our homepage. This means to create color blocks of where our content will be displayed. I started off my sketching possible dimensions of my layout. Afterwards I took my process from class 12B and finished my draft of the illustrator file version of my layout. From my draft it was easier for me to decide where my boxes would go through illustrator first, since I could not of made it up as I went because there are just too many boxes to tackle. 

Week 12B

In Class

Small Critique:

In groups we went over our ideations/sketches. For the critique I presented a modular layout since I'm focusing my website on the typography rather than the graphics. This concept could change later on if graphics will help benefit my design. Below is a list of ideas that I could add or change from the critique.

•  add more negative space as the boxes seem to be overwhelmed by information
• incorporate more images into layout
• think about links vs. buttons
• how will the buttons stand out 
• find a cohesiveness about the buttons
• how will the call-to-action buttons stand out
• will the links be multiple colors depending on the background color or all have the same color

Here are a list of website that I could get inspiration form

• line25.com
• design meltdown
• modular web layout

After I got inspired from the different websites, I decided to change my layout to better reflect the inspiration I saw online. I decided to add more space by deleted the body copy in each box so there would be more room for rest.

Week 12A

In Class

Lecture:

In class we started to go over and review jQuery, Java and Javascript. In simple terms Java is a programming language and computing platform first released by sun Microsystems in 1995. It is the underlying technology that powers state-of the-art pr0grams including utilities, games and applications. Mostly computer science majors use Java. As for Javascript, this is a distant cousin of java and not the same type of code. This is a more loosely scripted code which contains a much smaller and simpler set of commands. JQuery is a coding language that is a branch from javascript, that helps with the interaction and effects with your development code. Within jQuery there are plugins that add to the functionality of an website and the development time for creating interactive functions. 

Class Exercise:

During class we worked on creating our own interactive functions into our pages. For example in the first image we created our own sliding image and the second we created a smooth scroll.

For the sliding image, we had to copy paste the javascript files and incorporate them into our last project folder. This part wasn't that difficult. As for the second task my partner and I had a harder time figuring out what we needed to delete out of the original code for the smooth scroll to work. The section that finally needed to be deleted was the navigation because the smooth scroll needed it's own navigation and was getting overlapped by the original nav. This was slightly difficult because the project I picked was more complex and harder to figure out where the new code should be placed into the old code.

Week 11- Outside of Class

Ideation

Over the weekend we were required to make more sketches and ideation for our website. 

Week 11B

*Absent

Need feedback on detail sketches. Classmates handed in second versions of their detailed sketches.

Week 11A

*Absent 

Homework

Detailed sketches for both the home and sub-page of our websites as well as the designs for the desktop and mobile view. 

Week 10 - Outside of Class

Reading

Our New Responsive Design Deliverable: The Style Prototype

www.seesparkbox.com

As design and technology is forever changing, its important for designers to keep up to date with new work processes. Design is moving to responsive web design and an efficient workflow. This means giving clients effective deliverables such as style prototypes. Style prototypes give the client a visual summary of the sites proposed design direction without the time investment of creating multiple pages of photoshop or fully developed HTML pages. This means including colors, typography, photographic style, button styles, rollovers, and other necessary elements to establish design direction. Why should you use style prototypes? A style prototype is handy because it presents a client with proposed site design elements and mood in the browser. It is also a very quick way to change the elements using the already written code so you can easily replace text, colors and images. 

Assignment

For homework we are suppose to create a new style prototype which is something like a style tile combined with new titles, icons, colors, photos, illustrations/ visual translation and web type.

Week 10B

In Class

In class today we gave our full attentions to our group members for 30 minutes. During the 30 minutes the student would talk about their organization, the touch points that would be focused on, and their possible ideations that were created using the wireframes. After the student would explain why they choose to layout their wireframes we would give feedback on what was working and what could need some possible changes. We would work together to create visual concepts such as typography, color and the imagery that would be used on the site.

During my group discussion we decided to work with my experimental design (bento box). My group thought this would be an accessible way of getting small bits of information in an organized way. Below are some of the colors we pick out form www.colourlovers.com. I think i'm going to go with the first color palette and incorporate some of the other colors from 2 and 3. This color palette not only speaks to a girly audience but is also gender neutral. Based on the information off of dancing dreams website I get the feeling that they are trying to be fun but professional. After looking at a variety of fonts I think I'm leaning to the Playfair Display. The serif makes the font look professional but the extra ears and variation of thick and thin strokes makes the typeface playful. Fortunately, my website has a lot of good quality photos that I can use for my new website. The imagery is very personable and shows that the volunteers and instructors seem very caring and happy to be working with the girls. This made my job fairly easy because it would be challenging to show the true sense of the non-profit if I didn't have access to these type of photos.

Personally I felt that my group members didn't sketch that many ideas for me but mostly agreed with the direction that I wanted to go in. 

-g