Project 1 Due Monday, October 26

Thank you to everyone who participated actively in critique on Wednesday. It was noticed, and we each benefited from your thoughtful viewpoints.

Thank you also to those who put genuine time and effort into their web page redesigns. If you are still struggling, it is my hope you will put in solid hours this weekend with the goal of submitting a strong Project 1.

Speaking of Project 1, all steps are due on Monday, October 26. No late work will be accepted. Items that are in paper form (Step 1 and most of Step 2) should be submitted in class. The remainder may be submitted via e-mail or, if the file is too large, Dropbox.

Please pay close attention to the list of required items. Gather each according to the directions, renaming and saving files as requested. I will consider how well you followed directions when grading this project. Remember, Project 1 is worth 15% of your total course grade.

DEADLINE FOR E-MAIL/DROPBOX SUBMISSIONS OF PROJECT 1
MONDAY, OCTOBER 26, 11:59 PM


What do you need to submit?

Below is a list of what’s due for Project 1 with links to the original assignment posts for each step.

HARDCOPY ITEMS
Organize hardcopy (on paper) items (Numbers 1, 2 and 4 of the list below) by gathering them in a folder or paper clipping them. Make sure to label each item with your name. Hardcopy items must be turned in during class on Monday, October 26, 2015.

DIGITAL ITEMS
All digital items (Numbers 3, 5, 6 and 7 of the list below) should be grouped in a folder titled lastname_project1. Compress (zip) the folder and submit it to me via e-mail no later than 11:59 pm on Monday, October 26, 2015. If the folder is too large to e-mail, you may submit it on our class Dropbox.

  1. Step 1: Written Analysis of Existing Site
    Hardcopy handout that must turned in during class on 10/26. Make sure it is labeled with your name and collected in a folder or paper clipped to other hardcopy items.
  2. Step 2a: Sitemap of Existing Website
    Hardcopy sitemap that must be turned in during class on 10/26. This is the one we did in class (so many boxes!) Make sure the sitemap is labeled with your name and collected in a folder or paper clipped to other hardcopy items.
  3. Step 2b Part 1: Redesigned Sitemap Post-it or Card Experiments
    Photo(s) of post it or card sitemap experiments. Name the file(s) lastname_sitemap_plans and then add it to the folder lastname_project1.
  4. Step 2b Part 2: Redesigned Sitemap (flowchart on paper)
    Hardcopy redesigned sitemap that must be turned in during class on 10/26. Make sure it is labeled with your name and collected in a folder or paper clipped to other hardcopy items.
  5. Step 3: 10+ Thumbnails
    File>Save As jpg files named lastname_thumb01, lastname_thumb02, etc.
  6. Step 4: Four Wireframes (Homepage and Three Child Pages)
    File>Save As psd files named lastname_wireframe_homepage, lastname_wireframe_titleofchildpage, etc. I’m asking for psd here because I need to be able to see your layers. There is no assignment page for wireframes because we did them in class, but I linked a how-to handout just in case you need help.
  7. Step 5: Four Color Mock-ups (Homepage and Three Child Pages)
    File>Save As psd files named lastname_homepage, lastname_titleofchildpage, etc. I’m asking for psd here because I need to be able to see your layers. The mock-ups, of course, are what we reviewed in class during critique. I highly recommend revising them based on the suggestions of your classmates and myself. Show off what you’re capable of, Web Designers!

If you’ve been keeping up, gathering and organizing these materials shouldn’t be too difficult. As for revising the mock-ups….


More on Revising Mock-Ups

Depending on the feedback you received, you may want to spend significant time revising your mock-ups. Doing the best job you can is especially important since the next project will involve coding your designs, and it’s no fun to code an awkward mock-up. Save yourself future work with a solid effort now.

To that end, here are things that might be improved in a number of the websites submitted for critique. You may want to consider these as you finalize your mock-ups.

  1. CHECK YOUR ORGANIZATION
    The mock-ups are supposed to reflect the redesigned sitemap you created in Step 2B. To this end, make sure the navigation you included makes sense for visitors looking to easily find what they need. Good nav is necessary whether they’re on the homepage or a child page. Remember the H in HTML stands for hyperlink!
  2. BE CONSISTENT
    This is perhaps the most common issue I saw with the class designs. You don’t have to repeat every element, but having some colors, shapes, lines, textures, etc. shared from page to page will unify the website. On a similar note, keep the same margins, heading size, font styling etc. throughout.
  3. SET REPEATABLE, LOGICAL FONT STYLING
    If you use one font, font color and size for heading text in one place, use it for that purpose throughout. The same goes for subheading text or paragraph text. Also, make sure your choices are readable and logical. For example, paragraph text shouldn’t be large and bold; that’s like shouting at the visitor. On the flip size, headings shouldn’t be smaller than subheadings or paragraph text, and there should be enough contrast to make words stand out from backgrounds.
  4. LINE UP SHAPES AND ELEMENTS
    Double check that text boxes, text, buttons, images and other elements of your page line up where applicable. It creates visual harmony to grid various objects neatly in comparison to one another.
  5. BEWARE OF DISTORTIONS
    Distortions of text or images happen when you resize an object in one direction but not the other. To prevent this, use the corner handles that appear when you enable the Move tool. Hold down the shift key while you resize. This will constrain proportions and maintain the original aspect ratio (ratio of width to height).
  6. CHOOSE HIGHER RESOLUTION IMAGES
    If a photograph you borrow from the internet looks pixelated in comparison to the other things on your page, you need to choose something else. As a general rule, search for images that are at least “medium” in size (400px x 600px give or take). You can do this by clicking the gear to the upper left of a Google image search and selecting “Advanced search”. FYI, Advanced search is also where you can limit your search to images that are legal for commercial reuse.
  7. DON’T FORGET THE WHITESPACE
    It doesn’t have to be white, but give your design some empty areas (negative space) for breathability.
  8. INCLUDE ACTUAL INFORMATION
    Lorem Ipsum is okay for wireframes, but mock-ups should look exactly like the site would look if it were live online. Borrow what you need from the existing website or write some new information to fit your design.
  9. MORE IMAGES!
    Using appropriate media is one of the considerations of web design for a reason. People are drawn to visuals, especially for something like state parks where they want to see the possibilities.

Suggestions for your design specifically will come to you via e-mail. Please feel free to reach out with questions if they come up. I will be checking my messages regularly this weekend. Otherwise, I will come in at 11:40 on Monday to help anyone who has questions or wants me to take a look at their revisions.

Del

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s