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

Assignment 2: 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).

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.




3 levels: YEARS and PERSONAL are the second level. You'd navigation back and forth between the CLASS pages (third level) and the second level overview pages. Most menu items in navigation but still manageable




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.