FTP Instructions
FTP: ftp://129.63.176.227
Host Directory: /webart201/f11/firstinitiallastname
Login: webart201
Password: w3b201
Example: http://classroom.uml.edu/art/webart0201/f11/tgreene/
Assignment 1
Assigned: Thursday, September 1, 2011
Due: Tuesday, September 6, 2011
THIS ASSIGNMENT MUST BE TYPED!
- Bring in three of your favorite websites or websites you visit often and explain why you like the site.
- Email address that you check regularly.
- Come up with a website to architect, design and code during the semeseter. Be sure that this website is something that can be scheduled over the semester, something you want to work on for the entire semester, and something that will allow you to be as creative as you want. If you cannot come up with a site you may build a portfolio site to showcase your art/ design.
Weeks 1 - 3
Lesson Files:
Basic Web Roles and Technologies
Web Questionnaire:
Download Word Document
Sample Site Diagram:
Download Site Diagram
Google Keyword Tool:
Keyword Tool to help SEO (Search Engine Optimization)
Sample Wireframes:
Download Wireframes
Sample Moodboard:
Download Moodboard
Website Design Tools
Color Palette Tools:
Adobe Kuler
Color Scheme Designer
Font Information:
Fonts to use on the web (15)
8 fonts you probably don't use in css, but should
Typekit
Font Squirrel
Cufon
sIFR
Free Icons & Vectors:
Dry Icons - Free Collection of Icons
Vecteezy - Free Collection of Icons & Vector Shapes
Google Images (for Facebook, Twitter, youTube, etc., type in name + PNG for transparent icon)
Logo & Website Inpiration:
Logo Faves
Logo Pond
Webcreme
Stock Photo Sites:
iStock Photo
Flickr (you still have to ask permission from photographer)
Moodboard
Photo Library
Stock Exchange
Sample Copy Decks:
Home Page Copy Deck
About Us Copy Deck
Week 7
Files for html/css coding: download files
CSS/HTML Quiz
Take the following photoshop layout and code the html/css to make it look identical. You will be graded on the cleanliness of code (%40), naming conventions (10%), how closely the layout looks in chrome, safari and firefox to the design (30%) and your css structure and commenting (20%).
Click to download the photoshop file
remember to use the css reset and clearfix
Contact form and Wine Connextion site files
Chris Barlow
Class Website:
http://classroom.uml.edu/art/webart0201/f11/cbarlow
Class Project:
I intend to re-make my personal website. The site I have now is a good test of my skills, but it's not as concise or professional as I think it should be. My goal is to revamp my personal website using some of the ideas from the old one, but mainly I want to implement a new layout, navigation, and feel.
Assignment 1:
- www.chehalishegner.com
- twitter.com - the TweetDeck version
- www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of
Jon Cloutier
jonathan_cloutier@student.uml.edu
Class Website:
http://classroom.uml.edu/art/webart0201/f11/jcloutier
Class Project:
This is a landscaping company that a friend of my family owns: www.jrtarrlandscaping.com
Assignment 1:
- www.gamefaqs.com - why for info about video games.
- www.hulu.com - to watch TV shows online.
- www.pandora.com - to listen to music.
Jen Costa
Class Website:
http://classroom.uml.edu/art/webart0201/f11/jcosta
Class Project:
I am creating a parenting education/workshop website I'll be doing for a family friend. Her site is not really a site yet but I have already met with her numerous times and have went over all of our material. The one page she has up is www.pointstoponder.net. It's not even a real homepage as you will see.
Assignment 1:
- www.florenceandthemachine.net - I like this website because I can remember the very first time I saw it. The lungs, inflating and deflating, on the left are what caught my attention. I felt as if this was different than other band websites and stuck out to me the most. Some of the other aspects of the site I don't like, but I always remember this one.
- bruins.nhl.com - I like this website because even though there is a lot going on, it's very easy to get what you want out of it. There is a ton of information, but I never feel overwhelmed by the site.
- www.gohawaii.com - I like this website because it appears professional, yet still Hawaiian themed. The color scheme works well and there is also a lot of organized information that is easily accessed.
Kim Donahue
Class Website:
http://classroom.uml.edu/art/webart0201/f11/kdonahue
Class Project:
My plan is to design a site for a hair salon called Salon Vergardo. Currently they do not have a website. Therefore, this will be a good project with starting from the ground up and working with the whole process. Furthermore, they plan to go live as well. So I will need to get them to register for a web address and web host. I plan to use the instructions from last semester in regards to choosing two different companies to assist in this matter.
Assignment 1:
- www.lynda.com - I like to visit the site frequently because of all the helpful visual tutorials.
- speckyboy.com - I found this site this year. It is filled with all kinds of web info.
- www.yahoo.com - This website is one that I visit on a daily basis for quick news posts or searching for information.
Olesea Fiodorova
Class Website:
http://classroom.uml.edu/art/webart0201/f11/ofiodorova
Class Project:
I'm redoing this site: www.teremokdaycare.net
It's a daycare center - Russian. And it should be done with a choice of 2 languages, Russian and English. It should be colorful, fun, and unexpected; they want something completely different. The logo stays the same, I modified it a little.
Assignment 1:
- www.cinemaxx.ru - I like the structure and little interesting things like a moving cloud with words: choices of what kind of movies to watch; then if you click on any movie, there is at the bottom moving chairs (from the cinema…); fire on the logo, color choice – it's different of the logo.
- www.agencynet.com - Cool beginning, and almost as a movie done from the beginning, a little too busy and confusing, but I like the idea. Especially the house with the choices of pages.
- www.sectionseven.com - I like this site very much, the organization, the beginning, how it works, and it's very colorful. I think the way you click every colorful box and how it's opening multiple pages – very nice. Looks clean, not too busy, and simple but cool.
Nathan Maillet
Class Website:
http://classroom.uml.edu/art/webart0201/f11/nmaillet
Class Project:
At first I wasn't sure what I would do. I was hesitant to line up another client job simply because I've been dealing with clients all summer and I'd just like a break. That said, I really didn't have any other ideas for a website that I could drag out over the course of four months, so I decided that I would make a portfolio site for myself. The main reason is that I don't have one, and where this junior year, I should probably start getting my name out there somehow.
Assignment 1:
- www.google.com - I love Google simply because there are so many things you can do with it. You can search for things, obviously, but there are so many other features to Google like Gmail, Google Analytics, Google Adsense, Gtalk, Google+, Google Wave, and so much more. It's a great tool for web designers/developers to use.
- www.w3schools.com - Pretty much everything I know about web design/development, I learned from this site. It's a great tutorial site for learning practically anything you can do with HTML, CSS, PHP, JavaScript, and bunch of other programming languages. It's just a really good resource.
- twitter.com - Twitter is not only a great social media tool, but it's a great way to advertise for a web design/development. My friend and I have our own website that we are constantly managing and to keep in touch with our users, we have a Twitter account that allows us to post quick news and update about the site. It's amazing how many people you can reach with just one click of a button. We've got over 500 followers checking in regularly, with more coming every day.
Andrea Marrocco
Class Website:
http://classroom.uml.edu/art/webart0201/f11/amarrocco
Class Project:
www.atcomhq.com
I am redoing a website for a company called Atlantic Components. They are an electronic distributor.
Assignment 1:
- www.google.com - Google is a great website, it has everything you need. You can search information, pictures, check your email and so much more. It is easy to navigate and easy to use.
- www.youtube.com - YouTube is another one of my favorite websites because I love listening to music. It is easy to find new songs and hear them before you to go ITunes to buy it. Some of the music you are trying to find on iTunes cannot be found just yet, or maybe just not have the remix you're looking for or the version.
- www.victoriassecret.com - This website is great for shopping online. I love everything from PINK to their Victoria Secret lines and they make it simple to shop online. The website also has more options then the stores.
Michelle McMillin
Class Website:
http://classroom.uml.edu/art/webart0201/f11/mmcmillin
Class Project:
The site I will be working on over the semester is for a friend of mine that owns a masonry company: www.silvastones.net
Assignment 1:
I found these web sites when I was researching for some inspiration for my assignments in my web design 1 class last semester. I like the one page design structure. It's really straight forward and easy to navigate and it also looks cool. On the food sense website, I like the pictures change on the home page. It's a very clean design and also really easy to navigate and find whatever we are looking for.
Charlie Ober
Class Website:
http://classroom.uml.edu/art/webart0201/f11/cober
Class Project:
I plan to redo a website for the pizza shop that a friend of my family owns. The current website can be seen at: www.fremontpizzeria.com.
Assignment 1:
- www.smokeybones.com - I like how the user can navigate by scrolling down the page or by clicking the tabs. It makes it easy. I also like how the page is animated while scrolling, not continuously animated the whole time the user is on the page.
- www.nike.com - I like the clean look and feel of the site. The colors they use give it a contemporary feel. I also like the side navigation. It is very smooth.e
- www.adidas.com - I like the layout of the home screen. The animated boxes are nice. They interact with the user well. I also like the clean look of the site.
Amy Pennell
Class Website:
http://classroom.uml.edu/art/webart0201/f11/apennell
Class Project:
I will be designing a website for a hair stylist who is starting her own business. She will be teaching private hair classes for all levels of hair dressing experience.
Assignment 1:
Matt Prince
matthew_prince@student.uml.edu
Class Website:
http://classroom.uml.edu/art/webart0201/f11/mprince
Class Project:
The web site I am going to be designing this semester is for the friends of North Reading Parks and Rec. As of right now they only have a singular page off the town's web page. I'm looking to get them their own page that they can get up and use to help their cause. I work for the town of North Reading in the parks department when I am not in school and I grew up in North Reading so its something that I am committed to and something I know a lot about.
Assignment 1:
- www.yahoo.com - One reason why I like this web site is because of its central location of pretty much everything. It reminds me of a bull's-eye everything is located in sections around the center which is a scrolling 4 square news bar that is updated daily. So in other words, I like the page because it's easy navigation and the user friendly set-up is easy to remember and it does not change (often).
- www.espn.com - One reason why I like the ESPN web page is because of its nav bar on the top of the page. I like how it drops down in different sections to revel a "mini" page of different links that are going to be in that section. Also in the navigation bar it shows news articles that are going to be in those sections. Probably the last reason is not really a technical issue but it's mainly is just because I use it so often, I just like the way it works.
- www.nfl.com - I like the NFL site because it is simple but it has a lot of information linked off the main page. On the top of the page it has every team logo from all of the NFL, which you can click on to, take you to their individual site. Also, right below the icons is all the games that are being played or game that are going to be played.
Dan Robartes
Class Website:
http://classroom.uml.edu/art/webart0201/f11/drobartes
Class Project:
This semester I would like to make a website for my Mom. She has wanted a site for a long time to see her crafts (origami, knit slippers and scarves, jewelry, and mobiles). I can see a lot of potential for designing really nice pages that match the individual item someone is buying. The most challenging part of doing a site like this is I would need a way for people to order things via credit card or Paypal. I'm not sure what the best way to do this is.
Assignment 1:
- www.glitch.com - This is one of my favorite websites. This is a page I came across in my last web design class. It's the site for an online game that I have never played and I'm not sure I ever will. But this page is so beautifully designed it almost makes me want to download this game. Behind the text is a little world within the webpage that almost makes you feel like you're in the game already. I love the animated character as well.
- www.soccerbyives.typepad.com - I don't particularly like the design of this site, but I use it almost every day. I'm a big soccer fan and this site gives me all the news I need. I like getting news from a blog, because you can scroll down and see all the stories of the day, in the order that they happened. And everything is archived which is nice. The design is bit boring though; I've seen other blogs exactly like it.
- www.youtube.com - Another site I likes is one of the biggest sites on the Internet. There are of course many video sites like youtube.com, but as the original and biggest name it will always have the most videos for whatever you need. You can listen to any band on youtube.com, learn how to cook something, learn how to use software. There are endless uses for this site.
Claire Russell
Class Website:
http://classroom.uml.edu/art/webart0201/f11/crussell
Class Project:
I intend to make a personal website that will host my portfolio. I don't have one yet, and it will be critical to have one once I graduate and am applying for jobs.
Assignment 1:
- www.smashingmagazine.com - is a must-read for anyone working in web design or development.
- www.netmagazine.com - offers great tutorials, ideas, techniques, and resources for Web Design.
- www.forrst.com - A community of designers and developers, who share their own designs for critique. There are some great resources and tutorials there as well. It's invitation only though, which is annoying.
Gayatri Samar
Gayatri_samar@student.uml.edu
gayatri.samar@gmail.com
Class Website:
http://classroom.uml.edu/art/webart0201/f11/gsamar
Class Project:
Redesigning my friend's website: www.onlyoptics.co.in
Assignment 1:
Vannara San
Class Website:
http://classroom.uml.edu/art/webart0201/f11/vsan
Class Project:
Bed and Breakfast business located in Peabody, Massachusetts.
Assignment 1:
- www.tokyoplastic.com - I like the simplicity, animations, and interaction.
- http://www.behance.net - I like the clean design, and color choice. It is pretty awesome that you can check out other people's work, as well as upload your own. The work jobs page is also a plus on this page.
- http://www.appmiral.com - The imagery of the page is beautiful. The long vertical scroll fits the concept of traveling into the ocean. It is a very unique design. The movement of objects in the page as you scroll down is interesting as well.
Joe Varnum
Class Website:
http://classroom.uml.edu/art/webart0201/f11/jvarnum
Class Project:
Portfolio Site:
I think I'd like to make a portfolio page, because I've been putting it off for way too long and I'm always making excuses for why I haven't done it. I think it would be a great first step in showcasing some of the photography and artwork that I've been working on for the last few years in and out of school. Also, I feel as though this is something that I could really pour my heart into and focus on the entire semester, since the materials is close to my heart. Designing a dynamic website for me will also help when I need to send out my resume to potential clients or prospective jobs as well.
Assignment 1:
- www.happypencil.com - I've always enjoyed the animations on the site, and his artwork is featured frequently by y favorite band, TOOL. It's an old page now and I don't think it's ever been updated, but whenever I think of a cool website that I've seen, this one always pops into my head.
- www.gamespot.com - I read this website every day to stay up to date with what's new in the gaming industry. I've always been a gaming nerd and was store manager for Gamestop for four years, so I still keep up with it.
- www.yahoo.com - For some reason, I still maintain Yahoo as my home page, even though I use the Google toolbar for my search engine. This is how I stay up to date with current events, since they pop up as soon as I open my browser. I guess I'm a creature of habits, since I've used this homepage for about 10 years now.
Rebecca Woundy
rebecca_woundy@student.uml.edu
Class Website:
http://classroom.uml.edu/art/webart0201/f11/rwoundy
Class Project:
I am going to redesign my church website. It is not being updated regularly and it is something I know a lot about: www.baystatebc.org.
Assignment 1:
- www.facebook.com - I like using Facebook because of the social networking with old and new friends and its great for reminders of people's birthdays and anniversaries. Facebook is also one of the only websites that works on my phone as a mobile site so it is easy to move from computer to a cell phone.
- www.imdb.com - I love this website because I always get actors and movies confused so using International Movie Database. I can always check my facts before I say something stupid about a movie or an actor.
- www.netflix.com - I am the person who finds out about a really good movie or TV series way after they have come out so I love using Netflix to catch up on seasons of shows like The Office and Psych. The old black and white movies that are on instant queue are like hidden gems on the Internet.