Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,680 --> 00:00:07,400
Now it's time to get your first comprehensive look at the design that we're going to be implementing
2
00:00:07,460 --> 00:00:09,940
for our first project.
3
00:00:09,990 --> 00:00:17,070
I'm going to walk you through each page and explain the thought process that went into the design as
4
00:00:17,070 --> 00:00:26,580
well as the functionality required to implement it with material UI in the project files that you downloaded.
5
00:00:26,580 --> 00:00:37,860
You'll find the high fidelity design file for Adobe X the adobe SSD is a completely free program that
6
00:00:37,860 --> 00:00:46,320
allows you to build vector mockups of your designs and then wire it together for prototyping as well.
7
00:00:46,380 --> 00:00:53,310
I've found that this is a really helpful program especially since it's within the adobe ecosystem where
8
00:00:53,310 --> 00:00:56,170
I make a lot of my other resources anyways.
9
00:00:57,060 --> 00:01:02,790
I'll include the link to download Adobe actually into this video so that you can grab that and follow
10
00:01:02,790 --> 00:01:03,240
along.
11
00:01:04,380 --> 00:01:12,330
Here we are in Adobe SD and you can see the body of my software company Web site which we are going
12
00:01:12,330 --> 00:01:17,370
to be implementing with material UI in this course.
13
00:01:17,370 --> 00:01:25,190
So yes this is the Web site that we're going to be building purely with react and material UI.
14
00:01:25,230 --> 00:01:31,860
So I hope that that is really exciting for you and that your interest has been piqued because this is
15
00:01:31,860 --> 00:01:38,430
obviously a very comprehensive design that incorporates a lot of different types of elements.
16
00:01:38,520 --> 00:01:43,120
And we'll have a lot of different things going on to make sure that it all works the way that we want
17
00:01:43,120 --> 00:01:49,110
it to so let's begin by just going up to the home page.
18
00:01:49,190 --> 00:01:58,120
This first one here and I'll start taking you through the design of how I put it together and how we
19
00:01:58,120 --> 00:02:01,110
are going to build it the home page.
20
00:02:01,120 --> 00:02:06,820
I knew it was going to be what most people are going to see when they first find the site.
21
00:02:06,820 --> 00:02:13,300
And so I know that that not only needed to really capture their attention and show them that this is
22
00:02:13,300 --> 00:02:19,810
the right place that they're looking for but it also needed to convey the feel the you were going to
23
00:02:19,810 --> 00:02:22,660
find throughout the rest of the application.
24
00:02:22,780 --> 00:02:31,960
With that in mind I tried to make it is clean and minimal and efficient with how it displays the information
25
00:02:32,200 --> 00:02:38,050
so that users can then quickly find and go to what they're looking for specifically.
26
00:02:38,110 --> 00:02:44,290
So at the top here you can see the header which will be the first component that we were going to start
27
00:02:44,290 --> 00:02:44,980
working on.
28
00:02:45,400 --> 00:02:48,250
And here you see it in desktop mode.
29
00:02:48,250 --> 00:02:56,320
I actually didn't explicitly design my mobile site when I was doing this but I found the my design actually
30
00:02:56,320 --> 00:03:04,600
flowed very well for Mobile anyways and that material UI really helped out with that process too.
31
00:03:04,600 --> 00:03:12,130
So here it is in desktop mode then and you see the tabs at the top which we are going to build with
32
00:03:12,190 --> 00:03:20,260
reactive router for our navigation as well as the icon over here the company logo which also serves
33
00:03:20,320 --> 00:03:27,780
as a link to the home page the last element of the header is the Free Estimate button over here which
34
00:03:27,780 --> 00:03:34,470
will take you to the page with the estimated calculator index is a little reminder for the users that
35
00:03:34,470 --> 00:03:43,210
they can always go and check that out below the header is my slogan bringing West Coast technology to
36
00:03:43,210 --> 00:03:50,980
the Midwest and that really came from just thinking about react and how that came from Facebook and
37
00:03:50,980 --> 00:03:57,790
how that's really changed the software development and sort of the idea of bringing that out from Facebook
38
00:03:57,790 --> 00:04:06,690
from Silicon Valley to Kansas to the Midwest to give us these newer technological advancements I feel
39
00:04:06,690 --> 00:04:12,570
like that's something that a lot of business owners in the Midwest are looking for and that it really
40
00:04:12,570 --> 00:04:21,090
just captured the tone that I was going for for my business knew that I somehow wanted to create an
41
00:04:21,120 --> 00:04:29,190
icon that tied into that slogan but it took me a while to really come up with the exact idea for it
42
00:04:29,640 --> 00:04:31,680
and I'm really happy with how it turned out.
43
00:04:31,710 --> 00:04:32,560
Honestly.
44
00:04:32,700 --> 00:04:40,560
So to the right you can see this icon here is actually going to be an animation where this CPSU is being
45
00:04:40,560 --> 00:04:43,570
passed back and forth between the two hands.
46
00:04:43,770 --> 00:04:48,150
Adobe equity does not support animations or videos at the moment.
47
00:04:48,150 --> 00:04:57,220
And so I just put a screenshot of the animation inside as a place holder having this type of animation
48
00:04:57,430 --> 00:05:00,970
be the first thing that you see when you land on the page.
49
00:05:00,970 --> 00:05:07,060
I really think it just gives it that professional look and feel that people are expecting from a software
50
00:05:07,060 --> 00:05:14,740
company and overall just expresses the tone of friendliness and technology that I was hoping to get
51
00:05:14,740 --> 00:05:15,650
across.
52
00:05:16,330 --> 00:05:22,810
Since we do have this animation as the first thing right on our page we are going to right off the bat
53
00:05:23,020 --> 00:05:29,500
going to learn how to integrate those properly in our project with a special react library that I think
54
00:05:29,500 --> 00:05:33,990
you guys are really going to appreciate for the rest of the home page.
55
00:05:33,990 --> 00:05:39,960
I wanted it to sort of be a brief overview for the rest of the site so that people could quickly find
56
00:05:40,170 --> 00:05:47,110
where they needed to go from here and I started that out with the services that I have offered.
57
00:05:47,130 --> 00:05:53,670
So the custom software development IAW an Android app development and Web site development sections
58
00:05:53,910 --> 00:05:59,630
that you'll find on the services page I have all located here as well so people can right off the bat
59
00:05:59,670 --> 00:06:08,310
know exactly what I do and the main concern with these in terms of functionality is going to be lining
60
00:06:08,310 --> 00:06:15,180
up the icons and all of this text and making sure that they all flow properly not only here but also
61
00:06:15,180 --> 00:06:25,150
all of the icons together as the page resize is underneath the services we come down to one of my favorite
62
00:06:25,150 --> 00:06:27,210
is designs of the Web site.
63
00:06:27,210 --> 00:06:30,570
Honestly is this revolution section.
64
00:06:30,660 --> 00:06:39,750
So here I used my arc logo in a double repeating pattern to really create what I think is a interesting
65
00:06:39,990 --> 00:06:48,930
and captivating background image while using the lower opacity to kind of not make it as jarring or
66
00:06:48,930 --> 00:06:52,050
in your face as it might otherwise be.
67
00:06:52,060 --> 00:06:57,610
So I think that does a good job of capturing your attention without overpowering it and then making
68
00:06:57,610 --> 00:07:00,130
you interested in the words that are on top of it.
69
00:07:01,270 --> 00:07:07,210
Here we're going to learn about putting that image in the background and making sure that that handles
70
00:07:07,210 --> 00:07:14,530
correctly on different device sizes as well as creating that floating card book and aligning the content
71
00:07:14,530 --> 00:07:17,390
within that further down.
72
00:07:17,440 --> 00:07:19,600
We have the info section
73
00:07:22,300 --> 00:07:29,410
and this is where I have the about us and contact us pages and I squeezed those together because they
74
00:07:29,410 --> 00:07:36,460
seem obviously related and I just think what good in that inline display rather than having them each
75
00:07:36,460 --> 00:07:44,050
be their own section again here will implement a background image and then we'll really be focusing
76
00:07:44,080 --> 00:07:50,380
on the alignment of these two texts as the grid flows here.
77
00:07:50,380 --> 00:07:57,440
But the grid makes that really easy nearly finished going through the home page and that brings us down
78
00:07:57,470 --> 00:08:04,040
to my call to action which you'll find on almost all of the pages.
79
00:08:04,040 --> 00:08:11,750
This is where I again remind the user that I have the free estimate available as well as providing this
80
00:08:11,750 --> 00:08:18,440
background picture of the beach which I really like and this is from on Splash which I really just think
81
00:08:18,440 --> 00:08:26,840
creates a cool and kind of intriguing tone well like hmm what's out there what's over that horizon.
82
00:08:26,840 --> 00:08:33,230
What new technologies does the 21st century have to offer me or at least that's how I see it.
83
00:08:34,270 --> 00:08:42,280
Last but not least is the footer down here at the bottom and so this has a couple of interesting elements
84
00:08:42,280 --> 00:08:43,050
to it.
85
00:08:43,060 --> 00:08:50,800
First being the black slash over here so putting that on there will be one of the first challenges and
86
00:08:50,800 --> 00:08:56,350
then we have these social media icons which will get aligned and make sure all the links are working
87
00:08:56,350 --> 00:08:57,410
there as well.
88
00:08:57,550 --> 00:09:03,960
Opening up in the apps if they're installed on a phone and then in the middle we have the links to all
89
00:09:03,970 --> 00:09:10,840
the pages on the site so that people can pretty quickly and easily get an overview of all of the information
90
00:09:11,110 --> 00:09:14,230
and then navigate wherever they need to go.
91
00:09:14,230 --> 00:09:21,640
This obviously acts as the backup and secondary more specific navigation as opposed to the navigation
92
00:09:21,640 --> 00:09:26,030
in the header so that is the landing page.
93
00:09:26,040 --> 00:09:32,730
That is the first page that we're going to go out and build and you really are going to learn a ton
94
00:09:32,730 --> 00:09:40,050
just from this and you'll really see how to layout all these items on the screen and make sure they
95
00:09:40,050 --> 00:09:47,880
all properly interact and flow with one another and are all perfectly responsive to any screen size
96
00:09:47,910 --> 00:09:54,540
and orientation which is really going to be an exciting thing to show off before we start getting into
97
00:09:54,540 --> 00:09:55,510
the rest of the site.
11668
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.