Blog


Computer Science No Comments

Web Design Assignment

Assignments

Five Projects (1000 points)

Use of Images

All photographs/images used in exercise and projects must be royalty free and not “stolen” off of the web.  Students may take their own pictures; use fotolia.com  or istockphoto.com; have a friend create images (and credit him/her); or find another site with royalty-free images (e.g., everystockphoto.com) and pay attention to the Creative Commons licenses.

Assignments

These descriptions are meant to give you an clear idea of what the assignments will be. The instructor will elaborate on these instructors prior to the date when students should begin working on a given project.

Personal Page, Parts I and II

You will create a home page which includes a list to all the subsequent assignments. This may be professional in style of more creative and freeform (or both, depending on your career objectives.)
For part I, you will create an HTML page that includes all the content in a proper arrangement in preparation for creating a CSS page. The page should be placed in your webdesign folder and named index.html. The link in the syllabus at http://keep2.sjfc.edu/faculty/jsarachan/comm369/students.html should lead to this file.  You should include:

  • A title in the title bar;
  • One image at the bottom of the page;
  • Your name;
  • A navigation scheme for the assignments: you should use “#” in place of the not-yet-completed links;
  • You also may include basic links to social media;
  • Other background information.

The URL of your site is: http://keep3.sjfc.edu/students/username/webdesign, assuming you place the html page in your webdesign folder and name it index.html
For part II, you will create the finished site.
Create an assignment page using HTML and CSS.
Make sure you include a title in the title bar, at least one image, your name (perhaps as a logo), and a navigation scheme for the assignments: you should use “#” in place of the not-yet-completed links.
You also may include basic links to social media and other background information.
The links should include some sort of rollover effect.
Your grade will be determined by:

  • Technical competence (everything appears that should)
  • Presence of a title
  • Correct HTML/CSS
  • Links with rollovers
  • Aesthetic choices:
    • Legible text
    • Non-clashing colors
    • Reasonable used of space (items line up)
    • A clear focal point.
  • Creativity
  • Appropriateness to purpose

The URL of your site is: http://keep3.sjfc.edu/students/username/webdesign, assuming you place the html page in your webdesign folder and name it index.html
If you want to access your P: drive from off campus, use Internet Explorer (on a Windows PC). Type in the address bar: ftp://keep3.sjfc.edu. Then, for username, type academia/username and your password for the password. (By the way, the italics above refers to the fact that your username and password are specific to you.)

Photoshop Exercise

Students will create a page for a band or musical group. The content should be entirely made up. The page will be created in Photoshop and must include a logo, navigation (just the appearance of navigation), and 3-4 images (perhaps with borders?)  Students must use the techniques for creating a page and must include at least one basic technique, text effect, and one special effect.  The page may be saved as a .jpg and placed in your webdesign folder in your public_html folder.  Under the link on your assignment page, please list the names (and techniques numbers) used to complete the assignment.
Example sites:

All About the Visuals

You will be assigned a state of being.
Create a home page, using all the techniques learned so far using HTML and CSS, that represents that state of being. You are strongly encouraged to consider an appropriate navigation scheme, use absolute positioning if appropriate, and create a clear focal point.  Your choice of color and typography selections will be considered in grading.  You should make up appropriate text, if necessary.  Think big. Think bold.
You should link to this page from your first assignment.
Your grade will be determined by:

  • Effective application of the “state of being.”
  • Presence of a title
  • Correct HTML/CSS
  • Aesthetic choices:
    • Font choice
    • Color choice
    • A clear focal point.
  • Creation of a reasonably complex layout (multiple divisions/content areas), although there may be exceptions to this expectation.
  • Creativity

Information Architecture Presentation

Using the selected website be prepared to discuss/answer the following questions:

  1. What is your overall thesis or view of the site.
  2. How effectively is the site’s identity or branding defined?
  3. Who are the users of the site?
  4. What are the users most likely to do when arriving at the site?
  5. How effective is the site’s usability, given the answer above?  Specifically, how easy is it to interpret and use the navigation?
  6. What visual elements make the site easier to use and what make them less effective (focal point, color, etc.)?
  7. How dose the placement of text (in terms of font and chunking) make the site more or less effective?
  8. How was the site made (home page only) in terms of technical elements?
  9. What is particularly effective overall?
  10. What is less effective overall?

For the last two points, you should have at least 5 items to discuss.
Focus on the home page, but consider the other secondary pages as appropriate.
Your presentation should last no more than eight minutes. You will be stopped at eight minutes and graded on what you have presented.
While the presentation is not meant to be excessively formal, it should be well prepared and you will be graded on having an overall “thesis” and focused presentation that has been well-prepared and practiced.

Business, Non-profit, or Museum Site

 A wireframe is due on November 8/9 for critique.
Create a four page site that represents the home page of any business, museum, or non-profit of your choice. This can be entirely made up unless you have a connection to a real establishment.
Consider appropriate content for each page; what information would be of interest to a typical user.
Use copyright free images or images in the public domain or images that you have the right to use.
Requirements:

  • Create an appropriate logo. The name should match the type of business/non-profit. Don’t hesitate to have a relatively small height for the logo.
  • Decide what the most important navigation text should be.
  • Decide what information should be readily available on the home page.
  • Create a focal point.
  • Write all text to “sound” authentic.
  • Use multiple images.
  • Have an appropriate title for each page.
  • Make appropriate choices for background color/image.
  • Link to the home page from your assignment page.
  • NOTE: if you use any Creative Commons images, those should link back to the original site where the image appeared.

Your grade will be determined by:

  • An appropriate design for the selected “client”
  • Consistent design for the entire site
  • Easy-to-use and logical navigation
  • Application of good design prinicples
  • Effective use of images, color and typefaces
  • “Everything working”

Personal or professional site, including design and information architecture analysis.

You will create:

  • A portfolio appropriate for a job search
  • A museum site (if enrolled in the Museum Certificate program)
  • An artistic portfolio
  • A website for an organization/company/cause with which you are involved
  • A “fake” site focused on any particular topic/subject.*

*This option is much harder than it sounds and requires approval.
For the proposal, you must post a PDF of your proposal:

  1. An overall description of the project, including what needs the site will satisfy
  2. A content inventory (and how it will be obtained)
  3. Two User Profiles/personas, appropriate for the site.
  4. Site Map
  5. A thorough and clear wireframe
  6. Style Guide: Typefaces and colors (can be embedded in wireframe)

During the finals period, the completed website must:

  • Effectively use elements of design: focal point, typography, color, etc.
  • Have a specific “feel”.
  • Feature a consistent look.
  • Look professional and (or) appropriate for the topic.
  • Consist of at least 5 pages (or equivalent).
  • You must use appropriate navigation. Rollovers are usually appropriate. The navigation of the current page may be highlighted (recommended).
  • Use images throughout.
  • Include at least one main CSS page.
  • Include Meta Tags.
  • Include Google Analytics code and be linked to the Google site (recommended only).
  • Include a favicon and title for each page.
  • Inclusion of social media connections (Facebook “Like”) is recommended, if appropriate.
  • Consider the use advanced techniqes, like jQuery (recommended only).
  • Include all necessary content (No “work in progress” pages.)

The final website is due during the finals period. At this time, you must have you site on your server space and it must be linked to your assignment page. You will describe your site, and any great successes or challenges you faced.
The course ends after the presentations. No projects will be accepted after this time.

 

Comments are closed.

Click to Submit a Project