Original subtitles

Now it's time to get your first comprehensive look at the design that we're going to be implementing

for our first project.

I'm going to walk you through each page and explain the thought process that went into the design as

well as the functionality required to implement it with material UI in the project files that you downloaded.

You'll find the high fidelity design file for Adobe X the adobe SSD is a completely free program that

allows you to build vector mockups of your designs and then wire it together for prototyping as well.

I've found that this is a really helpful program especially since it's within the adobe ecosystem where

I make a lot of my other resources anyways.

I'll include the link to download Adobe actually into this video so that you can grab that and follow

along.

Here we are in Adobe SD and you can see the body of my software company Web site which we are going

to be implementing with material UI in this course.

So yes this is the Web site that we're going to be building purely with react and material UI.

So I hope that that is really exciting for you and that your interest has been piqued because this is

obviously a very comprehensive design that incorporates a lot of different types of elements.

And we'll have a lot of different things going on to make sure that it all works the way that we want

it to so let's begin by just going up to the home page.

This first one here and I'll start taking you through the design of how I put it together and how we

are going to build it the home page.

I knew it was going to be what most people are going to see when they first find the site.

And so I know that that not only needed to really capture their attention and show them that this is

the right place that they're looking for but it also needed to convey the feel the you were going to

find throughout the rest of the application.

With that in mind I tried to make it is clean and minimal and efficient with how it displays the information

so that users can then quickly find and go to what they're looking for specifically.

So at the top here you can see the header which will be the first component that we were going to start

working on.

And here you see it in desktop mode.

I actually didn't explicitly design my mobile site when I was doing this but I found the my design actually

flowed very well for Mobile anyways and that material UI really helped out with that process too.

So here it is in desktop mode then and you see the tabs at the top which we are going to build with

reactive router for our navigation as well as the icon over here the company logo which also serves

as a link to the home page the last element of the header is the Free Estimate button over here which

will take you to the page with the estimated calculator index is a little reminder for the users that

they can always go and check that out below the header is my slogan bringing West Coast technology to

the Midwest and that really came from just thinking about react and how that came from Facebook and

how that's really changed the software development and sort of the idea of bringing that out from Facebook

from Silicon Valley to Kansas to the Midwest to give us these newer technological advancements I feel

like that's something that a lot of business owners in the Midwest are looking for and that it really

just captured the tone that I was going for for my business knew that I somehow wanted to create an

icon that tied into that slogan but it took me a while to really come up with the exact idea for it

and I'm really happy with how it turned out.

Honestly.

So to the right you can see this icon here is actually going to be an animation where this CPSU is being

passed back and forth between the two hands.

Adobe equity does not support animations or videos at the moment.

And so I just put a screenshot of the animation inside as a place holder having this type of animation

be the first thing that you see when you land on the page.

I really think it just gives it that professional look and feel that people are expecting from a software

company and overall just expresses the tone of friendliness and technology that I was hoping to get

across.

Since we do have this animation as the first thing right on our page we are going to right off the bat

going to learn how to integrate those properly in our project with a special react library that I think

you guys are really going to appreciate for the rest of the home page.

I wanted it to sort of be a brief overview for the rest of the site so that people could quickly find

where they needed to go from here and I started that out with the services that I have offered.

So the custom software development IAW an Android app development and Web site development sections

that you'll find on the services page I have all located here as well so people can right off the bat

know exactly what I do and the main concern with these in terms of functionality is going to be lining

up the icons and all of this text and making sure that they all flow properly not only here but also

all of the icons together as the page resize is underneath the services we come down to one of my favorite

is designs of the Web site.

Honestly is this revolution section.

So here I used my arc logo in a double repeating pattern to really create what I think is a interesting

and captivating background image while using the lower opacity to kind of not make it as jarring or

in your face as it might otherwise be.

So I think that does a good job of capturing your attention without overpowering it and then making

you interested in the words that are on top of it.

Here we're going to learn about putting that image in the background and making sure that that handles

correctly on different device sizes as well as creating that floating card book and aligning the content

within that further down.

We have the info section

and this is where I have the about us and contact us pages and I squeezed those together because they

seem obviously related and I just think what good in that inline display rather than having them each

be their own section again here will implement a background image and then we'll really be focusing

on the alignment of these two texts as the grid flows here.

But the grid makes that really easy nearly finished going through the home page and that brings us down

to my call to action which you'll find on almost all of the pages.

This is where I again remind the user that I have the free estimate available as well as providing this

background picture of the beach which I really like and this is from on Splash which I really just think

creates a cool and kind of intriguing tone well like hmm what's out there what's over that horizon.

What new technologies does the 21st century have to offer me or at least that's how I see it.

Last but not least is the footer down here at the bottom and so this has a couple of interesting elements

to it.

First being the black slash over here so putting that on there will be one of the first challenges and

then we have these social media icons which will get aligned and make sure all the links are working

there as well.

Opening up in the apps if they're installed on a phone and then in the middle we have the links to all

the pages on the site so that people can pretty quickly and easily get an overview of all of the information

and then navigate wherever they need to go.

This obviously acts as the backup and secondary more specific navigation as opposed to the navigation

in the header so that is the landing page.

That is the first page that we're going to go out and build and you really are going to learn a ton

just from this and you'll really see how to layout all these items on the screen and make sure they

all properly interact and flow with one another and are all perfectly responsive to any screen size

and orientation which is really going to be an exciting thing to show off before we start getting into

the rest of the site.