Attached are my Final Project Wireframe, Styletile and Design Comp. We started our Design comp this week and did a practice comp call DigitalJENN. It was pretty fun and I enjoyed using photoshop. Here’s a link to a resource that can be used when creating a comp.
This site has all the social icons you could need Twitter, Facebook etc..
This week was all about our final project, we created a style tile and design document. My final project will be a website for Kirby & Holloway. Below is an image of my style tile. I pulled colors from the K&H logo using adobe kuler. My font choices are Baskerville and Times New Roman. I plan on using old photographs of the owner founder and images of the plant and trucks when they first started the business.
This week we completed our resumes and starting working on our final project. We created a page wrapper for a our resume, which controls how all the content of our page works together. We also created a gradient for our page, here is a link to the CSS gradient generator http://www.colorzilla.com/gradient-editor/.
We also read an interested article on the difference between Id and Class selectors, and watch many Lynda.com videos. Here is a link to the article on Id and Class selectors http://css-tricks.com/the-difference-between-id-and-class/.
My final resume.
First Idea – A website for my brother in laws business. It would be no issue getting any information that I need. Photos, Logos etc..
Second Idea – A website for me to sell some of my clothing on, I make costumes and other articles of clothing. A photo of a customer wearing a creepshow corset I made.
Wow! that was a lot of Lynda.com Practice. I learned a lot of new information on CSS stylesheets and html. I feel like it was a little much to take in for one week. I updated my style tile, and completed my part 3 resume project. I learned how to create a font stack and used this website to help www.google.com/webfonts. I thought it was nice that the site would generate the code needed for my CSS and HTML resume pages. I also incorporated my kuler.com color scheme into my resume this week. I’m not sure if I like the colors now that I see them on the page. Maybe I just need to move them around a bit more into different areas.
This week I created a style tile, from a template, and created a custom palette of colors to use for my resume project. I used the adobe website https://kuler.adobe.com/ we uploaded photographs and adjusted points on the photo to come up with our own personalized color schemes. I really enjoyed seeing how many different color schemes I could get from just one photo. I also learned about Typography and how important it is when designing a site. I can see how difficult it could be making a choice with all the different fonts available.
This week I learned how to animate in Fireworks CS6. I used states to create an animation of some dandellion seeds floating across my Banner design. We learned a lot of useful principles to help with our animations. I found the most important ones for me had to be Timing and Slow in and Out. Here is a website link to the 12 important principles. http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/
Here is my final banner design.
This week I learned about CSS, Cascading Style Sheets. I can see how keeping the styling separate from the content would make it faster and easier to change the style of your presentation layer. Here is a link to an article on CSS. http://reference.sitepoint.com/css/css. We also learned about creating a tiling background image for our Banner Designs. Then we used a CSS style sheet to reference our new background image and have it repeat. You can also set images to repeat along the x or y axis’ only by using repeat-x or repeat-y.
This week I learned about the different formats used for saving images for the web. I’m glad to know now that .JPG are best for photographs and .GIF is best for vector images. Especially since we created our own vector artwork in Fireworks. I also learned how to ftp my homework files using Dreamweaver. It was quick and easy. We started learning about some HTML code when we created our first html page to display our banner designs. I know a little about HTML code from selling on ebay, where I use my own HTML code to display my descriptions and photographs of items I have for sale.
This week I learned a lot about Fireworks tools. I’ve never used Fireworks before, I found it very enjoyable to use. I like the pen tool the best, I used it to create a pair of feet wearing sandals for one of my banner designs. The shape tools are also very useful and save time, although I didn’t use them very much. I watched some videos on Color Theory, I really liked the http://www.mariaclaudiacortes.com/ website. Green is my favorite color, I wish I could be more like it. Patient, Balanced, Relaxed and Lucky that would be nice.