1
00:00:00,050 --> 00:00:03,744
[SOUND] Before you design a website,

2
00:00:03,744 --> 00:00:08,297
it's important to have
some kind of a plan or

3
00:00:08,297 --> 00:00:12,001
a wire frame to guide your efforts.

4
00:00:12,001 --> 00:00:13,819
Depending on the size of the team,

5
00:00:13,819 --> 00:00:18,083
creating the backend of a website can
involve other team members, developers,

6
00:00:18,083 --> 00:00:21,780
database engineers,
system administrators, and more.

7
00:00:21,780 --> 00:00:26,100
And, if you're doing it by yourself,
it can be a lot of your time.

8
00:00:26,100 --> 00:00:30,350
Changing things later in the process
is more expensive, but plans,

9
00:00:30,350 --> 00:00:32,690
and prototypes, are easy to change.

10
00:00:33,710 --> 00:00:38,090
But, sometimes, when you go from
a simple sketch to digital pixels,

11
00:00:38,090 --> 00:00:41,400
the results aren't
exactly what you expect.

12
00:00:41,400 --> 00:00:46,600
Elements that you created on paper, or in
a wire framing app might not be properly

13
00:00:46,600 --> 00:00:52,470
proportioned, or they may not quite look
right at different responsive sizes.

14
00:00:52,470 --> 00:00:55,400
To solve this problem,
I like to carry the design and

15
00:00:55,400 --> 00:00:58,120
prototyping process beyond a wire frame.

16
00:00:58,120 --> 00:01:02,080
And continue to make design
decisions in a web browser.

17
00:01:02,080 --> 00:01:07,680
When you work with real HTML and CSS, and
you're able to see your site on a real

18
00:01:07,680 --> 00:01:13,040
screen, you're able to see a more accurate
representation of the final result.

19
00:01:14,270 --> 00:01:17,850
In this course,
we're going to start with a wire frame for

20
00:01:17,850 --> 00:01:22,060
a profile page on a new social network for
designers.

21
00:01:22,060 --> 00:01:28,140
We'll create an HTML and CSS prototype
using the Bootstrap web framework.

22
00:01:28,140 --> 00:01:31,780
That way we'll have an actual
web page within preview and

23
00:01:31,780 --> 00:01:34,380
interact with a web browser.

24
00:01:34,380 --> 00:01:38,870
If you are not familiar with bootstrap,
be sure to check the prerequisites for

25
00:01:38,870 --> 00:01:44,080
this course and the notes associated with
this video so that you can get started.

26
00:01:44,080 --> 00:01:47,190
Let's take a look at the wire frame.

27
00:01:47,190 --> 00:01:49,980
In the desktop and mobile versions,

28
00:01:49,980 --> 00:01:55,010
there's a featured image
followed by a profile image,

29
00:01:55,010 --> 00:02:01,830
the person's name and location, a bio,
a button that says send message.

30
00:02:01,830 --> 00:02:05,410
And there's also a gallery of images.

31
00:02:05,410 --> 00:02:10,600
There's also a header at the top and
a footer down at the bottom.

32
00:02:10,600 --> 00:02:15,410
This might look good in a wire frame, but
we'll most likely improve on this design

33
00:02:15,410 --> 00:02:18,730
after we see a working
prototype in a web browser.

34
00:02:19,780 --> 00:02:23,430
Once the design is in a web browser,
we're at a big advantage,

35
00:02:23,430 --> 00:02:28,040
because we've already created
lots of the HTML and CSS.

36
00:02:28,040 --> 00:02:31,790
Much of that may be reusable
when creating the final version

37
00:02:31,790 --> 00:02:35,630
of the website using templates and
views of a backend.

38
00:02:35,630 --> 00:02:39,760
You could incorporate that code into
something like a WordPress theme,

39
00:02:39,760 --> 00:02:41,815
a Ruby on Rails app.

40
00:02:41,815 --> 00:02:43,745
A PHP website, or

41
00:02:43,745 --> 00:02:49,075
one of the many other languages used to
create websites and web applications.

42
00:02:49,075 --> 00:02:51,635
It won't translate
perfectly in every case.

43
00:02:51,635 --> 00:02:56,535
Often the prototyping work
done here is useful later on.

44
00:02:56,535 --> 00:02:58,615
Let's turn this wire frame into code.