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
- Decided what you want to create for your website (I would suggest a portfolio site).
- 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.
- 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.
- 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