ADV3550 – Kionic Competition Winners
Hello,
Happy New Year! I hope you all had some nice time off in January. See below for information on the Kionic award winners:
Here were the finalist:
Most Promising New Web Designer Fall 2010: Award $200
http://www.stephavenue.com/
http://elvahsiehdesign.com/index.html
http://www.mariemone.com/index.html
http://fdorado.com/index.html
http://alfredolopez.net/
http://wendyconcepcion.com/index.html
Best Website Fall 2010: Award $300
http://nysportshype.com/index.html
http://doodlegum.com/index.html
http://www.thediycandy.com/
http://www.meetthepros.us/
http://sikenation.com/index.html
http://www.tonyan.org/
And here are the winners:
Most Promising New Web Designer Fall 2010:
http://fdorado.com/index.html
Best Website Fall 2010:
http://www.meetthepros.us/
Congratulations to all of you for your hard work.
Have a great Spring semester!
Genevieve
Week 13 – 7260
Hello everyone!
We are moving into the final stretch. I know things are busy but three more weeks and you can all relax!!
If you have already sent me the link to your website – thank you! The Grace Gallery exhibit goes up this week, so please send me your link so I can submit.
If you have not handed in your copy to me be sure to bring a printed draft of it to class on Monday.
Here is a checklist for the final site due week15 (Dec 20th): FinalChecklist
In class we will continue to fine-tune your site.
Review Flash
1. Frames vs. Keyframes
2. Frame by frame animation
3. Shape tween
4. Library
5. Graphic Symbol
6. Motion tween
We will also look at:
Buttons in Flash and how to link them using action script
and optimizing your site for search engines.
See you Monday!
Week11 – 7158
Hello everyone.
Agenda for week 11: Today we will focus on the contact form.
C. Build a ‘contact’ form
Here’s a good, detailed tutorial I recommend watching;
http://www.youtube.com/watch?v=7soyO5DwJMY
-> We will follow this simple tutorial to build our basic form in Dreamweaver:
http://dreamweaverspot.com/adobe-dreamweaver-tutorial-contact-forms/
For the contact form, you will need to download a PHP script provided in the tutorial. PHP is a server-side scripting language that is embedded in html to perform all sorts of tasks. In our case we will download an existing PHP file: ‘FormToEmail.php’ from the tutorial. Make sure the file is saved in the same folder as all your existing html files for your site.
Follow these steps. (Use the tutorial listed above.)
- Drop the FormToEmail.php file into the same folder as your contact.html page.
- Edit the php file as instructed in the tutorial. You will have to change the email address in the form to be yours. (Please note: you cannot test the form until it is up on your server.)
- Create your form in Dreamweaver.
- Add any styling you want to add.
- Publish your files to your site and test them by sending yourself an email
The basic from that we are building in class is not secure, meaning it does not prevent against spam. If you would like to explore other options you might check out this link here:
http://www.freecontactform.com/free.php
Homework:
1. I would like you to post a first draft of your site to your URL and send me a link by Sunday. The site does not have to be 100% complete but by Sunday you should have the homepage built and at least one link of the navigation should be working.
If you need help uploading your site here is a quick refresher:
http://www.vineyardesigns.com/resources/dreamweaver/test_upload.shtml
2. And if I did not yet receive your statement and your work descriptions, please be sure to bring a printed copy of that for me this Monday.
Week 10 – 7260
Hello everyone. Hope you had a nice weekend.
Agenda for week 10: review the lesson from Week 9 focusing on images and building the ‘gallery’ section of your site.
Lightbox
Intro on how to build a contact form.
You can download the lesson files here: lesson-week10
A. Review Lightbox galleries
Here are two worthwhile websites
B. Create roll-over images
Here are two good tutorials for that:
- http://webdesign.about.com/od/dreamweaverhowtos/ss/dw-rollover-img.htm
- http://wellstyled.com/css-nopreload-rollovers.html
C. Build a ‘contact’ form
Here’s a good, detailed tutorial I recommend watching;
http://www.youtube.com/watch?v=7soyO5DwJMY
-> We will follow this simple tutorial to build our basic form in Dreamweaver:
http://dreamweaverspot.com/adobe-dreamweaver-tutorial-contact-forms/
For the contact form, you will need to download a PHP script provided in the tutorial. PHP is a server-side scripting language that is embedded in html to perform all sorts of tasks. In our case we will download an existing PHP file: ‘FormToEmail.php’ from the tutorial. Make sure the file is saved in the same folder as all your existing html files for your site.
Follow these steps. (Use the tutorial listed above.)
- Drop the FormToEmail.php file into the same folder as your contact.html page.
- Edit the php file as instructed in the tutorial. You will have to change the email address in the form to be yours. (Please note: you cannot test the form until it is up on your server.)
- Create your form in Dreamweaver.
- Add any styling you want to add.
- Publish your files to your site and test them by sending yourself an email
The basic from that we are building in class is not secure, meaning it does not prevent against spam. If you would like to explore other options you might check out this link here:
http://www.freecontactform.com/free.php
Homework:
1. I would like you to post a first draft of your site to your URL and send me a link by Sunday. The site does not have to be 100% complete but by Sunday you should have the homepage built and at least one link of the navigation should be working.
If you need help uploading your site here is a quick refresher:
http://www.vineyardesigns.com/resources/dreamweaver/test_upload.shtml
2. And if I did not yet receive your statement and your work descriptions, please be sure to bring a printed copy of that for me this Monday.
Week 9 – 7260
Hello!
Today we will focus on building out the ‘gallery’ – ‘portfolio’ section of the website. Keep in mind this is probably one of the most difficult parts of the semester, so be patient with yourself if it does not work perfectly right away. Once you have it everything gets easier !
>>Here is the lesson example for week9, please download: LessonWeek9
>> We will also look at how to set up lightbox: http://www.lokeshdhakar.com/projects/lightbox2/
DUE: Make sure you hand in your static layout of your website to me if you did not do that last week. – Save into my drop box: ‘ghitchings’/ ‘ADV3350′. Make sure your file has you first initial and last name on it. Example: ghitchings-web-design.psd
>>Handout: ADV3550_Lightbox
Homework:
1. Continue to work on your website. See if you can get the basic structure built out in HTML and CSS and have two pages linking to each other.
2. Organize and revise the portfolio pieces you plan to show in your website (see the handout I gave in week8). I will be collecting in class next Monday.
Week 7 – 7260
Hello,
Today I will show you how to optimize your images in Photoshop. We will focus on saving images for the web.
>>Continue to refine your website layout built in either Photoshop or Illustrator – make sure you show the ‘portfolio’ section in the comp design.
>>Here is the lesson example for week7, please download:
Week7-lesson
>>Here are two handouts for week 7:
ADV3550_Optimizing
ADV3550_CSS-navigation
Homework:
Please finalize your web design. I will collect your work next week. And we will begin to build the static designs into HTML.
Week 6 – 7260
Hello and welcome to week 6.
Today’s Agenda
>>Quiz
>> Review web design layouts. In class critique.
ADV3550-checklist
>> Setting up a horizontal navigation bar using HTML and CSS
Here are the lesson example files: week6-lesson
Homework
1. Continue to work and refine your website layout in either Photoshop and Illustrator. Ideally I would like to see a design for each of the four main sections of your site. Everyone should have a finalized draft for next Monday.
2. Inventory of work: if you have not already done so, it’s time to sort through the portfolio pieces you intend to show in your portfolio. How many pieces of work will you be showing? Basically you need to locate and identify the work that you would like to have featured in your portfolio. The suggestion here is to complete the following steps.
>>Locate all the work from prior semesters and determine 8-12 pieces that you would like to feature:
This could include development items such as sketches, storyboards etc.
Your goal is to isolate the work that you need to focus on for resizing (especially if you are planning on using thumbnails).
Separate work into folders
Once in the folders, you most likely will need to revisit and refine, so make a TO DO list of what needs to be done and give yourself a time-frame of when you will complete it by.
3. Focus on creating a site color palette:
a. Create a key for the colors you chose to work with. Each color should appear in a perfect square box and have a reference number to go with it.
b. For help check out: www.colorjack.com
Week5 – 7260
Hello. Welcome to week 5, October 4th. Here are the handouts:
PositioningCSS
You can download example files here:
ADV3550-week5-lesson
Portfolio Likes and Dislikes
Jorge Diez Prada
Here’s a great resource to find good portfolio examples:
http://www.youthedesigner.com/2010/08/25/a-showcase-of-various-websites-with-texture-web-design/
dislike: http://www.havenworks.com/
Stephanie Plasencia
like: http://robertlkann.squarespace.com/
dislike: http://www.houseofbliss.com/employment_sideshow.html
Alfredo Lopez
like: http://www.red-design.co.uk/
dislike: http://georgehutchins.com/
Alexander Gaynes
like: http://www.valerieluttner.com/
http://www.adrianaangotti.com/
dislike: http://www.georgehutchins.com/
Latain Palmer
http://www.davidairey.com/
Miao Liang
like: http://www.narrowdesign.com/
dislike: http://ashbridger.deviantart.com/art/Portfolio-design-v1-31252545?q=&qo=
Salvatore Zaccheo
like: http://www.holdsworthdesign.com/design-portfolio/edmonton-web-design
dislike: http://www.peternudo.com/pages/portfolio/
Filomena Martinelli
like: http://www.rzmota.com/
dislike: http://www.mattdempsey.com/
Stephan Francois
Good design: http://www.briansmale.com/ I like it because of its simplicity and very interesting photo viewing. It was so easy I browsed through all the pictures in a matter of minutes.
dislike
http://peterbowen.co.uk/ This site lacks something. Its simple but a little too simple.
Latain Plamer
http://www.davidairey.com/
Homework (Remember we do not meet next week. Our next class is October 18th. Enjoy the week!)
>>Read: http://www.noupe.com/design/simplicity-in-good-web-design-advantages-how-to.html
>> Keep working on your look and feel. Create a layout in Photoshop of your home and/or gallery pages. This should be in strong enough shape to be critiqued in our next class. Make sure your review all the handouts given in week three and four. You should also use the grid we discussed in week 3.
>> Quiz Week 6
I will be giving you a quiz on the first four classes. If you have kept up with the readings and assignments, you will do fine. Please review all the handouts I have given.
>>Revise your Resume
Please make corrections to the resumes I handed back to you (print and resubmit to me next week). I would also like you to revise the edits to your resume online and refine any necessary resume styling.
Week4 – 7260
Hello. Welcome to week 4. Here are the handouts:
ADV3550_CSSBoxModel
ADV3550-Week4-Assignment
You can download example files here:
ADV3550-week4-lesson
If you need help uploading your files to your website through Dreamweaver you might take a look at this step by step tutorial online:
http://www.temple.edu/cs/web/dreamweaver/site.htm#V
Steps III and steps IV, are slightly different from what I showed in class but it’s essentially the same thing, here they use the ‘menu’ instead of the the ‘files’ panel.
Week3 – 7260
Hello. Welcome to week 3.
InClass we will be looking at CSS.
>>Make sure you download the handout from last week: ‘ADV3550_CSSBasics1’
>> And download this handout as well: ADV3550_CSS-continued
>>Here are the example files we will be looking at in class:
Lesson-3
>>Over the next two weeks we will begin to design the look for your web-portfolio.
Using Photoshop begin to sketch the layout for your site. Photoshop will allow you to experiment with how you want things to look without having to get bogged down with the programming. Once you have finalized the look of your site, and your design has been approved, you will begin to recreate it using HTML and CSS.
In Photoshop set up a new document to be:
- 960 x 600 pixel (use template with grid provided, note the dimensions are 1020×1020 px)
- RGB color scheme
- 72 dpi
Refer to the Photoshop template created by ‘960 Grid System’ (http://960.gs/)
You can download templates from their site. These templates provide both a 12-column grid that is divided into portions that are 60 pixels wide, and a 16-column grid that consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The most commonly used format for the web is 2/3 of the overall page width for the main content and 1/3 for sidebar content.
Homework
>> Email me the link to your ‘coming soon page’ and your ‘html resume’ (ghitchings@citytech.cuny.edu)
>> Email me an example of a portfolio you feel is well designed and example of a portfolio you feel is badly designed.
>> Begin to sketch the layout for your site in Photoshop
>> See details here:
ADV3550-Week3-Assignment
