DES 250 Digital Media Design II / Fall '23
DES 250 Digital Media Design II / Fall '23

Assignment 3: Responsive Portfolio Website

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

Although you don't have anything to show for 3rd and 4th year, add those links into the navigation and overview pages (they won't actually link to anything until you add the projects).

Content Modules

A good way to think about this may be to divide the site content into modules. And then decide if those modules are being presented on separate pages or if some (or all) of them can be combined on a page.

The navigation menu should not include links to single project pages, rather only links to overview pages. That way, if you add a project to your site, you'll only need to add a link to one of the overview pages and then create a new page for the project itself. The navigation menu, which exists on every page, doesn't need to be updated in that case.

Structure

The following sitemap shows an example structure/sitemap. When looking at a sitemap you get a pretty good idea how pages need to be linked.

This structure requires 3-4 different page designs (templates):

HOME page and PORTFOLIO overview page could be combined (or HOME and ABOUT pages, or in fact, all three of them).

Although you'll have numerous 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 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 as a site identification. If we use this setup you can add as many projects you need over time without having to adjust the main navigation. To navigate to the different projects, the simplest is to switch between the PORTFOLIO Overview page and the CLASS/PROJECT pages. To view a project (for example "Color Theory") you click a link on the PORTFOLIO page. And on the project page, you click on "PORTFOLIO" to get back to this overview page. Avoid having class/project links on the individual project pages because it would mean you need to update the navigation each time you add a new project.

Sitemap/Navigation: Possible Scenarios

Below are options that came to my mind. The sitemap will often directly affect the navigation menu.



3 levels: PORTFOLIO overview page contains list with links to all project pages. The project list could be just type or images (or a combination of both).

This structure could easily turn into a 2-level navigation if the HOME and ABOUT pages are combined.

You'd navigate back and forth between the PORTFOLIO overview page and the class pages/project pages.




2 levels: Here the HOME and PORTFOLIO pages are combined. Only two links in navigation menu.




3 levels: PORTFOLIO split up in two sections. More links in navigation menu but clearer separation of UIC and PERSONAL work (provided you wanto to show personal work).




2 levels: UIC and PERSONAL sections are long pages containing all the classes/projects. In order to keep scrolling limited, the project images should be small but could be opened up larger in a Lightbox.




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 2000px 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 2000px width image in Photoshop and scale/crop it before you Save it for the Web again.

Don't place images in your code files that are too large! Even at its largest size (around 2000px in width) the file size should be under 500K.

Example

For a portfolio website I created recently I saved the images in 3 sizes:
400px x 400px (thumbnail for artist overview page)
500px in width for artist detail page (the height of the image differs depending on its aspect ratio)
2000px width for the large images that appear in the Lightbox (height differs)

Some sites save additional image sizes for retina displays (twice the pixel density) but that would complicate things here and is not absolutely necessary.