Author: danne

Lecture: Design

This class we will have a graphic design overview lecture. This will cover form, color theory, typography, grid structures and logos. We will also do a Photoshop workshop to learn how it is best used when designing a website.

Lecture Video

Adobe XD Demo

In Class Assignment

Design a logo or logotype for your website using Adobe Illustrator. Look at your name or companies name in at least 5 different typefaces to start. Play around with different forms and shapes with the type as well. You can look at BrandNew, The Design Blog and Logo Design Love for inspiration. Once you have a logo or logotype for your website you may start working on your homework for this week.

Homework

Design 3 different versions of the homepage for your website using the 960 grid system. Looking at different color schemes, typefaces, hierarchy systems, grid systems, images, icons, etc. Once you have these 3 designs complete post JPEG images of them to your blog with a brief explanation for each describing the concept and inspiration.

Place It Website
Photoshop Example
Lecture Slides PDF

Other Applications to Check Out:
Adobe XD (Suggested)
Figma (Suggested)
Sketch
Invision

Lecture: Define

This week we will be focusing on how to properly structure a website, create a sitemap that shows how every page is linked and creating sketches and wireframes that are the basis of any website design. I will show you examples of good and bad sitemaps, how to create sketches and properly label everything and take those sketches and turn them into refined wireframes using Adobe Illustrator.

In Class Assignment

For your in class assignment today, take what you learned during the lecture and apply it to your own website. Create a sitemap for your website. Sketch out wireframes for any unique pages on your website (i.e. for a portfolio website do the homepage, gallery page, project detail page, about page and contact us page). Once you have sketched out your idea and know where all your assets will be, create a final version of your wireframes using Illustrator. Post an image of your sitemap, photos of your sketches and an image of your final wireframes to the blog.

Sitemap Template

Wire-frame Template

Lecture Video

Homework

Create a blog post listing 3 websites that you think are nicely designed with an explanation why. Also create a Pinterest account if you dont already have one and “create a board” for this class. Use this “board” as your projects mood board as a way to collect images, colors, type, layouts and anything else that will inspire you while you design your website. Post the link to your board in this blog post as well. Here is a link to the board I created for this class and below is an example of a mood board.

Lecture Slides PDF

 

Lecture: Discover

Before we jump into anything else its probably a good idea to understand how the internet works, I will be giving a web 101 lecture on browsers, servers and how they communicate to create visual websites.

The first step when creating a website is really understanding the users that will be viewing the site, researching any potential competitors and really understand the market you will be entering. This process historically has been a two person job, a designer and a strategist. The strategist helps define who the end user will be and how the website will stand out in the existing market. The designer takes the strategist findings to help them create a structure, visual language and brand for the website. During this class we will review some case studies, go over the strategists role in detail as well as dissect and analyze an existing website.

Lecture Video

Homework

1. Decided what you want to create for your website (I would suggest a portfolio site).
2. Play the roll of the Strategist as well as the Designer. Figure out what your market is, who your users are and who your competitors are (find three). Pick one competitor and do a visual audit of their website.
3. Once this is complete create a blog post with a description of your website, the market research and your competitive audit. Add the link to this post to the Slack channel.
4. Watch the lecture video for Week 3 and come to Slack class with questions next week.

Market Analysis (Strategist’s Roll)
– What is your market?
– Who is your user? Create a user archetype.
– Who are your competitors? Put together a list of (at least 3) competitors.

Visual Audit (Designer’s Roll)
– Create screenshots of your competitors website homepages.
– Choose one competitor and overlay the websites grid on top of a screenshot of it (helpful to use the chrome plugin below).
– Create a color palette.
– Identify the typefaces used (names, sizes, hierarchy).
– List all the media types used (images, videos, audio, interactive embedded assets).

Helpful Tools:
Chrome Developer Tools
GoFullPage Chrome Plugin

Lecture Slides PDF

Lecture

This first class lecture will cover Professor Danne Woo’s experience designing and programming interactive websites and apps. Woo has worked in the industry for the more than a decade and received his Master’s Degree from the Interactive Telecommunications Program (ITP) at New York University (NYU) where he combined his passion for design, data, programming and new technologies.

We will then cover the course syllabus and review the requirements for the entire semester and discuss the importance of the four Ds: Discover, Define, Design and Develop.

Homework

1. Order the textbook.
2. Setup a blog for this class.
3. Sign up for Slack using the join link shared in Zoom.
4. Create a blog post sharing your favorite website and why.
5. Add the link to your blog post to the Slack class channel.
6. Watch the video of the Week 2 lecture and come with questions to our Slack class next week.

Lecture Slides PDF