DES 250 Digital Media Design II
DES 250 Digital Media Design II

Assignment 2: Responsive Portfolio Website

We'll be designing and developing a multi-page website showcasing three UIC class projects as well as an About page. The idea is to build a site that can scale. It needs to be designed so that you can easily add upcoming classes/projects over time.

Structure

The following sitemap shows the recommended structure of pages. Looking at the sitemap you get a pretty good idea how pages need to be linked.

This structure requires 3-4 different page designs:

Home page and Portfolio overview page could be combined.

Although you'll have many project pages you'll only need one page design/template for it. Headlines, text and images will change, of course, but the design can/should be the same for all project pages. There may be slight differences between the project pages such as color coding or icons that can help people identify in which section they are.

Navigation

The navigation above is part of the sitemap diagram so don't think it has to look like that. It can have any form as long as the 3-4 links are used. "Name" in this example would link to the home/landing page but you may call this "home" instead and have a separate placement for your name. Name and navigation should be visible (or at least accessible) on all the pages. If we use this simple setup you can add as many projects you need over time without having to adjust the main navigation. Once on a project page there's one button/link which will lead back to the portfolio overview page (and from there again to another project page).

Although this setup is likely all you need keep in mind that you would run into navigation issues if you add another (5th) section. For example "Blog"/"Journal" or "News". In that case you'd need to update the navigation on all existing pages which means a lot of copy and pasting. Not a huge deal but something you should be aware of.

Static vs. Dynamic (database driven) websites

This rather small website we're creating here is a "static" website as oppose to a "dynamic", database driven website. The majority of websites you'll see online nowadays are dynamic sites that were built with Content Management Systems (CMS) such as Wordpress, Drupal, Expression Engine etc.

Dynamic websites are great for larger projects. CMS also allow easy updating even for people (your clients) that don't have coding knowledge. The CMS has an admin section where you can login in and make updates using forms (such as editing/posting text and images). But CMS are usually complex beasts and and it takes quite some time to learn how to "control" and setup such a system. The end result in a browser is still the same combination of HTML and CSS (and often some Java Script) but the CMS is putting together "pieces" on the fly.

For example the navigation is usually such a "piece" or module. The CMS puts all the modules together and outputs them as a "regular" HTML page. This way the navigation exists only once but can be displayed on hundreds of pages. So adding something to the navigation only needs to happen once. No need to copy and paste it into hundreds of pages manually.

For a small portfolio site it's perfectly fine to do it manually though. Since you know the coding now it's less work compared to learning a CMS, installing a database etc. If you're interested in starting a career as a web-designer or/and developer though, you'll need to learn a CMS (or two or three) eventually.

Process/Phases

Image Preparation for the Web

Start to collect images from your class projects. Make sure you keep them organized in folders. Since you may use these folders for the website later make sure the file and folder names are all lowercase without blank spaces. The image size depends on the layout in the end. If you don't know the final image size yet I recommend to collect images at around 1600px in width (big enough for most purposes but not too large). Save them as JPGs. The image file sizes need to be as small as they can be to ensure quick page loading times later. But the image quality needs to be the best possible at that file size. If you're in Photoshop use the EXPORT > SAVE FOR WEB option and save images as JPGs using the "high" or "very high" setting. Using the Save For Web option results in the smallest possible file size for the image quality chosen (= the most "optimized" image).

You may need smaller, cropped versions of some of those images later (think small images thumbnails in a grid). For this open up the 1600px width image in Photoshop and scale/crop it before you Save it for the Web again.