WEBVTT

00:00:00.300 --> 00:00:07.574
[Morse code beeps]
[Whoosh]

00:00:07.574 --> 00:00:12.012
[Helicopter rotor]

00:00:12.178 --> 00:00:14.814
Hi, my name is Annika Thomas
and I'm a Fellow

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

00:00:19.119 --> 00:00:22.122
about designing personal websites
and portfolios.

00:00:23.923 --> 00:00:25.892
The goals of this lesson

00:00:25.892 --> 00:00:29.763
include that you should be able
to identify the purpose and intended

00:00:29.763 --> 00:00:34.267
audience of a personal website
and tailor that content accordingly.

00:00:35.402 --> 00:00:39.105
You should be able to design
a clear, organized structure

00:00:39.105 --> 00:00:42.108
for a personal or professional website,

00:00:42.942 --> 00:00:46.880
and you'll begin drafting a website
that effectively communicates

00:00:47.147 --> 00:00:50.150
your work skills
and potentially interests.

00:00:51.084 --> 00:00:54.287
Some criteria
for success for a personal website

00:00:54.487 --> 00:00:58.758
include that it should be purpose
driven having a clear goal.

00:00:59.459 --> 00:01:01.561
It should be audience focused.

00:01:01.561 --> 00:01:05.565
So the content and tone are designed
for the intended reader.

00:01:06.232 --> 00:01:08.001
It should be well organized.

00:01:08.001 --> 00:01:11.371
Information
is logically structured and scannable.

00:01:12.205 --> 00:01:13.940
It should be informative.

00:01:13.940 --> 00:01:18.878
So the projects and experience included
effectively communicate what you did,

00:01:19.112 --> 00:01:22.849
why it mattered,
and what skills or tools were involved.

00:01:24.918 --> 00:01:27.320
And your website should be maintainable.

00:01:27.320 --> 00:01:31.057
The site is a living document
that can evolve over time.

00:01:31.724 --> 00:01:35.128
There are quite a few different types
of personal websites.

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

00:01:41.067 --> 00:01:44.504
It's a fast, scannable
snapshot of your experience

00:01:44.737 --> 00:01:47.440
that complements a traditional resume.

00:01:47.440 --> 00:01:49.209
You could have a portfolio site.

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

00:01:54.047 --> 00:01:58.218
through projects, visuals, or artifacts,
as opposed to bullet points.

00:01:59.819 --> 00:02:02.889
You could have a project
or paper landing page.

00:02:03.423 --> 00:02:06.993
So this is a focused page
that explains a specific project,

00:02:07.127 --> 00:02:10.130
publication, or piece of research.

00:02:11.231 --> 00:02:14.234
You could have a demo or a technical site.

00:02:14.367 --> 00:02:17.403
These demonstrate technical skills
through interactive

00:02:17.437 --> 00:02:20.440
tools, code, or live examples.

00:02:22.008 --> 00:02:25.011
Or you could have a personal home page
or a blog.

00:02:25.178 --> 00:02:29.015
This is a space to share ideas,
writing, or interests

00:02:29.249 --> 00:02:31.017
alongside your professional work.

00:02:32.252 --> 00:02:33.486
So we're going to start with

00:02:33.486 --> 00:02:37.123
an activity
to identify your web site type.

00:02:37.690 --> 00:02:41.561
So go ahead and take about five minutes
and follow the instructions

00:02:41.561 --> 00:02:45.665
outlined in the activity
to identify your web site type.

00:02:45.865 --> 00:02:50.170
Write down your primary website goal
and which type best supports

00:02:50.170 --> 00:02:53.139
that goal right now.

00:02:53.573 --> 00:02:58.811
[Alien spaceship beeps]

00:03:01.981 --> 00:03:04.284
So your website should really be tailored

00:03:04.284 --> 00:03:07.287
to a specific intended audience.

00:03:07.320 --> 00:03:12.125
Some common audiences
include potential employers or recruiters,

00:03:12.659 --> 00:03:16.062
professional collaborators, advisors
or peers,

00:03:17.197 --> 00:03:20.200
a broader public or online community.

00:03:21.134 --> 00:03:22.969
Some different audiences

00:03:22.969 --> 00:03:25.872
will scan the content differently.

00:03:25.872 --> 00:03:28.875
They'll care about different details
on your website

00:03:29.108 --> 00:03:32.111
and spend different amounts of time
on your site.

00:03:32.879 --> 00:03:35.515
So design primarily for one

00:03:35.515 --> 00:03:38.818
audience in mind,
not for everyone equally.

00:03:39.018 --> 00:03:42.155
You want your website
to have a specific purpose,

00:03:42.388 --> 00:03:45.158
and a big piece of
that is your intended audience.

00:03:47.060 --> 00:03:49.629
So what content belongs on your website?

00:03:49.629 --> 00:03:55.235
Well, some common sections include
having an about or bio section,

00:03:55.535 --> 00:03:59.672
including projects
or research, publications or writing,

00:04:00.006 --> 00:04:03.009
teaching or service, media press

00:04:03.009 --> 00:04:06.613
or outreach, code repositories or demos,

00:04:06.980 --> 00:04:09.983
and including a blog or recent news.

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

00:04:14.120 --> 00:04:17.123
where you outline
the content of your website.

00:04:17.223 --> 00:04:20.059
Take about 20 minutes on this activity

00:04:20.059 --> 00:04:22.829
and use a text editor on your computer

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

00:04:26.933 --> 00:04:30.737
Focus during this activity
on the information itself,

00:04:30.937 --> 00:04:33.940
as opposed to the format or website style.

00:04:39.812 --> 00:04:42.815
[Alien spaceship beeps]

00:04:44.284 --> 00:04:47.654
Now that you've completed
an outline of the information

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

00:04:50.890 --> 00:04:55.328
to look at potential organizations
or structures of website.

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

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

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

00:05:10.076 --> 00:05:13.079
There's a balance
between the descriptions

00:05:13.146 --> 00:05:16.749
and the visuals that we want to include
in order to communicate

00:05:16.749 --> 00:05:18.518
what was done during that project.

00:05:19.819 --> 00:05:20.153
So we'll

00:05:20.153 --> 00:05:23.389
take a little bit of time
to look at some examples

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

00:05:27.694 --> 00:05:30.697
The first of which I did
using Google sites.

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

00:05:35.702 --> 00:05:40.740
include recent news,
some select projects, talks, press.

00:05:41.274 --> 00:05:45.011
And I designed this website to be a bit
more like a portfolio

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

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

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

00:06:02.962 --> 00:06:06.833
It's hosted using a GitHub repository,

00:06:06.833 --> 00:06:09.969
so I've written all of this in HTML.

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

00:06:13.005 --> 00:06:16.409
but I have more ability
to customize the different material.

00:06:17.443 --> 00:06:18.311
So you can see

00:06:18.311 --> 00:06:21.781
I have an about section
with some of my research interests,

00:06:22.081 --> 00:06:25.885
some recent news and select publications,
as well as ways

00:06:25.885 --> 00:06:27.820
to contact me on the website.

00:06:27.820 --> 00:06:33.393
And across the top I have different
sections that correspond to the parts

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

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

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

00:06:48.674 --> 00:06:52.645
different videos or different publications
in your personal website.

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

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

00:07:02.889 --> 00:07:06.692
Some good practices
include having alt text

00:07:06.692 --> 00:07:10.163
for your images, linking descriptive text.

00:07:10.163 --> 00:07:15.067
So hyperlink text, avoiding
using long URLs

00:07:15.268 --> 00:07:19.038
or saying click here
and linking the here.

00:07:19.605 --> 00:07:23.843
You want to include high contrast text
and avoid distracting backgrounds.

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

00:07:28.047 --> 00:07:30.716
to communicate information or messages.

00:07:30.716 --> 00:07:33.119
So make sure you're using
a colorblind checker

00:07:33.119 --> 00:07:36.122
to ensure that everything's
still readable.

00:07:36.589 --> 00:07:39.692
You want to be consistent
with your heading levels.

00:07:39.826 --> 00:07:42.829
Use headers in the order
that they're designed.

00:07:42.862 --> 00:07:45.998
This is the way in which screen readers
navigate websites

00:07:45.998 --> 00:07:49.135
so that people are able to
skip different sections

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

00:07:53.439 --> 00:07:56.242
And for some more information
on accessibility,

00:07:56.242 --> 00:07:59.745
check out the Aero
Astro com Lab Accessibility Guide.

00:08:00.746 --> 00:08:01.080
Now we'll

00:08:01.080 --> 00:08:04.217
talk a little bit about domain names.

00:08:04.217 --> 00:08:07.854
If you're creating a website
using something like Squarespace,

00:08:07.854 --> 00:08:10.857
or Wix or, Google sites, then

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

00:08:15.328 --> 00:08:18.898
But if you want your website name to be,
for example,

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

00:08:24.704 --> 00:08:25.705
And a domain name

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

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

00:08:34.113 --> 00:08:37.884
This maps
your domain name into a server IP address.

00:08:38.184 --> 00:08:41.687
That's what
the browser uses to connect to.

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

00:08:45.691 --> 00:08:48.694
that's typed into a browser, DNS lookup,

00:08:48.694 --> 00:08:51.531
it finds the server IP,
and then the website loads.

00:08:52.632 --> 00:08:53.633
Now, if you wanted to

00:08:53.633 --> 00:08:57.403
get your own domain name,
these are leased annually.

00:08:57.403 --> 00:09:00.439
Some standard ones like .com .net

00:09:00.439 --> 00:09:03.843
or .org cost about 10 to $20 a year.

00:09:04.143 --> 00:09:07.179
But new or specialty domain names

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

00:09:12.018 --> 00:09:14.554
Some popular providers for domain names

00:09:14.554 --> 00:09:17.557
include Wix, GoDaddy, and Namecheap.

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

00:09:22.261 --> 00:09:25.698
the purpose and intended audience
of a personal website.

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

00:09:31.437 --> 00:09:34.140
and you began drafting a website

00:09:34.140 --> 00:09:37.143
that effectively communicates your work.

00:09:37.510 --> 00:09:39.979
[Alien spaceship beeps]