Week5: Midterm

October 3, 2018
/ / /
Comments Closed


Schedule UPDATE!!!
Monday October 8th: No Class – Columbus Day Holiday
Tuesday October 9th: Submit your website proposal, 3 precedent websites you were inspired by, and the wireframes you made for your final designs.
Monday October 15th:  No Class –  INSTEAD…… I will have office hours by appointment (10 min. intervals).  BOOK TIME HERE.  We will review any issues you are having with your midterm then.
Tuesday October 16th: Final Midterm Due You will submit the CodePen URL for your site home page.  All of your links and subpages need to work by this time.

Midterm Description:
As explained in class, the midterm is a website (via. CodePen).  This site should be for something of personal interest to you. It can be a portfolio, if you are an artist or a designer.  It can be a food blog/cooking site, if you are interested in food.  It can be a fashion blog, if you are interested in fashion.  I’m ok with most anything, but if you are concerned, shoot me an email.
These sites should have a minimum of 4 functioning pages with unique content.  This could include (but is not limited to) a home page, an about page, an article page, a blog page, etc.  The content for these pages should be made by you.  That means, text and images should be made by you and have unique ideas.  Please do not use the content from someone else website. That would be plagiarism.  I’m not grading grammar or image quality, although, you should try to make it as nice as you can.  I’m hoping that some of you will be able to walk away with a foundation for a site you could use professionally.

Post everything to your class blog.  No emails please.

  • Pick 1 subject of interest to you to make a website about. Submit 1 sentence description. (Due Tuesday October 9th)
  • Find 3 precedent sites that inspire you.  These should be related to the theme of your website.  If you do fashion, find fashion type websites. Submit a URL for each site (Due Tuesday October 9th).
  • Based on your precedent sites, you will need to make wireframes.  Wireframes are the design layout for your personal websites.  You should analyse your precedent sites and see what they do well.  If they do something that you like, you should consider implementing something similar in your website. You will need to make 3 variant wireframe designs for your project.  If your project has 3 pages, that means 9 wireframe pages.  If your project has 5 pages, that would mean 15 wireframe pages.  These are quick studies and should be done using Adobe Illustrator as I demonstrated in class. Submit these as JPEGs or PNGs. (Due Tuesday October 9th).
  •  Once you have submitted your wireframes, you should take the one that you think works the best and make that website design for your midterm project.  You should attempt to make your website as closely as possible to your wireframe design.  I will be grading on how well you were able to achieve your intended design.  All your attributes should work in the final project. Images should load. Internal links and hyperlinks should take me to the right places. Menus and navigation functions should also work.  You will submit the home page URL (via. CodePen) for your site with working links to your subpages to your blog (Due Tuesday October 16th)


  • 5%:  Theme
  • 5%:  3 Precedents Websites
  • 40%: 3 Variant Wireframe Designs
  • 50%: Final website with functioning CSS and HTML code.


Example Wireframes:

These are two wireframes that theoretically have the same content but different layouts.  There is a home page and a project page for each wireframe.  The boxes with x’s are place holders for images.  They are called frames.  Note, I also used different fonts for my respective h1, h2, h3, and body fonts.


Read More