WEBVTT

00:00:00.000 --> 00:00:00.300 align:middle line:90%


00:00:00.300 --> 00:00:07.574 align:middle line:84%
[Morse code beeps]
[Whoosh]

00:00:07.574 --> 00:00:12.012 align:middle line:90%
[Helicopter rotor]

00:00:12.178 --> 00:00:14.814 align:middle line:84%
Hi, my name is Annika Thomas
and I'm a Fellow

00:00:14.814 --> 00:00:19.119 align:middle line:84%
with the AeroAstro Communication
Lab at MIT, and today we'll be talking

00:00:19.119 --> 00:00:22.122 align:middle line:84%
about designing personal websites
and portfolios.

00:00:23.923 --> 00:00:25.892 align:middle line:90%
The goals of this lesson

00:00:25.892 --> 00:00:29.763 align:middle line:84%
include that you should be able
to identify the purpose and intended

00:00:29.763 --> 00:00:34.267 align:middle line:84%
audience of a personal website
and tailor that content accordingly.

00:00:35.402 --> 00:00:39.105 align:middle line:84%
You should be able to design
a clear, organized structure

00:00:39.105 --> 00:00:42.108 align:middle line:90%
for a personal or professional website,

00:00:42.942 --> 00:00:46.880 align:middle line:84%
and you'll begin drafting a website
that effectively communicates

00:00:47.147 --> 00:00:50.150 align:middle line:84%
your work skills
and potentially interests.

00:00:51.084 --> 00:00:54.287 align:middle line:84%
Some criteria
for success for a personal website

00:00:54.487 --> 00:00:58.758 align:middle line:84%
include that it should be purpose
driven having a clear goal.

00:00:59.459 --> 00:01:01.561 align:middle line:90%
It should be audience focused.

00:01:01.561 --> 00:01:05.565 align:middle line:84%
So the content and tone are designed
for the intended reader.

00:01:06.232 --> 00:01:08.001 align:middle line:90%
It should be well organized.

00:01:08.001 --> 00:01:11.371 align:middle line:84%
Information
is logically structured and scannable.

00:01:12.205 --> 00:01:13.940 align:middle line:90%
It should be informative.

00:01:13.940 --> 00:01:18.878 align:middle line:84%
So the projects and experience included
effectively communicate what you did,

00:01:19.112 --> 00:01:22.849 align:middle line:84%
why it mattered,
and what skills or tools were involved.

00:01:24.918 --> 00:01:27.320 align:middle line:90%
And your website should be maintainable.

00:01:27.320 --> 00:01:31.057 align:middle line:84%
The site is a living document
that can evolve over time.

00:01:31.724 --> 00:01:35.128 align:middle line:84%
There are quite a few different types
of personal websites.

00:01:35.695 --> 00:01:40.967 align:middle line:84%
Some of them include a resume website,
which is a single page overview.

00:01:41.067 --> 00:01:44.503 align:middle line:84%
It's a fast, scannable
snapshot of your experience

00:01:44.737 --> 00:01:47.440 align:middle line:90%
that complements a traditional resume.

00:01:47.440 --> 00:01:49.209 align:middle line:90%
You could have a portfolio site.

00:01:49.209 --> 00:01:53.947 align:middle line:84%
With portfolio sites, we usually use them
when your work is best communicated

00:01:54.047 --> 00:01:58.218 align:middle line:84%
through projects, visuals, or artifacts,
as opposed to bullet points.

00:01:59.819 --> 00:02:02.889 align:middle line:84%
You could have a project
or paper landing page.

00:02:03.423 --> 00:02:06.993 align:middle line:84%
So this is a focused page
that explains a specific project,

00:02:07.127 --> 00:02:10.130 align:middle line:90%
publication, or piece of research.

00:02:11.231 --> 00:02:14.234 align:middle line:90%
You could have a demo or a technical site.

00:02:14.367 --> 00:02:17.403 align:middle line:84%
These demonstrate technical skills
through interactive

00:02:17.437 --> 00:02:20.440 align:middle line:90%
tools, code, or live examples.

00:02:22.008 --> 00:02:25.011 align:middle line:84%
Or you could have a personal home page
or a blog.

00:02:25.178 --> 00:02:29.015 align:middle line:84%
This is a space to share ideas,
writing, or interests

00:02:29.249 --> 00:02:31.017 align:middle line:90%
alongside your professional work.

00:02:32.252 --> 00:02:33.486 align:middle line:90%
So we're going to start with

00:02:33.486 --> 00:02:37.123 align:middle line:84%
an activity
to identify your web site type.

00:02:37.690 --> 00:02:41.561 align:middle line:84%
So go ahead and take about five minutes
and follow the instructions

00:02:41.561 --> 00:02:45.665 align:middle line:84%
outlined in the activity
to identify your web site type.

00:02:45.865 --> 00:02:50.170 align:middle line:84%
Write down your primary website goal
and which type best supports

00:02:50.170 --> 00:02:53.139 align:middle line:90%
that goal right now.

00:02:53.573 --> 00:02:58.811 align:middle line:90%
[Alien spaceship beeps]

00:03:01.981 --> 00:03:04.284 align:middle line:90%
So your website should really be tailored

00:03:04.284 --> 00:03:07.287 align:middle line:90%
to a specific intended audience.

00:03:07.320 --> 00:03:12.125 align:middle line:84%
Some common audiences
include potential employers or recruiters,

00:03:12.659 --> 00:03:16.062 align:middle line:84%
professional collaborators, advisors
or peers,

00:03:17.197 --> 00:03:20.200 align:middle line:90%
a broader public or online community.

00:03:21.134 --> 00:03:22.969 align:middle line:90%
Some different audiences

00:03:22.969 --> 00:03:25.872 align:middle line:90%
will scan the content differently.

00:03:25.872 --> 00:03:28.875 align:middle line:84%
They'll care about different details
on your website

00:03:29.108 --> 00:03:32.111 align:middle line:84%
and spend different amounts of time
on your site.

00:03:32.879 --> 00:03:35.515 align:middle line:90%
So design primarily for one

00:03:35.515 --> 00:03:38.817 align:middle line:84%
audience in mind,
not for everyone equally.

00:03:39.018 --> 00:03:42.155 align:middle line:84%
You want your website
to have a specific purpose,

00:03:42.388 --> 00:03:45.158 align:middle line:84%
and a big piece of
that is your intended audience.

00:03:47.060 --> 00:03:49.629 align:middle line:90%
So what content belongs on your website?

00:03:49.629 --> 00:03:55.235 align:middle line:84%
Well, some common sections include
having an about or bio section,

00:03:55.535 --> 00:03:59.672 align:middle line:84%
including projects
or research, publications or writing,

00:04:00.006 --> 00:04:03.009 align:middle line:90%
teaching or service, media press

00:04:03.009 --> 00:04:06.613 align:middle line:90%
or outreach, code repositories or demos,

00:04:06.980 --> 00:04:09.983 align:middle line:90%
and including a blog or recent news.

00:04:11.317 --> 00:04:14.120 align:middle line:84%
So we're going to take
a little bit of time to do an activity

00:04:14.120 --> 00:04:17.123 align:middle line:84%
where you outline
the content of your website.

00:04:17.223 --> 00:04:20.059 align:middle line:90%
Take about 20 minutes on this activity

00:04:20.059 --> 00:04:22.829 align:middle line:90%
and use a text editor on your computer

00:04:22.829 --> 00:04:26.532 align:middle line:84%
to outline the content that you'd like
to include on your website.

00:04:26.933 --> 00:04:30.737 align:middle line:84%
Focus during this activity
on the information itself,

00:04:30.937 --> 00:04:33.940 align:middle line:90%
as opposed to the format or website style.

00:04:39.812 --> 00:04:42.815 align:middle line:90%
[Alien spaceship beeps]

00:04:44.284 --> 00:04:47.654 align:middle line:84%
Now that you've completed
an outline of the information

00:04:47.654 --> 00:04:50.890 align:middle line:84%
that you want to include on your website,
we'll take a little bit of time

00:04:50.890 --> 00:04:55.328 align:middle line:84%
to look at potential organizations
or structures of website.

00:04:55.728 --> 00:05:01.367 align:middle line:84%
A couple of common examples include
an engineering portfolio site map example,

00:05:01.367 --> 00:05:04.704 align:middle line:84%
which can have a tree structure
like we see on the left here.

00:05:05.038 --> 00:05:09.776 align:middle line:84%
And another is a project page
layout example, which we see on the right.

00:05:10.076 --> 00:05:13.079 align:middle line:84%
There's a balance
between the descriptions

00:05:13.146 --> 00:05:16.749 align:middle line:84%
and the visuals that we want to include
in order to communicate

00:05:16.749 --> 00:05:18.518 align:middle line:90%
what was done during that project.

00:05:19.819 --> 00:05:20.153 align:middle line:90%
So we'll

00:05:20.153 --> 00:05:23.389 align:middle line:84%
take a little bit of time
to look at some examples

00:05:23.389 --> 00:05:27.327 align:middle line:84%
of different personal websites
that I've completed over the years.

00:05:27.694 --> 00:05:30.697 align:middle line:84%
The first of which I did
using Google sites.

00:05:31.097 --> 00:05:35.268 align:middle line:84%
And you can see
I start off with an About Me section,

00:05:35.702 --> 00:05:40.740 align:middle line:84%
include recent news,
some select projects, talks, press.

00:05:41.274 --> 00:05:45.011 align:middle line:84%
And I designed this website to be a bit
more like a portfolio

00:05:45.144 --> 00:05:49.415 align:middle line:84%
with a list of all of the projects
that I had completed at this time.

00:05:50.116 --> 00:05:54.354 align:middle line:84%
Now, this was the first website
that I put together, and I decided later

00:05:54.354 --> 00:06:02.628 align:middle line:84%
that I wanted some more customization, so
this is the website that I use currently.

00:06:02.962 --> 00:06:06.833 align:middle line:90%
It's hosted using a GitHub repository,

00:06:06.833 --> 00:06:09.969 align:middle line:90%
so I've written all of this in HTML.

00:06:09.969 --> 00:06:12.972 align:middle line:84%
So there's a bit more of an involved
process in creating this,

00:06:13.005 --> 00:06:16.409 align:middle line:84%
but I have more ability
to customize the different material.

00:06:17.443 --> 00:06:18.311 align:middle line:90%
So you can see

00:06:18.311 --> 00:06:21.781 align:middle line:84%
I have an about section
with some of my research interests,

00:06:22.081 --> 00:06:25.885 align:middle line:84%
some recent news and select publications,
as well as ways

00:06:25.885 --> 00:06:27.820 align:middle line:90%
to contact me on the website.

00:06:27.820 --> 00:06:33.393 align:middle line:84%
And across the top I have different
sections that correspond to the parts

00:06:33.393 --> 00:06:37.830 align:middle line:84%
that I want to include on my website,
my publications, a couple projects.

00:06:38.231 --> 00:06:43.202 align:middle line:84%
I have a section with my CV
and some press and talks that I've given.

00:06:43.669 --> 00:06:48.674 align:middle line:84%
And a good thing about a format
like this is we can include links to

00:06:48.674 --> 00:06:52.645 align:middle line:84%
different videos or different publications
in your personal website.

00:06:54.847 --> 00:06:58.918 align:middle line:84%
Now we'll spend a little bit of time
talking about website accessibility,

00:06:58.918 --> 00:07:02.388 align:middle line:84%
which is something you should be thinking
about while building your websites.

00:07:02.889 --> 00:07:06.692 align:middle line:84%
Some good practices
include having alt text

00:07:06.692 --> 00:07:10.163 align:middle line:90%
for your images, linking descriptive text.

00:07:10.163 --> 00:07:15.067 align:middle line:84%
So hyperlink text, avoiding
using long URLs

00:07:15.268 --> 00:07:19.038 align:middle line:84%
or saying click here
and linking the here.

00:07:19.605 --> 00:07:23.843 align:middle line:84%
You want to include high contrast text
and avoid distracting backgrounds.

00:07:24.610 --> 00:07:28.047 align:middle line:84%
When designing your website,
you don't want to rely on color

00:07:28.047 --> 00:07:30.716 align:middle line:90%
to communicate information or messages.

00:07:30.716 --> 00:07:33.119 align:middle line:84%
So make sure you're using
a colorblind checker

00:07:33.119 --> 00:07:36.122 align:middle line:84%
to ensure that everything's
still readable.

00:07:36.589 --> 00:07:39.692 align:middle line:84%
You want to be consistent
with your heading levels.

00:07:39.826 --> 00:07:42.829 align:middle line:84%
Use headers in the order
that they're designed.

00:07:42.862 --> 00:07:45.998 align:middle line:84%
This is the way in which screen readers
navigate websites

00:07:45.998 --> 00:07:49.135 align:middle line:84%
so that people are able to
skip different sections

00:07:49.268 --> 00:07:52.872 align:middle line:84%
and go to different parts, so
make sure those headings are consistent.

00:07:53.439 --> 00:07:56.242 align:middle line:84%
And for some more information
on accessibility,

00:07:56.242 --> 00:07:59.745 align:middle line:84%
check out the Aero
Astro com Lab Accessibility Guide.

00:08:00.746 --> 00:08:01.080 align:middle line:90%
Now we'll

00:08:01.080 --> 00:08:04.217 align:middle line:90%
talk a little bit about domain names.

00:08:04.217 --> 00:08:07.854 align:middle line:84%
If you're creating a website
using something like Squarespace,

00:08:07.854 --> 00:08:10.857 align:middle line:90%
or Wix or, Google sites, then

00:08:11.090 --> 00:08:15.127 align:middle line:84%
usually that domain name
is going to be included in the website.

00:08:15.328 --> 00:08:18.898 align:middle line:84%
But if you want your website name to be,
for example,

00:08:18.898 --> 00:08:24.203 align:middle line:84%
your first and last name.com,
then you want to create a domain name.

00:08:24.704 --> 00:08:25.705 align:middle line:90%
And a domain name

00:08:25.705 --> 00:08:29.842 align:middle line:84%
is basically your website's human
readable address on the internet.

00:08:30.109 --> 00:08:34.113 align:middle line:84%
You have a domain name server, which is
effectively the internet's phone book.

00:08:34.113 --> 00:08:37.884 align:middle line:84%
This maps
your domain name into a server IP address.

00:08:38.183 --> 00:08:41.687 align:middle line:84%
That's what
the browser uses to connect to.

00:08:42.321 --> 00:08:45.691 align:middle line:84%
And so when you're looking at websites,
you have a domain name

00:08:45.691 --> 00:08:48.694 align:middle line:90%
that's typed into a browser, DNS lookup,

00:08:48.694 --> 00:08:51.531 align:middle line:84%
it finds the server IP,
and then the website loads.

00:08:52.632 --> 00:08:53.633 align:middle line:90%
Now, if you wanted to

00:08:53.633 --> 00:08:57.403 align:middle line:84%
get your own domain name,
these are leased annually.

00:08:57.403 --> 00:09:00.439 align:middle line:90%
Some standard ones like .com .net

00:09:00.439 --> 00:09:03.843 align:middle line:90%
or .org cost about 10 to $20 a year.

00:09:04.143 --> 00:09:07.179 align:middle line:90%
But new or specialty domain names

00:09:07.179 --> 00:09:11.350 align:middle line:84%
like .AI or .tech
are going to be a bit more expensive.

00:09:12.018 --> 00:09:14.554 align:middle line:90%
Some popular providers for domain names

00:09:14.554 --> 00:09:17.557 align:middle line:90%
include Wix, GoDaddy, and Namecheap.

00:09:19.225 --> 00:09:22.261 align:middle line:84%
Now, by the end of this website,
you should be able to identify

00:09:22.261 --> 00:09:25.698 align:middle line:84%
the purpose and intended audience
of a personal website.

00:09:26.198 --> 00:09:31.037 align:middle line:84%
You should be able to design a clear,
organized structure for a website,

00:09:31.437 --> 00:09:34.140 align:middle line:90%
and you began drafting a website

00:09:34.140 --> 00:09:37.143 align:middle line:90%
that effectively communicates your work.

00:09:37.510 --> 00:09:39.979 align:middle line:90%
[Alien spaceship beeps]