Michael T Ganschow Green: alrighty then Hello everybody how's it going okay people filtering and still excellent so welcome back to another round of.
Michael T Ganschow Green: This madness, this is round two of gic 175 a very information dense lecture today we're going to be learning all sorts of.
Michael T Ganschow Green: Where did the web and where did the Internet come from we talking a bit about page layout about the chrome graphic design creative process and how that differs with web design.
Michael T Ganschow Green: And I get to play around with a couple of things today as well, so should be a nice dense day of information read a little bit of an AV cart day in my.
Michael T Ganschow Green: In the physical version of this class i've got a couple of YouTube videos that I play which are which summarize these topics very nicely I could go on and on and on and and basically they teach you.
Michael T Ganschow Green: Our.
Michael T Ganschow Green: One on one class in like six minutes and our layout and typography class in like five minutes so it's pretty cool give to them a nice.
Michael T Ganschow Green: Little sampler platter of those and then we'll do a little bit deep dive here and there, throughout the Semester on how those.
Michael T Ganschow Green: interact with the Web so kind of get you, those of you who are coming at this from the CIT side, rather than from the design side and nice little primer so you can talk with us designers about what's going on.
Michael T Ganschow Green: alrighty then so just a little housekeeping things before I dive in and start going a little mad here, so let me.
screen.
Second alright cool so.
Michael T Ganschow Green: Where did you go share there you go okay so share screen yes.
Michael T Ganschow Green: Share okay jokes so.
Michael T Ganschow Green: You may notice, those of you who check the class website pretty regularly that the class recordings now is sporting a a brand new pre recorded class look at this, so we have a zoom link to the class that takes you to the the zoom player, where you can hit play and oh look at that.
Michael T Ganschow Green: we're watching a class in a class it's class section, we also have a downloadable version of it that's just a straight MP4 file that.
Michael T Ganschow Green: zoom drips we have the voice transcript which is watching the whatever you're wanting the voice transcripts try and make sense of Michael ghanshyam Green is always fun.
Michael T Ganschow Green: I think let's see what it a call me this time called me Michael Ghana sham group say yes i'm Mike again ashamed group your web instructor.
Michael T Ganschow Green: And then we have a transcript of the chat as well as you can follow the links and things that I grabbed so that's all set so that'll give you kind of the idea of the format of each of the future recordings when they are.
Michael T Ganschow Green: When they put up will be another link like this up there, so that you guys can can go over them and pull whatever knowledge, you wish to glean from them.
Michael T Ganschow Green: Okay, so before I dive into.
Michael T Ganschow Green: Actually, one more bit of.
Michael T Ganschow Green: One more bit of housecleaning today, so I got a couple of questions on the forum, just a quick reminder that you have to email me your forum username.
Michael T Ganschow Green: so that I can activate it otherwise, how do I know you're not a Ukrainian spammer bent on desecrating my board with terrible terrible.
Michael T Ganschow Green: Terrible pornography posts, so please send me your username and I will activate you, otherwise the the forum will not let you post until I do that so don't forget to do that to get your username or activated.
Michael T Ganschow Green: okie doke so that's it pretty much for the.
Michael T Ganschow Green: house for the House mean a quick reminder for those who are not here on Tuesday I or or who don't remember from Tuesday I assigned project one so feel free to go download the assignment sheet and hit me up if you have any questions.
Michael T Ganschow Green: Alright, so before I get started does anybody have any questions chat open here.
Michael T Ganschow Green: alrighty then, so I believe that is my cue to begin dropping all kinds of knowledge okey dokey so.
Michael T Ganschow Green: Today is pretty dense day informationally we're going to go over some history, the Internet we're going to go over.
Michael T Ganschow Green: The web design creative process we're going to go over page layout a couple other things feel free, as always, to grab me if you have questions.
Michael T Ganschow Green: So i'm going to momentarily stop share second reconfigure my screen sharing to show movies, because i'm pushing the V cart out in front of the classroom here and we are turning on a nice little movie that talks about the history of the Internet.
Michael T Ganschow Green: And and and then i'll jump in afterward with some history of the world wide web, so this is a little bit of where the Internet came from, and the craziness that the.
Michael T Ganschow Green: That actually got it started history, the Internet is weird you guys alright so hang on one second we're going to stop sharing reconfigured to share.
Michael T Ganschow Green: So that it will actually pull audio from my computer there we go chair sound optimized for video clips share then i'm going to go over to.
Michael T Ganschow Green: Thank you, thank you, you go go away and you alright so.
Michael T Ganschow Green: let's kick off where did the Internet come from how did it get started.
Michael T Ganschow Green: alrighty then well.
Michael T Ganschow Green: here's how it got started.
There we go.
Michael T Ganschow Green: The Internet, in the year 2009 Yes, this is a little essential oil supplement cools over the Internet and discuss topics we take an interest in.
Michael T Ganschow Green: Even our banking is going virtual, but what we take for granted today was only a vague idea 50 years ago in order to understand how we got this far.
Michael T Ganschow Green: let's go back to 1957 when everything began before 1957 computers only worked on one task at a time, this is called batch processing, of course, this was quite effective.
With computers getting bigger and bigger they had to be stored in special cool drums but then the developers couldn't work directly on the computers anymore specialists had to be called in to connect them.
Programming at that time and a lot of manual work and the indirect connection to the computers led to a lot of bugs wasting time and frame the developers nerves.
They in 1957 marked a big change a remote connection had to be installed, so that the developers could work directly on the computers.
At the same time, the idea of time sharing came up this is the first concept in computer technology to share the processing Power of One computer with multiple users.
On October, the fourth in 1957 and during the Cold War, the first unmanned satellite Sputnik one was sent into orbit by the Soviet Union.
The fear of a missile gap emerged.
In order to secure america's leading technology, the US founded the Defense advanced research project agency in February 1958.
At that time, knowledge, was only transferred by people.
The DARPA plan, the large scale computer network in order to accelerate knowledge transfer and avoid the doubling up of already existing research.
This network would become the arpanet furthermore three other concepts were to be developed, which are fundamental for the history of the Internet, the concept of a military network by the Rand corporation in America.
The commercial network of the national physical liberty tree in England and the scientific network said cloud is in France, the scientific military and commercial approaches of these concepts are the foundations for our modern Internet.
let's begin with the arpanet the most familiar of these networks, its development began in 1966.
Universities with generally quite cautious about sharing their computers, therefore, small computers will put in front of the mainframe.
This computer the interface message processor took over control of the network activities, while the mainframe was only in charge of the initialization of programs and data files.
At the same time, the Info also served as interface for the mainframe since only the EMS we're interconnected in the network, this was also called m sub net.
For the first connections between the computers, the network working group developed the network control protocol.
Later on the ncp was replaced by the more efficient transmission control protocol, the specific feature of the tcp is the verification of the file transfer let's take a short detour to England.
Since the npl network was designed on a commercial basis, a lot of users and file transfer were expected in order to avoid congestion of the lines, the sent files were divided into smaller packets, which were put together again at the receiver packet switching was born.
In 1962 American theory craft discovered middle and long range missiles in Cuba, which were able to reach the United States.
This stoked fear of an atomic conflict.
At that time, information systems had a centralized network architecture.
To avoid to break down during an attack a decentralized network architecture had to be developed which, in case of loss of a node would still be operative communication still used to work through radio waves that would have caused problems in case of an atomic attack.
The ionosphere it would be affected and the long way radio waves wouldn't work anymore, therefore, they had to use direct waves, which, however, don't have a long range.
A better solution was the model of a distributed network vast long distances could be covered with a minimum of interference.
another milestone followed with the development of the French networks, the cloud is since the cloud is had a far smaller budget than arpanet and that's also fewer nodes the focus was laid on the communication with other networks.
In this way, the term Internet was born.
Moreover, so cloud is concept went further than operas and the mpl during communication between sender and receiver the computers were not to intervene anymore.
But simply serve as a transfer note so cloud is protocol went through all machines, using a physical layer that was implemented into the hardware.
Providing a direct connection with the receiver an end to end structure inspired by the so cloud is network and driven by the incompatibilities between the networks that connection gained in importance everywhere.
The phone companies, develop the X Point two five Protocol, which enabled communication through their servers in exchange for a monthly basic charge of course.
darpa's transmission control protocol was to connect the computers through gateways.
And the International Organization for standardization design the osi reference model.
The innovation of osi was the attempt to standardize the network from its ends and the channels division into separate layers.
Finally, the tcp assimilated the preferences of the osi reference model and gateway to the tcp IP protocol a standard which guaranteed compatibility between networks and finally merge them creating the Internet.
by February, the 28th 1990 the arpanet hardware was removed.
But the Internet was up and running.
Michael T Ganschow Green: That stop share here so that is kind of a basic history of where the Internet came from it was basically born out of the cold war is way for military bases to securely communicate with one another in case, one of them got nuked.
Michael T Ganschow Green: But the researchers who were working on it saw the opportunities that it could be used for for communicating between academic institutions as well, in fact, the very earliest like really public debut of the Internet.
Michael T Ganschow Green: Was oh God, I believe it was in 1969 when the university California Los Angeles UCLA and Stanford connected up and open them selves up for the public, they even had a a.
Michael T Ganschow Green: You know where you could publicly send messages on them as a demonstration, so the Internet is actually quite a bit older than a lot of people think to two things that happened to the Internet, since that video was made one.
Michael T Ganschow Green: right as that video was being made, we have the beginning proliferation of smartphones we'd have blackberries before that thing for that video is made in in in the mid 2000s, but they were really mostly restricted to.
Michael T Ganschow Green: A lot of text based activities, you know emails and things like that they could browse the World Wide Web but, but it was not really.
Michael T Ganschow Green: not really.
Michael T Ganschow Green: A great experience will say it was kind of a supplementary experience you get on your computer if you really wanted to use the Web or use the Internet, the phone was mostly the send email.
Michael T Ganschow Green: Well, in 2007 two years before that video was made of course apple debut the iPhone which set up the modern smartphone form factor in a basically a rectangular screen.
Michael T Ganschow Green: That would connect itself to the Internet and function as largely as a keyboard less laptop in your pocket and that kind of democratization of the Internet, where you didn't have to have a computer you didn't have to pay necessarily thousands of dollars to access.
Michael T Ganschow Green: What the to access the the the the worldwide web really took off and blew up to the point now depending on where you are and where you're collecting traffic from.
Michael T Ganschow Green: Between 55 and 60% of all Internet traffic total Internet not just worldwide web is now mobile based based on phones or they're bigger cousins tablets things like ipads and things like that so.
Michael T Ganschow Green: that's The first one is being, you have the sudden explosion in users over the Internet as as a proper computer like Internet experience becomes mobile basically basically lands in your packet and.
Michael T Ganschow Green: Then toward the end of that as we're getting into now, we now have the Internet of Things so microprocessors and computers are getting so small that you can pretty much stick the Internet in anything you want, and so you're getting Internet connected devices to.
Michael T Ganschow Green: Basically, to essentially add convenience and also to collect data so that we can be more efficiently advertise to.
Michael T Ganschow Green: And you're seeing the kind of mobile Internet capabilities that will want even a few years ago, just a few years ago, the the the domain of tablets and phones are now.
Michael T Ganschow Green: Becoming your refrigerator now it's a web browser on the front of it, it can also look at your food and tell you when you're out of something and remind you to get it by sending a text to your smartphone because that's totally not horrifying.
Michael T Ganschow Green: You know your washing machine and dryer are now connected to each other, via the Internet, as well as connected to your phone.
Michael T Ganschow Green: And connected to some master server somewhere telling someone about how you do your laundry and they're telling you when your laundry is done when you are.
Michael T Ganschow Green: How long did try something you can remote control them, you can set all kinds of things.
Michael T Ganschow Green: So you're getting this convenience of having everything mashed into the Internet, but you're also getting the fact that.
Michael T Ganschow Green: Anything that's connected to the Internet is a two way street somebody can walk you through it so as the Internet of Things balloons out things are getting very interesting your your light bulbs are online now.
Michael T Ganschow Green: And if you lose Internet connectivity to your House well there goes the power oh I speaking of power if you've seen flickering light on my.
Michael T Ganschow Green: display here recently a power as a little touching go here in my neighborhood so if my screen should suddenly go black and the call ends our clients is done and we'll pick up when when when.
Michael T Ganschow Green: When we meet again on Tuesday, because that means the power has been cut at my house so.
Michael T Ganschow Green: Anyway, um Internet of Things, so now, the Internet is becoming in more and it's it's becoming less than last.
Michael T Ganschow Green: This kind of a theoretic electronic domain, that you have access to computers it's becoming more and more physical unit is becoming much more tangible and real because it's connected now to everything you know.
Michael T Ganschow Green: A lot of modern cars are on the Internet there's I mean their Internet connection weird stuff like jackets and things like that, I mean there's just you know.
Michael T Ganschow Green: The Internet of Things is is is is a spectacular new frontier of technology.
Michael T Ganschow Green: And also it breaks a lot in some really weird ways that pretty frequently like a lot of Internet of Things devices will just not let you use them if they're not connected to the Internet.
Michael T Ganschow Green: A lot of smart refrigerators will lock the door closed that they're not connected to the Internet.
Michael T Ganschow Green: A lot of like smart animal feeders will not dispense food if they're not connected to the Internet, etc, etc, so the Internet is really becoming a much more tangible part of our lives than it was even 10 years ago when that video was made it's becoming a.
Michael T Ganschow Green: Yes, yes, well, not just products that come with Apps that's one bit of it, where where you connect the product online and then you can control it via an APP on your phone that's one bit of it.
Michael T Ganschow Green: The other bit of it is is products that are connected online and there are there are smart products that.
Michael T Ganschow Green: are not necessarily have control, but are connected, but are hooked to the Internet, and those are technically Internet of Things, as well, most Internet of Things devices indeed do have an APP.
Michael T Ganschow Green: attached to them kiana so it's So yes, you're you're you're you're very definitely thinking in the right direction, so things like.
Michael T Ganschow Green: Like a Philips hue light bulbs if you've got Philips hue light bulbs you basically have a base station which is just like your.
Michael T Ganschow Green: Your Internet router that basically connects all of the light bulbs in your House to a network and then you pop up in an APP and you can control the lighting in your House from your phone yes.
Michael T Ganschow Green: So Internet of Things means not it means APP control devices, but it also means it's also more blanket term to for all devices that are connected on the Internet.
Michael T Ganschow Green: So it's very interesting where this is where this is all going so the Internet basically started out as a.
Michael T Ganschow Green: As a distributed way for military bases to communicate and now your sneakers are texting you that you haven't walked enough in.
Michael T Ganschow Green: So it's you know my life comes at fast.
Michael T Ganschow Green: So that's some history of the Internet and kind of where it all where it all came from so.
Michael T Ganschow Green: With that going, let me cue up another a video and how all this works and then i'll add in a little bit of info On top of this one as well as.
Michael T Ganschow Green: back this up.
Take the time index out of it.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Here is you ever wondered how the Internet works here's how it works, and then I will talk a little bit about.
Michael T Ganschow Green: A little we're gonna come back a little bit to history and add a little bit to how it works as once at once we're done with this video so let's go share screen.
Michael T Ganschow Green: Share sound optimized for video clip yes, yes let's do that and let's listen on the Nice big thing here so here's how the Internet works, and then we will talk about a couple of another little piece of in just a second.
So, how does the Internet work, most of us know how to use the Internet without actually understanding how it works sort of like electricity in your home you use it every day, but may not understand the mechanics behind it.
And if the electric grid is typical to understand, then the Internet must be impossible right wrong in the next few minutes i'll put you in the top 10% of people who understand how the Internet actually works for security catalyst calm i'm Erin titus.
Michael T Ganschow Green: Whenever most people think of the Internet, this is what comes to mind the Internet is not a bubble cloud, even in the new age of cloud computing the whole fuzzy cloud picture was created by people more concerned about job security than education.
This is the Internet, the Internet is a wire actually buried in the ground, it might be fiber optics copper or occasionally beam to satellites or through cell phone networks, but the Internet is simply a wire.
The Internet is useful, because two computers connected directly to this wire can communicate a server is a special computer connected directly to the Internet and web pages or files on that servers hard drive.
Michael T Ganschow Green: Every server has a unique Internet Protocol address or IP address just like a postal address IP addresses help computers find each other.
Michael T Ganschow Green: But since seven to 14 dot 205 dot 100 doesn't exactly roll off the Tongue, we also give them names like google.com facebook.com or security catalyst COM.
Michael T Ganschow Green: So this is how it works your computer at home is not a server because it's not connected directly to the Internet.
Michael T Ganschow Green: Computers you and I use everyday are called clients because they're connected indirectly to the Internet, through an Internet service provider.
Michael T Ganschow Green: Here, will pretend that this is my home laptop and i'm using DSL now let's pretend that I want to visit aol.com which is coincidentally, both a server and an ISP.
Michael T Ganschow Green: I hop onto my laptop with DSL go through my ISP onto the Internet and look@aol.com my computer connects with aol.com and I can look at this web pages now let's say that I want to send an email to aunt Ruth and Ruth has AOL dial up from home and i've got a gmail account.
I log on to gmail.com and compose a message to Andrews email address and Ruth at AOL COM once I click send gmail.com since the email to aol.com the next day and truth dials into AOL servers and retrieves the email.
Whenever an email picture or webpage travels across the Internet computers break the information into smaller pieces called packets when information reaches its destination, the packets are reassembled in their original order to make a picture email web page or tweet.
Okay, so imagine you're at work, sitting next to your boss and you're both surfing online your boss, is doing market research and you're updating your Facebook profile.
you're both sending packets back and forth over the Internet, but what's to keep your packets from accidentally ending up on your bosses screen that could be embarrassing.
The solution to that problem is IP addresses and routers everything connected directly or indirectly to the Internet has an IP address everything that includes your computer servers cell phones and all of the equipment in between.
anywhere two or more parts of the Internet intersect there's a piece of equipment called a router.
routers director packets around the Internet helping each packet get one step closer to its destination.
Every time you visit a website upwards of 10 to 15 routers may help your packets find their way to end from your computer.
Imagine each packet as a piece of candy wrapped in several layers the first layer is your computer's IP address.
Your computer sends the packet to the first router which adds its own IP address each time the packet reaches a new router another layer is added until it reaches the server.
Then, when the server sends back information he creates packets, with an identical wrapping as a packet makes its way over the Internet back to your computer each router unwrapped a layer to discover where to send the packet next until it reaches your computer and not your bosses.
And that's how the Internet works in five minutes or less, and you now easily in the top 10% of people who understand the basics of the Internet, if you found this video helpful check out security catalyst.
Michael T Ganschow Green: So that is roughly technically how the Internet works.
Michael T Ganschow Green: The big change since that video was made is the Internet is becoming over the air.
Michael T Ganschow Green: The it's been over the air and local network via wi fi for a long time so wi fi is basically taking the Internet information that was once.
Michael T Ganschow Green: client based Internet information that was once the domain of basically like a computer plugged into your modem and going it's it's taken that and the client now is no longer each.
Michael T Ganschow Green: Individual computer what kind of technically is but the the main client is your wi fi router that's that's broadcasting data out and taking data in in a basically in a.
Michael T Ganschow Green: invisible over the airwaves uses a specific band of radio waves to do that there's also cellular signals, which is another radio wave band that's how our phones get cellular Internet and we're now building out what should be a rather huge.
Michael T Ganschow Green: Technological explosion in the Internet here with five g, because in theory as five g has expanded and build out, it will give.
Michael T Ganschow Green: Broadband speeds basically this speeds that you used to have to pay a ton and have a fiber optic connection run to your House for should be coming through your cell phone whenever it's on a 5g network so.
Michael T Ganschow Green: That will that's going to revolutionize the Internet because basically you're going to have.
Michael T Ganschow Green: you're going to be able to.
Michael T Ganschow Green: stream for K or 8k video over.
Michael T Ganschow Green: Basically over the over the air.
Michael T Ganschow Green: Via cellular networks now with with little or no stuttering or downtime or anything like that or buffering or anything.
Michael T Ganschow Green: That should be as it's getting rolled out, it should really revolutionize the Internet, so it steadily moving away from the wires it's still on the client server structure that's how the that's how it works, but, but instead of wired connection it's.
Michael T Ganschow Green: Basically you're broadcasting to a network.
Michael T Ganschow Green: And then the network is either broadcasting wirelessly we're broadcasting wired into the Internet proper like your home network.
Michael T Ganschow Green: That may be wireless but the router that is actually generating that radio signal that you're connecting that's connected to the Internet via wire.
Michael T Ganschow Green: The cell phone companies are also connected to the Internet there you're there the Internet service provider on on that in as you're getting as you're getting Internet through your phone.
Michael T Ganschow Green: So let me talk a little bit let's go back a little bit in the history here and add a little something that'll that'll add some.
Michael T Ganschow Green: A little bit of flavor to this and that is the worldwide web OK, so the World Wide Web is pretty frequently you'll hear it used.
Michael T Ganschow Green: interchangeably with the Internet, but they're actually not the same thing, the World Wide Web is a set of protocols that runs on the Internet Okay, so in the late 80s, a guy named TIM burners Lee was working at the European particle accelerator CERN wanted to be able to.
Michael T Ganschow Green: easily share research papers across this new burgeoning Internet.
Michael T Ganschow Green: And you really couldn't, it was because it was very kind of text based and for those of you have used DAS, it was very dossi you're typing in text commands and going through and all of that.
Michael T Ganschow Green: You could kinda sorta share files, but it wasn't really.
Michael T Ganschow Green: The final set to be set up in some strange ways and they weren't terribly reliable so TIM burners we sat down and he developed a protocol for.
Michael T Ganschow Green: For the exchanging of research papers and documents essentially a.
Michael T Ganschow Green: unified way across all networks to be able to share documentation and there's a model it use the tcp IP protocol and then built off of that so because it used that tcp IP protocols, the video showed you.
Michael T Ganschow Green: pretty much any network of computers in the world that was hooked onto the Internet could read it, so these protocols were.
Michael T Ganschow Green: Basically, a simple set of programming languages that would allow well a programming language which is later built out into a couple of others, that would allow you to essentially write your paper research paper.
Michael T Ganschow Green: or your data into this programming language and then share it with other people.
Michael T Ganschow Green: In this program and basically these could be sent as regular files over the Internet, and then people at the other end would need a specific piece of software called a browser to read it and.
Michael T Ganschow Green: So that language was html of which we are using the fifth version now html five the base language of the World Wide Web so he invented html in the late 80s basically to share research papers and look at what we have done with it so i'm very quickly, as this thing, as this.
Michael T Ganschow Green: As this World Wide Web and web browser combo populated itself through the Internet people very quickly saw the commercial applications for this so.
Michael T Ganschow Green: In 1993 the first first couple of.
Michael T Ganschow Green: Commercial public web browsers came out.
Michael T Ganschow Green: AOL and Netscape navigator.
Michael T Ganschow Green: and basically.
Michael T Ganschow Green: revolutionized how people use their computers, it really made the Internet, not just a.
Michael T Ganschow Green: kind of a.
Michael T Ganschow Green: Government.
Michael T Ganschow Green: University kind of you know ivory tower thing, but really kind of brought the Internet to the people, via this really easy to use medium you download this thing.
Michael T Ganschow Green: On your computer you open this thing up and he basically punch in a a web address, which is his modification to the tcp IP protocol.
Michael T Ganschow Green: Before that you had to punch in the exact device IP which you saw was just a chain, a number of separated by periods, so he he he basically set up URLs essentially a blog COM Google COM GR C 175 dot com etc, etc, etc, and in that bay and basically.
Michael T Ganschow Green: That kickstarter the modern world wide web basically taking the World Wide Web and enabling people who were not terribly tech savvy.
Michael T Ganschow Green: To use it anybody could sign up for an AOL account anybody could set up Netscape you know anybody could you know could could could use it with a little bit of training, and so it basically exploded, and it ran wild.
Michael T Ganschow Green: And this programming language of html was modified.
Michael T Ganschow Green: Again and again by various developers to add additional capabilities to in fact it got so modified that.
Michael T Ganschow Green: That a whole bunch of stakeholders in the modern world wide web had to get together and.
Michael T Ganschow Green: figure out what exactly html was, and so they formed this group called the World Wide Web developers consortium and the w three C.
Michael T Ganschow Green: And the w three C is to this day, the keepers of all of the different programming languages that we use on the web, so they basically get together and anytime there's going to be something new added html.
Michael T Ganschow Green: They they get together and they publish it and promulgated out to the developers of the Web browsers to add support in.
Michael T Ganschow Green: Any any of the new programming languages that are used on the web or either made by them or cleared by them, so in the in the right around 2000 right around the turn of the 21st century, the limitations of html really began to.
Michael T Ganschow Green: hamstring the worldwide web yet html is is not the most conducted good design and layout you basically have left Center right.
Michael T Ganschow Green: And you have like five fonts and you have the ability to insert images either pictures or graphs or whatever, and the ability to make tables, which are basically spreadsheets so.
Michael T Ganschow Green: What we were doing in order to lay out websites for them in a way that wasn't just like a Microsoft word document.
Michael T Ganschow Green: Was we were using these tables these spreadsheets and putting little slices of graphics in the tables to make these web page layouts you'll still occasionally to this day encountering ancient 90s vintage table website.
Michael T Ganschow Green: I am not going to show you this technique on how to build the tables, because a it's not used anymore and be it'll drive you mad.
Michael T Ganschow Green: A good chunk of why I am the way I am was because i've built websites with tables I built websites with tables and so, and so it was very, very kind of tough to make attractive layouts at some.
Michael T Ganschow Green: picture doing for those of you had any kind of design and try pornography picture doing a design project in Microsoft excel picture that so that's basically what building websites was.
Michael T Ganschow Green: Up until really until the late 90s early 2000 yes, yes, yes, you see that face right there that face right there that that one, yes, yes, that little emoji that is absolutely what my face looks like every time I had to build a bloody tables website, yes, that is, that is exactly so.
Michael T Ganschow Green: And it was that way clear to the early 2000s when the w three C created cascading style sheets or CSS, which is the second big programming language that runs the web and that programming language.
Michael T Ganschow Green: Is in trying to build around taking the base ideas of html and adding layout controls to it.
Michael T Ganschow Green: So without added in that base that built out the modern the Internet with that, because we can now do we can now largely using cascading style sheets and the newer iteration version of cascading style sheets run version three now CSS three.
Michael T Ganschow Green: That that would enable us to.
Michael T Ganschow Green: To bring a lot of the print layout techniques and type biography and things like that to the web, so the modern web land was really born with CSS.
Michael T Ganschow Green: You can also use CSS to to do a lot of basic behaviors roll over buttons drop down menus things like that you could build with cascading style sheets.
Michael T Ganschow Green: And, and so that into that really evolved, that the the second piece of language right around that same time a third language, which was was was being built, although not by the w three see the letter your big later.
Michael T Ganschow Green: They later sort of incorporated it, and that is javascript and its various flavors javascript was a modified version of oracle's Java and it's used primarily on the web, to do advanced behaviors will be playing around with it a little bit in the Semester, but things like.
Michael T Ganschow Green: super dancy animations or like accordions where you click on something and it POPs open and then POPs closed when you click on another one.
Michael T Ganschow Green: Things that swell or shrink or swinging from the side as you scroll stuff like that that's controlled by javascript or it's adorable simplified offspring jquery which is really, really nice now.
Michael T Ganschow Green: You guys should consider yourselves very fortunate that you're getting into web design now, not just because you won't have to learn how to build a website with with excel but also the versions of html and CSS that we have now, along with jquery javascript little little brother.
Michael T Ganschow Green: Make the Internet really easy to develop for so the big part of the html5 spec was the w three C went through and cleaned out a lot of the cruft a lot of the the the hangover extras that were happening from.
Michael T Ganschow Green: From the the.
Michael T Ganschow Green: From from for did we were in we were at the time on.
Michael T Ganschow Green: Like a sixth version of html we have branched off into another version of html called X html.
Michael T Ganschow Green: And we're on version for that, and all of them so they cleared the deck of all that, and they made a very simplified version of html.
Michael T Ganschow Green: That they prioritized a programming term you will hear often on in this class and if you go on and take other development classes you'll be hearing a lot called semantic and semantic is just a fancy science word for it means what it says it says what it means so.
Michael T Ganschow Green: The top part of your website is contained in a set of tags called header your navigation is contained in a set of tags called Nam.
Michael T Ganschow Green: The bottom content is contained in syntax called footer and so basically a lot of these tags now provide you their names have been simplified and shortened.
Michael T Ganschow Green: They provide you with information on both what they're doing and where they should be located in the document very handy.
Michael T Ganschow Green: On CSS was cleaned up in a similar way and had a lot of stuff added to it on CSS three so now, for example with CSS three you can externally feed fontan so you are no longer dependent on.
Michael T Ganschow Green: Trying to use a very simplified font palette that you can guarantee that everybody has.
Michael T Ganschow Green: So they've done a lot with it and you guys are getting in at a very good time.
Michael T Ganschow Green: A because you can do you're going to design websites that look good on the screen in the back of a dryer is the laundry is tumbling in front of it because i'm sure smart dryers are going to screen somewhere, so you know why not there.
Michael T Ganschow Green: You guys are going to be making websites that are meant to be displayed on people's refrigerators and and these new programming languages really take advantage of that and really let you kind of give you a lot of freedom.
Michael T Ganschow Green: So you guys ready to pinpoint questions on the Internet history stuff on the World Wide Web and how it all works and all of that.
Michael T Ganschow Green: Because I could go on and on and on and that could get terrifying.
Michael T Ganschow Green: Alright, show that is the Internet history, so I think I need to process all of it, yes, yes, the Internet is.
Michael T Ganschow Green: it's basically a it's basically a.
Michael T Ganschow Green: A joke created by the Defense department to beat the Soviets that blew up into a way to buy shoes and now to judge you about your food consumption habits if you're smart refrigerator has anything to say about it.
Michael T Ganschow Green: So that's that's pretty much that in a nutshell, also you came in at a good time because the programming just been simple.
Michael T Ganschow Green: Okay, so if any questions should arise as well again feel free to jump in and ask.
Michael T Ganschow Green: Another way kiana you have a very intelligent iPhone it says your phone is asking these questions so that's good maybe the phone will take notes for you.
Michael T Ganschow Green: it's good alright so um that was technically supposed to be as part of the first class, but I swapped it with how to use the forum, instead, to make sure that that you guys all got that while you were getting all registered, and also to bring in project one.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Today is.
Michael T Ganschow Green: The web design creative process okay.
Michael T Ganschow Green: Now i've.
Michael T Ganschow Green: got.
Michael T Ganschow Green: yeah it's the Web design creative process is very interesting, it is very similar to your.
Michael T Ganschow Green: to your usual design creative process that you're used to.
Michael T Ganschow Green: But it has a couple of extra complexities.
Michael T Ganschow Green: So i'm going to talk a little bit about this.
Michael T Ganschow Green: And kind of the similarities and differences, as well as go over in general, the creative process for those of you that are coming in from the CIT side so.
Michael T Ganschow Green: The design creative process goes a little something like this and will be deviating periodically for where the Web comes into attention.
Michael T Ganschow Green: But the Web design creative process.
Michael T Ganschow Green: At least at the professional level anyway.
Michael T Ganschow Green: starts with a client and basically moved with your customer or whoever you're building this website.
Michael T Ganschow Green: And you essentially conduct an interview.
Michael T Ganschow Green: about what they want to do with their website okay what they want their.
Michael T Ganschow Green: What they want the website to accomplish for them when they want it to do what they want to do with it doesn't want to sell stuff with it to the one that have it be.
Michael T Ganschow Green: A brochure for their company do they want it to them, are they a nonprofit and they want to solicit donations, is this an informational website, you know it's just a topic that the person is passionate about and they want to have a website that that talks about their information.
Michael T Ganschow Green: You know so so that you can get a basic idea of what they want to do you also want to ask them, you know if they have any.
Michael T Ganschow Green: Current existing branding if they already have a website and they want to improve it, if they have any sample design stuff that they've already used, you know business cards brochures.
Michael T Ganschow Green: You know the sign on the front of their office whatever any existing branding do they want to change that with this website, or do they want to keep going with that.
Michael T Ganschow Green: ask him about their customers, you know who's buying from them, or who do they see buying from them, who do they want buying from them, who do they think should buy from them.
Michael T Ganschow Green: or who they are, who they want to solicit donations from who do they want to inform.
Michael T Ganschow Green: them that will start giving you idea of a concept that you've probably heard in your design classes and you will hear again, both in here and in other classes have a target audience.
Michael T Ganschow Green: So once you've interviewed the client basically sat down hey, what do you want cool how's your business work how's the what's your business model.
Michael T Ganschow Green: Who do you sell to hey you got any favorite colors.
Michael T Ganschow Green: hey you got any existing branding no cool, what do you want to do with it.
Michael T Ganschow Green: Once you've conducted an interview with a customer.
Michael T Ganschow Green: You can then begin.
Michael T Ganschow Green: A research phase, so what you do, first of all, is you.
Michael T Ganschow Green: After the interview you'll have kind of an idea of the size of the project and everything like that, and you can start thinking about setting a price now.
Michael T Ganschow Green: There is a great book, this is the biggest challenge, by the way, as freelancers, and if you're going to work for studio the studio will probably have a pricing model, but if you're starting as a freelancer how to price your work is one of the biggest most difficult questions that.
Michael T Ganschow Green: That comes up.
See.
Michael T Ganschow Green: Oh yeah one minute thing I know you're yelling at me cuz i'm not in the.
Michael T Ganschow Green: graphics I.
Michael T Ganschow Green: See artists.
Guild.
Michael T Ganschow Green: Alright, so this is let's go.
Michael T Ganschow Green: Here you go, this is the graphic artists Guild handbook the pricing and ethical guidelines, I can check out here we go graphic and.
Michael T Ganschow Green: The graphic artists handbook of pricing and ethical guidelines this book i'm throwing a link in the chat here for everybody, this book is basically.
Michael T Ganschow Green: The the Bible, and how to be a graphic designer and to a lesser extent, a web designer talks all about how to run your business.
Michael T Ganschow Green: How to set up contracts it's got a whole bunch of sample contracts which back in my freelancer days I just copied one of those and I added in a forest in the GR clause.
Michael T Ganschow Green: it's got pricing like what you should bill for different times they update the book pretty regularly, I believe the link i've given you the latest one.
Michael T Ganschow Green: And they're available via Amazon as well, if you want to and those nice Amazon points we got prime or whatever, and I have i've.
Michael T Ganschow Green: Every time they released a new one to buy a new copy just to see what's new, even though i've been working in the studio now for 12 years or so, but um but back when I was a freelancer that thing was just that was that was perfect info so i'm to return to where we were.
Michael T Ganschow Green: After I after you meet with your client you figure out the scope of the project and you basically give them an estimate okay here's how much I think it'll cost.
Michael T Ganschow Green: And then there's probably a little negotiating back and forth rule of thumb.
Michael T Ganschow Green: For future negotiations if the customers just said yeah sure when you quote him a price.
Michael T Ganschow Green: So you may want to boost your numbers, a little bit for future ones, but call them a price they see yeah that sounds good cool they negotiate on price and I get started.
Michael T Ganschow Green: And to get started the very first step, you should do for you any other piece of the creative.
Michael T Ganschow Green: The creative process is research everybody moans about research and everybody tries to skip over research in their projects but professionals and students alike, but in my opinion, research is the number one most important.
Michael T Ganschow Green: step in any design process, at least at the commercial level if you're designing for money you don't want to research, what this what this.
Michael T Ganschow Green: Customer this client is all about you're going to want to research, their market you're going to want to research the target audience you're going to want to research everything related to their industry, unfortunately, now that you have.
Michael T Ganschow Green: The good old incredible edible Internet you can jump online, and you can do all kinds of research that would have taken weeks or months in a matter of hours, so you can sit out and research up and come up with your.
Michael T Ganschow Green: Basically, with inspiration for your website now.
Michael T Ganschow Green: A lot of students, asked me but Michael how do I research what am I looking for in my research so.
Michael T Ganschow Green: I created a project requirements on the more advanced projects, I believe, for you guys it starts with project three.
Michael T Ganschow Green: i'm what's called a site needs and goals analysis, which is a little paper that you oh yes i'm going to make you write papers in here a little paper you get to right.
Michael T Ganschow Green: At the beginning of both this and project for and the 275 people right for all three of their projects.
Michael T Ganschow Green: And what this is, I just dropped a link in the chat to the to the handout is it is it.
Michael T Ganschow Green: Is a little research guide here i'll share my screen, so you can see it's a little research guide that asks you a series of questions.
Michael T Ganschow Green: And as part of your project three and project for you're going to answer those questions you can write me a little paper that answer these questions now.
Michael T Ganschow Green: If you're able to answer every question on here you've done at least your basic research, if not a little bit more so it's the great.
Michael T Ganschow Green: i've always thought our program gets a little hand wavy in the research phase and they're just like oh yeah just just just do your research and it's like well, what do you mean do your research okay.
Michael T Ganschow Green: So I provided this guide and I make you do this guide to force you to do the research and to give you.
Michael T Ganschow Green: kind of a little bit of guidelines of what you should be looking for with your research on your websites and and you can modify this guy for.
Michael T Ganschow Green: For more traditional graphic design stuff to print and promotional products and apparel.
Michael T Ganschow Green: it's very, very easy for him to modify if you have free to steal it modify it and use it everywhere, I use it or version of it all the time when I have the time to in the industry so research research research, I cannot.
Michael T Ganschow Green: I cannot.
Michael T Ganschow Green: emphasize that enough, I cannot emphasize that enough so research it's it's it will inform every other aspect of your.
Michael T Ganschow Green: every other aspect of your design and it will smooth out a lot of the rest of your design.
Michael T Ganschow Green: If you research, the customers if combined with the interview, and your research, you have you kind of know what they want and you'll know what they're looking for you won't have to kind of flail around and a lot of the other.
Michael T Ganschow Green: Parts of the the process, because if you have the solid bedrock of research and this interview you did with the customer, you have a pretty good idea where to where to go and where to get started.
Michael T Ganschow Green: So research research research and through project, three and four, you could fill out that you can do right a little paper for me answering some questions.
Michael T Ganschow Green: So Questions so far me with the customer hammer out a price sign a contract.
Michael T Ganschow Green: That deck graphic artists Guild handbook tons of contracts in there, modify them to see fit, then research up a storm that it's a question so far.
Michael T Ganschow Green: All right now, this goes this bit is all pretty much.
Michael T Ganschow Green: very similar for print as well when you're doing print and promotional products and apparel all the steps are pretty much the same deal.
Michael T Ganschow Green: So, so is this fourth step and the fourth step is thumbnails thumbnails is the second most important step, you can do in design thumbnails is another thing that a lot of professionals and.
Michael T Ganschow Green: All students just poo poo thumbnails okay fine whatever you want them, they have they're not gonna have to do this in the mag okay well here's the problem with that.
Michael T Ganschow Green: Is that all of those really cool designs in your head right now right now sitting right here in your for brain okay all of those designs.
Michael T Ganschow Green: And you won't notice they're bad until you get them out on paper now if you haven't done thumbnails and you think you've got one brilliant idea to rule them all what's going to happen is you're gonna put that idea out on a rough or a wireframe and and you're gonna be like.
Michael T Ganschow Green: Oh, this one.
Michael T Ganschow Green: Oh no, no, no, no, no, no, so so mailing is the phase where it's basically like if you are spending more.
Michael T Ganschow Green: than two minutes on any individual thumbnail you're doing some nailing wrong some nailing is quick sketches to get the ideas, out of your head.
Michael T Ganschow Green: So you can basically lay all the cards on the table and see what you got and you can take some other ideas and tweak with them iterate with them, I mean if I have time i'll have dozens or hundreds of thumbnails by of time on a project.
Michael T Ganschow Green: But usually i'm doing I don't know 25 thumbnails throwing ideas down and most projects um if I have even a little time, even more than that, sometimes, because.
Michael T Ganschow Green: that's just getting ideas out just boom boom boom boom boom boom boom, I mean basically how quick, can you sketch a basic layout on a piece of paper looks rectangle I think i'm gonna put my navigation there they're going to put my images there boom done now.
Michael T Ganschow Green: Some web developers and tutorials, you will see recommend doing what's called wire frames, which is an intermediate step between.
Michael T Ganschow Green: thumbnails and rough wireframe let me Sir let's go, why are you not sharing and we go wire frames.
Michael T Ganschow Green: This down so get out of the way the zoom chrome a i'm clicking on the browser yes i'm aware Thank you okay so wire frames are basically like fancy dancy versions of thumbnails where.
Michael T Ganschow Green: we're basically you're using blocks to kind of line out your layouts really quick I don't require while your friends in here.
Michael T Ganschow Green: A lot of studios we use the wire frames actually as the rough stage as a presentation, a rough stage.
Michael T Ganschow Green: I don't like to do that, and most of the studios that i've worked with and clients that i've worked with.
Michael T Ganschow Green: don't like to do that, either because you can't really see what the design is going to look like I like to proceed straight to the rough stage, but some studios like to do wire frames as a way to kind of lay out.
Michael T Ganschow Green: Their designs before they do like this is like this is the the the least wireframe that I would accept in terms of client presentations and I would even then ask them to add color for things like that.
Michael T Ganschow Green: Traditional wire frames like these guys here, where you just blocking out where the content is going to be their customers not gonna be able to see what that's going to look like, so what you so wire framing is sort of a.
Michael T Ganschow Green: In my opinion, is a refinement step between thumbnails and showing refers to the customer, but I would not show wire frames unless that's explicitly how my studio did things so wire frames are basically.
Michael T Ganschow Green: A.
Michael T Ganschow Green: wire frames are basically a um.
Michael T Ganschow Green: be a way to tune up your thumbnails a little bit, but I don't personally use them.
Michael T Ganschow Green: I go to thumbnails and then I pick a couple of good ideas, out of my thumbnails and start building roughs on them.
Michael T Ganschow Green: Because a lot of a lot of the thumbnail things going on in here i'm looking at thumbnails and adding things as i'm seeing them outside of it and i'm.
Michael T Ganschow Green: And a kind of know what this is what these bits are going to look like because i'm thumbnail, and so I can then take those thumbnails and build my roughs out but helps you to wireframe.
Michael T Ganschow Green: please feel free but I don't require wire frames for any of these projects, I do require thumbnails, though, and I will know if you haven't done your research because usually the great design comes from research so questions on thumbnails.
thumbnail early thumbnail often.
Michael T Ganschow Green: Any questions on anything before that history of the Internet.
Michael T Ganschow Green: How do web design, what do web design thumbnails look like so when design thumbnail.
Michael T Ganschow Green: Oh let's see did TMC see enable sketch boards, I only have a touchpad right now, so this should be fun whiteboarding all they did enable the whiteboard cool okay so.
Michael T Ganschow Green: um so we're gonna we're the ones, Michael do trackpad drawing here that should be fun so typically for like a website thumbnail I usually do a sketch a rectangle trust me it doesn't look a lot better than this usually because i'm running a marker and I start thinking about.
Michael T Ganschow Green: What my initial layouts are going to be an icon of Greek them in so like if I know roughly what their logo is going to look like we'll just put their logo here and then we'll sketch out the navigation here.
Michael T Ganschow Green: And maybe there's an image, right here as michaels trackpad drawing please excuse my trackpad drawing skills and then maybe i've got some sub navigation here.
Michael T Ganschow Green: And then maybe i've got a side image, right here notice i'm just blocking in my stuff for my thumbnails and then we got some text right here, and maybe that.
Michael T Ganschow Green: Maybe that text as a big drop cap on it, you know something like that and oh and.
Michael T Ganschow Green: And maybe there's maybe the top bar which the logo clips out of the bottom of is a slightly different color so boom there's a web thumbnail I don't can go on to another thumbnail over here my next one.
Michael T Ganschow Green: And will be like Okay, what if, instead, I do a big version of their logo, maybe here and then maybe run an Arc across like this may be a bar.
Michael T Ganschow Green: coming in here behind the logo to do to do to do, and maybe it comes out here, maybe doesn't stand out but michaels penmanship is not great when is using.
Michael T Ganschow Green: A trackpad and then maybe we got some content here, and maybe one.
Michael T Ganschow Green: Images here.
Michael T Ganschow Green: So again, and.
Michael T Ganschow Green: You guys can even schedule them that rough but notice again how little time I was spending on each one yeah basically just.
Michael T Ganschow Green: Drawing rectangles and i'm like you know what I think this needs I think we're going to reverse the nav we're going to stick to Nam over here on this side.
Michael T Ganschow Green: womb, and then we're going to have the web page shrinking off the Navajo separated out with a dotted line look at those jots.
Michael T Ganschow Green: yeah there we go and we'll have a big blog type header image over here, maybe with a little bit of text in it to get.
Michael T Ganschow Green: Some attention there's our huge letter there and then maybe the rest of the content is here, maybe, maybe a supplementary photo here oops.
Michael T Ganschow Green: As I go a little too far in my sketching we're basically just just drawing rectangles and just flinging your design ideas out like as they occur to you on the fly I didn't plan any of those by the way, that was just me going on the fly so and it's nice to just sketch pad works.
Michael T Ganschow Green: grab a mouse and extent.
Michael T Ganschow Green: So basically they're there if you want to do a little nicer job you can make them look like like these wireframe and you can sit down and like illustrator something to bang that but to me that's too much time I just.
Michael T Ganschow Green: drawings I just.
Michael T Ganschow Green: it's a big guy here you go so see see things like killing me get a good big one here yeah so see see things like this right here like where they're just laying down and they're sketching out like.
Michael T Ganschow Green: Different colors and like maybe some different functionalities and you know they're just you know just whipping things down.
Michael T Ganschow Green: You know, some some draw a little better thumbnails and other CEOs are some nice basic thumbnails and the sketchpad I mean.
Michael T Ganschow Green: I mean if you're spending like I said longer than you know see here some nice thumbnails as well, you can see.
Michael T Ganschow Green: Where they're where they're working with shading and contrast in their in their layout.
Michael T Ganschow Green: You know here's some these are these are a little tighter thumbnails this person likes a thumbnail a little bit.
Michael T Ganschow Green: A little bit better there's a person sketching out like posters and things like that you know there's some there's some layout thumbnails right there again notice the notice the incredible.
Michael T Ganschow Green: Art and penmanship skills involved the idea really with thumbnails is to get as many designs in front of your eyeballs as possible oops guys we didn't screen share it.
Michael T Ganschow Green: Look at that I thought I had the screen share still running hang on a second yeah let me show you real quick let's back up here I just talking in the wind Nice, you know dark screen for everybody that look great on the recording so.
Michael T Ganschow Green: So these so this kind of what i'm talking about here.
Michael T Ganschow Green: So let's kind of what i'm talking about here, you know we're basically they're just they're just drawing.
Michael T Ganschow Green: web interfaces just like with a marker on a piece of paper or even with like a ballpoint pen on a piece of paper we're just jet jet jet jet jet jet gives many ideas out, as you can as you're working on this.
Michael T Ganschow Green: Some of them are nicer that's more of a wireframe I wouldn't consider that a thumbnail.
Michael T Ganschow Green: But some of these are, I mean you know some of these are a little nicer some are mostly just sketching you know where they're playing you can you can see where they're playing with contrast, and where the plane was shade and things like that.
Michael T Ganschow Green: This is a lady working on some posters here's some website layout.
Michael T Ganschow Green: You know these are pretty much with my thumbnails wind up looking like you know where i've got boxes when X is in them to show where images are big type is Greek D in that that squiggly line for type is called creaking you hear that a lot in the page layout classes, the.
Michael T Ganschow Green: And like I said, if you spend if you're spending time if you spend in.
Michael T Ganschow Green: Real time on the things you're not doing it right, look at this there's a tattoo shop website attitudes thumbnails of that.
Michael T Ganschow Green: here's a data visualizations like a like a newspaper type website.
Michael T Ganschow Green: You know here's this is generic title go see this website is for a title that goes here.
Michael T Ganschow Green: and seeing kind of get an idea of what they're looking for, we got a chat oh chat.
Michael T Ganschow Green: The thumbnails and roughs have a due date the thumbnails the thumbnails you turn in with your final work on each project, so I am the project out in your thumbnails you're putting things together those thumbnails.
Michael T Ganschow Green: Get turned in on the land on the on the do the final due date of each project, the preliminary work is the next step that we haven't gotten to yet which is roughs.
Michael T Ganschow Green: So the preliminary work is roughs and and we'll get into that in just a second, but the thumbnails are kind of for you.
Michael T Ganschow Green: I just kind of want to see your creative process, so I have you in archives case since we're not meeting physically either scan them or shoot pictures of them and throw them in a working graphics folder and put it online with your files, the.
Michael T Ganschow Green: The.
Michael T Ganschow Green: The roughs are going to be something more advanced you're going to do those in a graphic software or anything like that.
Michael T Ganschow Green: So yeah, these are all you know basically you're just sketching on a piece of paper some graphics classes will hand you a little piece of paper that has pre built rectangles on it.
Michael T Ganschow Green: I don't I don't feel the need to spoon feed you guys like that I think y'all can draw rectangles on paper and plus everybody complains about the thumbnail sheets that we that we hand out so guess what.
Michael T Ganschow Green: No, no thumbnail sheets you get to draw on whatever piece of paper helps you with whatever pen or pencil or whatever you work best with this is purely a you creative exercise.
Michael T Ganschow Green: cool So hopefully that answered your thumbnail question does anybody else have any questions before we get on to the next step.
Michael T Ganschow Green: cool alright, so the next step is what's called roughs i've talked about roughs last class when you're talking about project one and I talked about them a little before in this class so roughs are taking your best designs out of your thumbnails and taking those and building them into.
Michael T Ganschow Green: Essentially graphic designs of websites so.
Michael T Ganschow Green: layouts of websites.
Michael T Ganschow Green: That you can then present before the customer, so the customer you met with back in the beginning, and he interviewed and you did all your research BA BA BA BA BA you're gonna go back and you're gonna meet with them again.
Michael T Ganschow Green: And what you're going to do is you're going to take.
Michael T Ganschow Green: It typically my projects that require the two best but typically in.
Michael T Ganschow Green: out in the industry, we usually give three to five.
Michael T Ganschow Green: really good roughs that we show our customers and basically what REPS are are you take.
Michael T Ganschow Green: You take your best work out of the thumbnails you take it into the graphic software of your choice indesign illustrator photoshop whatever and you build a.
Michael T Ganschow Green: You build a basically a mock up design of how the website will look in a browser.
Michael T Ganschow Green: Depending on the customer might even show how the website will look on a phone on a tablet and on a computer now for you guys I only ever require phone and computer and.
Michael T Ganschow Green: There are no like the numbers that I gave you guys I basically pulled him out of my backside essentially.
Michael T Ganschow Green: Because there are no definitive numbers for how wide and how tall a computer website should be visa V how narrow and how tall.
Michael T Ganschow Green: A phone website should be visa visa V how square tablets website should be there's no real guideline on that you basically just to.
Michael T Ganschow Green: wider rectangle for computer square or rectangle for tablet vertical rectangle for phone good to go and typically you present these wraps basically how the website works on a look on the phone now necessarily work out how it.
Michael T Ganschow Green: will look I would look on a tablet and how it will look on a computer so that is what you guys are turning in for your preliminary critique.
Michael T Ganschow Green: In a few weeks on project one so that that's that basically just layouts a couple of layouts of your thumbnails a couple of layouts of your best to thumbnails to show me, what are your design to look like in a phone and on a computer, so you build the wraps and you take another customer.
Michael T Ganschow Green: Now, usually what happens is the customer likes a little piece of one a little piece of the other and maybe a little piece of one another one.
Michael T Ganschow Green: And says what do they look like if we mix them together so yeah OK cool so you go back E TT TT TT to the thumbnails on stage.
Michael T Ganschow Green: And you start taking those bits and pieces of those roughs and into another round of thumbnail and taking those kind of laying around mix and matching.
Michael T Ganschow Green: Playing like an old like like those at color forums where you got back to the stickers that you're just mystic all over the Oliver background yeah you're you're one of those you just kind of shuffle around these disease design.
Michael T Ganschow Green: Elements a few different times you pick a few good ones you take them back to the customer now you check a few good ones make rocks out of them take them back to the customer, because it was just cool Well, I can I guess.
Michael T Ganschow Green: to collect data that one we mix and match and then after that the data to your background your thumbnail make some more REPS so this process can be can be a lot of back and forth well, you are.
Michael T Ganschow Green: While you're you're you're building out your your or you're refining the design down to something that the customer might want.
Michael T Ganschow Green: Sometimes, though, in the very first meeting I like that one that one right there that one that is awesome build that make me that.
Michael T Ganschow Green: So.
Michael T Ganschow Green: One of the reasons I.
Michael T Ganschow Green: Use photoshop and require photoshop in this class is because it is an incredible cheat because if you.
Michael T Ganschow Green: lay out your website in layers in indesign or illustrator or something like that anything that can be open, that will preserve layers in photoshop.
Michael T Ganschow Green: You can take that design put it into photoshop and you can start exporting pieces out of photoshop that you can actually use on the real.
Michael T Ganschow Green: version of the website so you can save yourself a lot of graphics building time once the client agrees to a particular website by.
Michael T Ganschow Green: Exploiting the thing out of photoshop that's why we use photoshop in here i'm going to recommend doing page layout in photoshop but i'm going to DEMO and in case you wanna.
Michael T Ganschow Green: um I would recommend using indesign or illustrator to lay your websites out it, particularly in design, although illustrator works with photoshop a little better in terms of graphical chunks but, whatever your poisonous.
Michael T Ganschow Green: So i'm going to i'll DEMO layout and photoshop it's not that hard but photoshop fun, but.
Michael T Ganschow Green: The reason why we use photoshop is because it has the best export engine have any adobe program it'll make things that are very tiny and good for the web, to use and all of that.
Michael T Ganschow Green: Very quickly, so once the customer agrees just build me that this is where it changes, a little bit okay see in a in graphic design that means basically the customers agreed to a file, you can take that file and set it up for.
Michael T Ganschow Green: Physical printing or for offset printing for silk screening for a however it's going to be produced into a physical object and basically you send that file off to.
Michael T Ganschow Green: A print shop or an apparel place or whoever, to have your logo or your designer whatever print it out and set up.
Michael T Ganschow Green: A website, a little more complex, this is where the shift happens so so the client approval in the second stage with the REPS is usually sort of the end of the print design stage.
Michael T Ganschow Green: Well there's a whole nother stage on the back end for the Web here so before we get to that other stage, do we have questions on the thumbnails on the rocks wire frames.
Michael T Ganschow Green: graphic artists Guild handbook researching research research research research research any questions.
kathy rueckl: So our rough drafts they're gonna be like we're going to be making our roughs.
Michael T Ganschow Green: as close to what you think your designs will look like in a browser.
Michael T Ganschow Green: Basically, so um so.
Michael T Ganschow Green: If you take a look at, if you want to steal some if you want to take a look at some of what previous students have done on the forum for their rough so we'll go to project three.
Michael T Ganschow Green: let's see here so we'll go to people's roughs you can see that their REPS are there kind of laying out what they think now project three requires a little more than project one obviously but.
Michael T Ganschow Green: Their roughs are basically they're kind of showing what they think their designs will look like, so what you want to do with the rough stage is whatever graphic software you're comfortable with go in and lay out.
Michael T Ganschow Green: A couple of okay Mike screen sharing that I think I did, I know I didn't hear hang on, let me screen share that i've done it again i've just been talking into avoid sorry about that here, let me screen share on that Okay, so if you take a look at roughs.
Michael T Ganschow Green: So.
Michael T Ganschow Green: what's what previous students have done with with with project wraps is basically you in the graphic software of your choice you layouts you lay out.
Michael T Ganschow Green: that's the final one that's links, now we want it rough basically you lay out what you think your website is going to look like in.
Michael T Ganschow Green: The graphic software of your choice photoshop is not required for this you just have to be able to output files that the forum will take witcher jpg pings things like that, and you can do that either with a save as or with an export and.
Michael T Ganschow Green: And then, basically, I want to see with your roughs.
Michael T Ganschow Green: What you think your your design will look like properly built in a web browser I used to we used to we used to do, or I used to allow marker comps.
Michael T Ganschow Green: For these, but a lot of students were basically putting up mark comps that were borderline thumbnails and asking us to give critique on it like what do you think of my type face and it's like freaking.
Michael T Ganschow Green: And you know their image placement as a bunch of box axes and things like that and i'm like well the layout looks okay.
Michael T Ganschow Green: So essentially just needs to be enough for us to provide feedback on, and I recommend getting it as close as possible to the.
Michael T Ganschow Green: to your final look as you're going to get it'll save you a lot of headache to when you get in get in actually building the website because you've effectively made yourself a template you can build off of when you get to the programming phase of things.
Michael T Ganschow Green: let's see when is the research thing do so, the research Australia is part.
Kiana?s iPhone: Of the.
Michael T Ganschow Green: Working graphics that you're going to turn in at the end of the project, this is part of that preliminary work, so the only thing that is.
Michael T Ganschow Green: That is not doing the project final due date are the preliminary roughs so we can give you feedback and the build phase.
Michael T Ganschow Green: is basically project, one is essentially to critiques on the website you're going to be building for project to so so that.
Michael T Ganschow Green: That that research is all part of your your preliminary work that you're going to turn in at the end of it, so the only thing that's dude that's not doing the final day is your roughs Oh, and for project one your two links as well.
Michael T Ganschow Green: Other questions, those are good ones I guess.
Kiana?s iPhone: I have a question yeah.
Kiana?s iPhone: You were saying that.
Kiana?s iPhone: it's useful to use photoshop because it's like easily transferable with like the like html and CSS and stuff but where are you recommending that we use photoshop for the layout just or like a rough.
Michael T Ganschow Green: Whatever your I recommend you use whatever you're most comfortable in.
Michael T Ganschow Green: If that's illustrator use that if that's photoshop use that that's indesign use that one or photoshop comes in really handy is when you get to what's called the exporting stage where you start.
Michael T Ganschow Green: Making imagery out of your design that you're actually going to use on the web now that's becoming less a doing it out of a whole design and doing it.
Michael T Ganschow Green: But rather doing it, piece by piece, as the web is gone on, but i'm going to show you both ways to do it.
Michael T Ganschow Green: And the reason why I recommend photoshop for that phase, at least, is because you get really high quality very small sized file size files out of it that you don't quite get with illustrators export features, for example.
Michael T Ganschow Green: photoshop really does a bang up job of getting you good tiny images that are really great that you can work with.
Michael T Ganschow Green: So that's so it's kind of a.
Michael T Ganschow Green: Washington to photoshop is kind of a cheat now my recommendation.
Kiana?s iPhone: Is work of what you're comfortable with.
Michael T Ganschow Green: let's see.
Michael T Ganschow Green: Can we use download images or.
Michael T Ganschow Green: If you want to create your own.
Michael T Ganschow Green: Either or in this case, if you if you want to make your own images feel free, but if you, you know if you want to use a cool landscape or cool scene, or whatever feel free to use images, you find on the web, we don't have the commercial restrictions that a.
Michael T Ganschow Green: That a professional project would as as students, we can pretty much use images from anywhere you're not stuck with stock photography or negotiating for rights or.
Michael T Ganschow Green: staging photo shoots or things like that, like you would be with professional projects, if you want to, if you want to go out and find your imagery I have zero problem with that it's pretty much where most of my students have gotten their stuff so feel free.
Michael T Ganschow Green: to dig in as well, like these questions, this is good excellent further questions any others.
This is good.
yeah like what i'm hearing here.
Michael T Ganschow Green: i'm gonna just do download images on going to do, I think I got all the questions in chat.
Michael T Ganschow Green: Okay, so.
Michael T Ganschow Green: let's.
Michael T Ganschow Green: let's hit the next step, then, so the client likes finally likes your raw food on two or three go backs they got when they love, so we want to see it we're website wheel on big.
Michael T Ganschow Green: just go so you're going, this is where it changes now, and so on a printer promotional product or an apparel you're done you're basically setting it up for print.
Michael T Ganschow Green: Go get it printed on a website, we start building the websites, as well the programming phase come it comes in and we're just going to basically be three quarters this stuff we learned in here frankly.
Michael T Ganschow Green: I don't have time to teach you guys, a lot of design principles we cover them in basically half a class lectures and then I revisit them periodically as they come up when we're building the websites and how and how things.
Michael T Ganschow Green: move in, but we have and we have good classes that specialize in each one of them anyway, so what you're basically doing the building phase is you're taking your design.
Michael T Ganschow Green: And you're coding it up in html and CSS and javascript and jquery whichever language you using control behavior um you guys will learn in here html and CSS a little bit of jquery.
Michael T Ganschow Green: So you'll be good to go by the end of this class and building these guys, so you start building it out, and when you build is a website called a prototype.
Michael T Ganschow Green: A prototype is a tiny portion of a website usually a handful of pages, for most of my projects, the final version of the website you're going to be building and here and in.
Michael T Ganschow Green: GR C to 75 are typically.
Michael T Ganschow Green: Five page little chunks of websites I don't I you know i'm not going to make you guys rebuild 200 pages of website, or whatever.
Michael T Ganschow Green: i'm not a monster that we're going to end up at the prototype phase, what the prototype phase is.
Michael T Ganschow Green: Is it's a tiny portion of the website that's fully functional so all of the animations all of the drop Downs all of the content, all of the.
Michael T Ganschow Green: internal relations between the pages are all fully functional as if it was a real website it's just this little teeny corner of it five pages typically.
Michael T Ganschow Green: For the the ones we build professionally so the prototypes we build out professionally we don't we don't do that many pages and like I said in here i'm just going to require five pages of view on other projects as well, so the clients purposes, once you build the prototype done.
Michael T Ganschow Green: But that's not the case professionally professionally you take the prototype and you go meet with the client again.
Michael T Ganschow Green: And you.
Michael T Ganschow Green: You basically DEMO the prototype to them either you guide them through and a presentation, or you throw it on a laptop.
Michael T Ganschow Green: open it up set it up in front of them and have them play 27 clicks with it and just kind of wander around working using working using working using working using and seeing what they think of it.
Michael T Ganschow Green: So at this phase frequently, they will have functionality and.
Michael T Ganschow Green: appearance questions and concerns and very much similar to what they had with the with the.
Michael T Ganschow Green: rough phase so frequently you'll be taking a prototype back and tweaking it maybe we wanted in purple so you go into the CSS and change a couple of colors to purple.
Michael T Ganschow Green: boom it pops up on the website or Oh, you know let's try changing that image out or can we move the navigation here on and you basically go back and Edit this prototype a few times, based on the clients wishes.
Michael T Ganschow Green: Once the client.
Michael T Ganschow Green: is satisfied, then you can enter the final phase well sort of the final phase, which is building the website out as a.
Michael T Ganschow Green: As a physical or as a as a proper website so you basically take that prototype and you build it out to fit, whatever the rest of the content you're building on that website.
Michael T Ganschow Green: So you take it and and if it's a 200 page website, while you build out all 200 pages you'll like the SAVE as function at that point, so you build out all the functionality, make sure the contact form emails make sure the make sure the.
Michael T Ganschow Green: The the drop Downs all function, make sure your animations are running make sure you know anything that swings in when it loads work, make sure the pop up image gallery pops up when you click on it, and things like that make sure it's fully built and ready to go and.
Michael T Ganschow Green: Then you take.
Michael T Ganschow Green: A, then you take the fully functioning website and you throw it up online on what's called a.
Michael T Ganschow Green: Development server typically there's typically there's.
Michael T Ganschow Green: there's no difference between a development version and a real server except what you do is you throw the website in a folder so that people can access it by typing in a web address for it.
Michael T Ganschow Green: And you basically have this little folder in which the website lives that you can get to my typing the Web address slash folder name you take that and you basically preview it with the client and.
Michael T Ganschow Green: Then, when the client signs off on that development version of the website.
Michael T Ganschow Green: load the website up on the main server and your ally.
Michael T Ganschow Green: Live so.
Michael T Ganschow Green: When once it's live you're not done yet so now is the debugging phase.
Michael T Ganschow Green: So you go through and we've been building it you've been checking it in a bunch of browsers but.
Michael T Ganschow Green: You make sure, and you check the live version and a bunch of browsers to make sure nothing's broken probably better probably best to do final checks well it's still in that little folder but sometimes you're not able depending on your timeline.
Michael T Ganschow Green: And then you check it and you go live basically you stand by waiting to fix anything that breaks for like a month or so after the website is launched, and then.
Michael T Ganschow Green: it's out to the world now for you as a web designer you that might be, yet you might be done they might not need your services anymore.
Michael T Ganschow Green: But a really good way to make a lot of money without without a lot of time is to set them up on a maintenance contract, a new contract, similar to the contract you signed on previously.
Michael T Ganschow Green: To for the building contract and basically what that typically entails is a monthly fee that basically takes care of the hosting takes care anything like that, and then.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: You go and check the website at regular intervals, you know every couple weeks or something like that or weekly, or whatever you want, in your maintenance contract to make sure everything's working just kind of run through it's even even a lot or whatever.
Michael T Ganschow Green: And then you're good to go.
Michael T Ganschow Green: Now a couple things on that and each step of the way, starting with the contract.
Michael T Ganschow Green: And then, starting with each approval phase with the client get them to physically sign and date something for their approvals of each of those That way, you will have records of their approvals Okay, you will have records of them.
Michael T Ganschow Green: Have of your meetings with them and that they signed off on that project okay so.
Michael T Ganschow Green: You want to make sure that you have a paper trail in case they say Oh, we didn't approve that this is still part of this part of the contract we're not going to pay you the next bit of it.
Michael T Ganschow Green: So you want to make sure that you have physical sign offs at each phase on this thing up to including accepting the final website when it goes live that signed off as well.
Michael T Ganschow Green: To make sure that you're covered in case they try and come back and say Oh, we didn't approve that we didn't yeah you want to make sure you're covered.
Michael T Ganschow Green: Also, when you build them there's there's a great deal of back and forth with how you should build them my recommendation is to do it in thirds okay.
Michael T Ganschow Green: feel them one third upfront make sure that third covers all of your costs, so you basically in the black on the rest of it, but the third upfront will.
Michael T Ganschow Green: will cover or the third up front is basically to make sure they're serious, so you get a third of whatever your total cost is up front.
Michael T Ganschow Green: Then you build on the third in the middle, I usually build them that third at the rough acceptance stage before the actual construction starts then Lastly, you build them at the end, the last third when you put it live.
Michael T Ganschow Green: So questions on this creation process.
Michael T Ganschow Green: Alright cool so it occurs to me that, while I was going over history i've got to explain.
Michael T Ganschow Green: How the Internet works, but I forgot to explain exactly how a website works, a website proper told you about the browser city, we post demos, and how to build a website yeah oh yeah yeah that's a that's pretty much.
Michael T Ganschow Green: Starting in about.
Michael T Ganschow Green: Week three or four in this semester onwards we're going to be building websites all over the place you're also going to learn how to upload them.
Michael T Ganschow Green: How to preview them in different browsers oh yeah don't worry about it that's what you're here for that's a you're paying money to learn how to build websites so by the end oh you're gonna know how to build websites.
Michael T Ganschow Green: Other questions I was a good.
Michael T Ganschow Green: Good questions tonight you guys are good batch you got you got got your heads on straight, this is good so um.
Michael T Ganschow Green: So I never really went over how website works, I talked about World Wide Web and the programming languages and all of that, but how does this, how does it work well here's how it works Okay, so when you set up a website, when you when you're ready to build a website okay.
Michael T Ganschow Green: You have to do a couple things first before you can start building.
Michael T Ganschow Green: And the first step is register a domain name now those domain names are www dot blog COM Jesse 175 dot com Amazon COM T mcc.edu those are domain names.
Michael T Ganschow Green: And I always one of the very early steps, I do with a website is look for open domain names and register them.
Michael T Ganschow Green: I, there are a million companies out there that are that registered domain names they're called domain registrar's.
Michael T Ganschow Green: I use godaddy I know it's trite but you know they they are in terms of registering domain names, let me do a screen share on this one in terms of blue cancel.
Michael T Ganschow Green: let's go here we go so let's screen share this Okay, so I use godaddy their domains are inexpensive their services are really good for their for their domains.
Michael T Ganschow Green: Their services are really good and everything else I don't particularly use them for anything but domain registration because.
Michael T Ganschow Green: They nickel and dime you for everything but the services you do get for all of that nickel and diamond are top notch so I use godaddy, but there are a lot of registrar's out there.
Michael T Ganschow Green: and
Michael T Ganschow Green: Most of them are pretty good godaddy is very good, I like it, but i'm registered domain through a bunch of others as well, and then pretty much good luck with all of them, so I wouldn't worry.
Michael T Ganschow Green: Too much about which one you pick and I can recommend a few to you if you're interested in that if you're if you're starting to put things together so First things first is registered domain name.
Michael T Ganschow Green: At a domain registrar second thing is you register what's called hosting hosting is.
Michael T Ganschow Green: Basically renting a folder on a server may remember from the video we just saw a server is a specific computer that is connected to the Internet and all it does is hold files, so you basically have to go rent a spot it's like.
Michael T Ganschow Green: running a little apartment on the Internet, you can even read just a little apartment on the Internet that you are going to store your website files in.
Michael T Ganschow Green: And the the there are companies that run nothing but web servers and they are called web hosts most of them are also domain registrar's they'll register domains, at the same time, so i've used a few different hosts over the years, currently share screen currently.
Michael T Ganschow Green: Oh here, let me put this in the chat real quick yeah this to the chat so that we have record of this, so I use godaddy for my domains, and then hosting the class is hosted on a.
Michael T Ganschow Green: hosting company called net firms, they have good set of servers they are in Austin Texas they're very good i've also had good luck with host gator.
Michael T Ganschow Green: Good luck with them, and these companies, basically, what they do is they maintain and rent out server space okay so skater and i'm also had good luck with blue host.
Michael T Ganschow Green: And i've used a few others with generally good luck as well, I believe us hello, thank you, blue host.
Michael T Ganschow Green: Blue host is very good, as well, so um I you so these web hosts basically they're essentially renting out server space to you, and so what you do is you set your set your space up and you.
Michael T Ganschow Green: you go to your domain registrar if you've got it at a separate place all of those companies, I mentioned as well, they also register domains and frequently if you're doing hosting they'll throw in a free domain or five.
Michael T Ganschow Green: When you depending on the level hosting you register with them so they will they will they will.
Michael T Ganschow Green: Frequently throw in domain, so you don't necessarily have to register your domain independently, with the registrar it's My personal preference but um then basically what you do is.
Michael T Ganschow Green: You go in you go to wherever your domain is registered if you've registered it elsewhere and your company with web hosting and the little apartment will send you basically.
Michael T Ganschow Green: A a specific pair of addresses that point directly to that folder and those are called name servers or they're usually NS dot.
Michael T Ganschow Green: And some chain and numbers and you go into your domain and you basically hook up your domain and your little folder on a server your little apartment on the Internet, basically tell the domain point there if you've already registered a domain with your web host think you just.
Michael T Ganschow Green: When you when you get the hosting setup the Web host will automatically pointed at that folder so you're all set up there.
Michael T Ganschow Green: Now you can upload your files into your folder and i'm going to teach you guys how to do it.
Michael T Ganschow Green: On our class website TV old pros at it, by the time you're done this semester you're going to do it four times she'll be you'll be absolutely fine probably more than that absolutely pros at it.
Michael T Ganschow Green: By the time the Semester is over okay so then so you're all set to upload your files, so how does all of this work, exactly you've got a web address and a server and you put up a bunch of files and how does it run well.
Michael T Ganschow Green: i'm people want to access your website use a specific program called a web browser we're all familiar with a web browser right Google chrome firefox.
Michael T Ganschow Green: safari Microsoft edge that kind of thing so it's it's it's basically a little program That has meant to interpret text commands and to go and reach out and pull data remotely so go to web browser and you punch in the Web address www.com yes well.
Michael T Ganschow Green: Basically, what happens is your browser goes to your Internet service provider, whoever you're using to get access to the Internet.
Michael T Ganschow Green: and your Internet service provider will have a list of domain names and what IP addresses or name servers those domain names correspond to.
Michael T Ganschow Green: there's a company called a company there's a group called the International Commission of assign Names and Numbers or I can I ca and then.
Michael T Ganschow Green: I can keeps track of all of a basically every domain name and every IP address online and who points to who, and then it releases this list out to ISP is several times, an hour so.
Michael T Ganschow Green: Once you put your website on it should be, it should take you an hour to maybe less sometimes it's instantaneous sometimes it's a few minutes, sometimes it's a couple hours for your website to show on the Internet so when somebody jumps in.
Michael T Ganschow Green: The open up a browser and they go out on the web looking for your address blah.com.
Michael T Ganschow Green: So your browser goes and tickles your Internet service provider your cable company or your cell phone provider, whoever and says hey this person is looking for www.com what does that correspond to.
Michael T Ganschow Green: And the list at the ISP says oh okay they're on a folder on this server over here in Austin Texas yeah so alright cool let's go over to this folder in Austin Texas and see what it displays.
Michael T Ganschow Green: And if you've built your website properly the browser will go through your folder and it will look for a file called index either index dot html or index dot php and it will take whatever is in that index file and it will, and it will basically using those commands.
Michael T Ganschow Green: it'll pull that file front and not pull it, it will effectively copy that file from your server make it basically view into the server.
Michael T Ganschow Green: And it will take whatever instructions you've put in that index dot html and it will display them in a browser in that browser so so, whatever your instructions are in your little text file your html.
Michael T Ganschow Green: Your CSS as huge as as your whatever will just will be displayed in the browser the browser will read those instructions.
Michael T Ganschow Green: And it's like you know I don't even read the code I just see blonde brunette redhead you know it's like that it's not that old line it's that same thing region, the code and then based on what it sees it displays that to your audience so.
Michael T Ganschow Green: that's how website works when you dial up in the browser what it's doing is it's going out and.
Michael T Ganschow Green: going to your ISP and your Internet service provider and saying hey where does GR C 175 live.
Michael T Ganschow Green: and your Internet service provider says oh here's 175 was over here in Austin Texas, and it says cool So it goes over to Austin Texas via the magic of the incredible edible Internet.
Michael T Ganschow Green: And it digs around in the server that it's a sign it is oh there's your folder goes into the folder.
Michael T Ganschow Green: And it says i'll look at that there's any index cool and it grabs that index and displays it first it's in it basically writes out whatever is in the code and whatever you put in the code is displayed visually in the browser.
Michael T Ganschow Green: So questions on how the website works.
Michael T Ganschow Green: So, like I said tz information dense you're probably going to want to download this class and watch it back a couple of times i'm also going to provide.
Michael T Ganschow Green: A lot of the links that i've been here like to my videos and things like that i'm going to provide those links, probably in i'll put them up on the forum and i'm going to provide them in the announcement.
Michael T Ganschow Green: The announcement thread on Sunday for next week i'll add not just what we're going over next week i'll add the videos that we that we worked with this last week as well, so you have them to reference.
Michael T Ganschow Green: So questions on that or questions on anything else the creative process, the Internet, how website works any of that stuff.
I think let's see here.
Michael T Ganschow Green: Alright you've done site architecture website planning website design creative process orientation history, the Internet web page works file creation file formats and file organization or anything cool so let's see then.
Michael T Ganschow Green: go over page layout I think your brains, maybe getting a little full here.
Michael T Ganschow Green: Oh, you have to yes, yes, yes and that's why i'm that's why i'm recording this thing right now, and why you'll be.
Michael T Ganschow Green: you'll be on you gotta go, but you watch the yes that's why i'm recording this right now, so that you can you can get these later, so you know what.
Michael T Ganschow Green: You know what let's finish today off with a little page layout, why not we've got 45 minutes of time and I said to you guys at these lectures and end at 830, no matter what.
Michael T Ganschow Green: So we've got 45 minutes of time, so let's do a little bit of design basics and page layout so everybody gather around we're gonna we're gonna dig around in the AV card again here and we are going to.
Michael T Ganschow Green: watch a little bit on the basics of design a little bit on the basics of layout and then I will go over some additional rules of thumb and tips and tricks relating to lay out and relating to the web and then we will be done for the day.
Michael T Ganschow Green: Today yesterday and today are probably going to be the longest classes of the Semester wow that'd be a few DEMO classes it'll go pretty long too, but.
Michael T Ganschow Green: But this is probably the most information dense period because it's a lot of care and feeding and how the class works and all of that, along with some design stuff and things like that, so thank you for bearing with me so.
Michael T Ganschow Green: Any questions before I dive into basics of design and page layout.
Michael T Ganschow Green: So i've actually got a couple of videos that I showed him my physical one I heard a person somebody have a question.
Michael T Ganschow Green: like this, I was just a child or somebody running away alright so i'm.
Michael T Ganschow Green: gather around the AV card everybody i'm going to show you some YouTube videos that I showed my physical 175 class that really summarize design and layout and then i'll mess around with a little bit of.
Michael T Ganschow Green: My notes on this just to make sure you guys have got something so let me get the video cued up and then share.
Doo Doo Doo Doo Doo Doo Doo Doo Doo are so aware.
Michael T Ganschow Green: That you stop that Okay, so this video.
Michael T Ganschow Green: Okay, so back to the thing and let's share this screen, shall we know, Michael don't click end broadcast they'll start crying alright so optimize for clip there we go let's go to chat so i'm going to go and put in.
Michael T Ganschow Green: How do you have this much stamina for long lectures like these ah well i'm.
Michael T Ganschow Green: partially, because these are two of the longest lectures.
Michael T Ganschow Green: Of the of the class this class front loads information and then its programming demos, and a little bit of theory throughout the rest of it so So this is the reason why I was designed to front load information is because this is a class that's taken by both GR C students and.
Michael T Ganschow Green: And she it students, so I need to get the CIT students caught up on design and any to show you design students how the design gets modified for the Web so here.
Michael T Ganschow Green: Is a little mental break a nice little basics design for all of you guys to exhale your brains on.
Your fundamentals of design or the basis of every visual mediums from fine art.
To modern web design.
Even small details like the fonts that make up most compositions.
What did these examples have in common, some very basic elements, including line shape form texture and balance.
They might not seem like much on their own, but together they're part of almost everything we see and create.
The fundamentals can be intimidating, especially if you don't consider yourself an artist how however there's a lot, they can teach you about working with different assets and creating simple visuals from scratch.
let's start at the beginning with one of the most basic elements of all the line.
A line is a shape that connects two or more points, it can be fat or thin wavy or jagat every possibility gives the line a slightly different feel.
lines appear frequently in design, for example in drawings and illustrations.
And graphic elements like textures and patterns.
they're also common and text compositions where they can add emphasis.
divide or organize content.
or even guide the viewers is.
When working with lines pay attention to things like weight color texture and style the subtle qualities can have a big impact on the way your design is perceived.
Look, for places where lines are hiding in plain sight, for example in text even here experimenting with different line qualities can give you very different results.
shape is any two dimensional area with a recognizable boundary This includes circles squares triangles and so on.
shapes fall into two distinct categories geometric or regular and organic where the shapes are more freeform.
shapes are a vital part of communicating ideas visually they give images heft and make them recognizable.
We understand street signs symbols and even abstract art, largely because of shapes.
shapes have a surprising number of uses and everyday design, they can help you organize or separate content create simple illustrations or just add interest to your work.
shapes are important because they're the foundation of so many things learn to look for them and other designs and soon you'll start seeing them everywhere.
When a shape becomes 3D we call it a form forms can be three dimensional and exist in the real world, or they can be implied using techniques like light shadow and perspective to create the illusion of depth.
In two dimensional design for makes realism possible without it, a bouncing rubber ball is just a circle.
A 3D building is just a series of rectangles.
Even flat designs you subtle techniques to hint at form and depth.
and everyday compositions the purpose of form, is the same, but on a smaller scale, for example, a simple shadow can create the illusion of layers or give an object, a sense of place.
Basic forms can bring a touch of realism to your work, a powerful tool when used in moderation.
texture is the physical quality of a surface like form, it can be three dimensional something you can see, and touch or it can be implied suggesting that it would have texture if it existed in real life.
In design texture adds depth and activity to otherwise flat images objects can appear smooth or rough hard or soft depending on the elements at play.
For beginners textures make great background images and can add a lot of interest here work look closely and you may find texture in unexpected places like distressed fonts and smooth glossy icons.
Just be careful not to go overboard too much texture in a single design can quickly become overwhelming.
Balance is the equal distribution of visual weight, in other words, how much any one thing attracts the viewers is balance can be affected by many things, including color size number and negative space.
mastering balance can be tricky for beginners because it does take some intuition Luckily, the design world is full of examples that can help you understand it's different iterations.
symmetrical designs are the same or similar on both sides of an access they feel balanced because each side is effectively the same if not identical.
asymmetrical designs are different, but the weight is still evenly distributed the composition is balanced because it calls attention to the right things.
Many people use a strategy, called the rule of thirds this imagines your work area divided into a three by three grid.
The focal point of the image is placed on or near one of these lines, creating visual balance with the rest of the space we find this type of composition appealing, because according to studies, the human eye naturally follows this path, when scanning at designed.
The fundamentals of design are all about the bigger picture and other words learning to appreciate the many small details that make up every composition.
This insight can be applied to almost any type of project, whether you're creating your own graphics or just looking for simple ways to enhance your work.
Michael T Ganschow Green: Thanks for joining us for the fundamentals of design check out the rest of our design topics, including color typography and more Joe or any further ado we'll do a little layout now.
layout and composition in a way they're the foundation of design.
Michael T Ganschow Green: They give your work, structure and make it easier to navigate from the margins on the sides to the content in between.
Michael T Ganschow Green: Of course it's not just about working with text composition matters and other mediums to like graphic design web design and much more without a well composed layout your work with basically fall apart.
Michael T Ganschow Green: The key to mastering layout and composition is to think like a designer luckily it's easier than it sounds there five basic principles that can help you transform your work and sharpen your eye for design let's start at the top and work our way down.
Proximity is all about using visual space to show relationships and your content in practice it's pretty simple all you have to do is make sure related items are grouped together, for example, blocks of text or elements and graphic.
groups that are not related to each other, should be separated to visually emphasize their lack of a relationship, all in all, this makes your work easier to understand at a glance whether it's purely text or something more visual.
White space is an important part of every composition now this doesn't mean literal white space it just means negative space, like the spaces between your content between lines and even the outer margins.
there's no one way to use white space correctly, but it's good to understand its purpose white space helps you define and separate different sections, it gives your content room to breathe.
If your work ever starts to feel cluttered or uncomfortable a little white space might be just what the doctor ordered.
alignment is something you deal with all the time, even if you don't realize it whenever you type an email or create a document, the text is aligned automatically.
When aligning objects by yourself, for instance images or separate text boxes getting it right can be tricky, the most important thing is to be consistent let's take a look at what that means.
It might help to imagine your content arranged inside of a grid notice how there's an invisible line centering each image to the text.
Each grouping is also evenly spaced and aligned with equal sized margins it's that attention to detail that makes the composition easier to navigate without consistent alignment your work could start to feel disorganized.
Contrast simply means that one item is different from another in layout and composition contrast can help you do many things, for example, catch the reader side, create emphasis or call attention to something important.
There are lots of strategies for creating contrast, you can use color adjust the size, shape or visual weight of an object or use contrasting styles of text.
Contrast is also closely tied to hierarchy a visual technique that can help the viewer navigate your work, in other words, it shows them where to begin and where to go next using different levels of emphasis.
Establishing hierarchy is simple just decide which elements, you want the reader to notice first then make them stand out.
High Level or important items are usually larger bolder or more eye catching in some way.
repetition is a reminder that every project should have a consistent look and feel that means finding ways to reinforce your design by repeating or echoing certain elements.
For instance, if you have a specific color palette look for ways to carry it through if you've chosen a special header style use it every time.
it's, not just for aesthetic reasons being consistent can also make your work easier to read when the viewer knows what to expect, they can relax and focus on the content.
In many ways, layout and composition, are the unsung heroes of design it's easy to overlook their role but they're part of everything you do.
A notch here some extra white space there and voila.
With a little attention to detail, you can create beautiful professional looking compositions.
Michael T Ganschow Green: Thanks for joining us for the basics of layout and composition check out the rest of our design topics, so there is page layout in a nutshell um there are a couple things that she mentioned that are really critical web design.
Michael T Ganschow Green: repetition is very important, so what you were doing when you build a website.
Michael T Ganschow Green: Is you're designing what is effectively a little teeny piece of software.
Michael T Ganschow Green: And you have seconds just seconds upon the loading of your website to teach your users, how to use it.
Michael T Ganschow Green: and making sure that your website on every web page in it has a consistent design language, even if they don't all look the same.
Michael T Ganschow Green: As long as they all basically feel the same you know, use the same colors the same type faces roughly the same navigational placement.
Michael T Ganschow Green: People will be able to move around within your website very easily so repetition is very important, you want to make sure, once you establish and look and feel to carry it through to to.
Michael T Ganschow Green: Your internal pages to the rest of your website now your homepage and your internal pages can be very different a lot of websites use a homepage as a.
Michael T Ganschow Green: As a almost like a magazine as a bright splash to attract people in, and then they have a little bit cleaner and more informational pages within the website proper.
Michael T Ganschow Green: But they also use the same fonts the same color schemes in their photos similar you know and and and the layout that's not.
Michael T Ganschow Green: That is within the same design language as the homepage so that's very, very important The other thing too.
Michael T Ganschow Green: Is that a lot of people get tripped up by white space and margin in web design and they start claiming their home website full.
Michael T Ganschow Green: of information and imagery and all of that, and if you go back through the previous student critiques and all the different projects and read a few of them, one of the things you're constantly see me.
Michael T Ganschow Green: yelling about in there saying hey that's a little too crowded I your margins are too tight between these objects, because, basically, if you mash everything together than the human I can't differentiate between.
Michael T Ganschow Green: Any of the individual pieces and it turns into mush of or if they're too far apart, it just looks like someone's.
Michael T Ganschow Green: drifting about floating across the screen and there's no commonality between them, and so the and so you sort of you know people get bored they lose track of it, so you use proximity use those margins.
Michael T Ganschow Green: To to establish your arm to establish object groups basically.
Michael T Ganschow Green: You know so anything anything that's close together will be grouped together by the human mind will be assigned a value based on what's around it.
Michael T Ganschow Green: As if there's more spacing people will separate it out into another thing as they see it should be very careful with your with your White space.
Michael T Ganschow Green: So you don't either accidentally create groups that are unintended or so that you don't miss the whole thing into a giant group and and lose yourself in it.
Michael T Ganschow Green: So questions on the on page layout so far, I thought, those were good a couple of good little companion videos to start us off.
Michael T Ganschow Green: Okay, so a couple of other things as well well i'm thinking on it so.
Michael T Ganschow Green: One of the neat things you can do with alignments and the alignments come in a few different flavors there's left alignment where everything lines up along the Left edge of the object.
Michael T Ganschow Green: most commonly it's a block of type, but you can also line other things along that edge there's right alignment where everything is lined along the right edge.
Michael T Ganschow Green: Of a of an object and then there's Center alignment where things run straight down the Center okay right down the Center of the object.
Michael T Ganschow Green: So, and the last one is justified where everything aligns to both the right and left edges, you can really use those alignments to create some interesting.
Michael T Ganschow Green: shapes because, basically, what happens is you can almost create artificial walls or artificial lines in your design using alignment, let me see here hang on a second where.
Michael T Ganschow Green: Did I were to zoom go did I did it crash nope there it is it just didn't it didn't crash good good.
Michael T Ganschow Green: Okay, good I thought it had crashed on me, because my chrome or my browser chrome vanished for a second hang on a minute, let me, let me jump in real quick here and i'll show you some oh let's see design.
Michael T Ganschow Green: alignment.
Michael T Ganschow Green: Here we go okay so.
Let me show you some of the.
Michael T Ganschow Green: What you can do with this so let's go share screen.
Michael T Ganschow Green: share all right so here's some various aligned photos and you can kind of see where they're using alignment and then.
Michael T Ganschow Green: Breaking something out of alignment to call attention to it that's one thing you can do you could also use alignment like how these crazy ass articles do where you can create shapes and lines with justified alignment like like this guy in the middle of us here that I meant to do this.
Michael T Ganschow Green: tab so so where he's using the body copy of this article to create a shape here, for example, you can use alignment to do things like that you can also use alignments to create invisible walls so.
Michael T Ganschow Green: You know where, if everything sort of thing bounces and stops on an edge, you can create effectively invisible lines.
Michael T Ganschow Green: And it looks really, really good actually so there's all kinds of interesting ideas you can play with by aligning your objects, you know you see on this one.
Michael T Ganschow Green: Say i'm having everything bounce against this left line sort of creates almost a visual line where there isn't one you can really play with stuff like that using alignments it's very, very powerful.
Michael T Ganschow Green: to play around with that and I always recommend messing around with alignments when you're doing your initial.
Michael T Ganschow Green: Initial layouts to get that to get that going alignments very, very critical I always recommend playing with it.
Michael T Ganschow Green: See he see they mentioned the rule of thirds oh um one thing, you will notice is that, let me see if I can find an example of this here real quick share let's go visual Center.
Michael T Ganschow Green: that's a brain visual Center layout visual Center Okay, so when when she was talking about the rule of thirds before.
Michael T Ganschow Green: to attract the eye there's basically three places that you can you can put things really.
Michael T Ganschow Green: To to attract the I hang on a minute let's go, what did run away to I had a good graphic and then I close the tab for I started here let's go.
Michael T Ganschow Green: Third alright so.
Michael T Ganschow Green: Basically, when you throw a grid on anything in one of these grids that basically divided any rectangular square into nine.
Michael T Ganschow Green: squares you you generate the rule of thirds and it simulates basically how the human eye sees anything so basically.
Michael T Ganschow Green: We start off in the top left and we sort of run down and we bounce up kind of to the right and come down sort of a sideways Z so this rule of thirds really stimulates that and you'll find on a lot of websites.
Michael T Ganschow Green: See here Call to Action button placement and you will find a number of websites see, they have a good.
Michael T Ganschow Green: picture of a call to action button, so you find a number of websites and looking for a nice picture of it.
Michael T Ganschow Green: Will either put a big broad Call to Action button in the dead Center or somewhere down one of these rules of thirds, because that is where you can guarantee that the dead Center or along that basically that sideways Z that the human eye will see something so you can place your.
Michael T Ganschow Green: You know any critical piece of content that you want people to see along one of those lines or straight down the middle and and that will.
Michael T Ganschow Green: Immediately attract their eye or medium to track their eye to whatever you want them to do so when you're laying stuff out remember that rule of thirds it's very, very handy.
Some other things here.
Michael T Ganschow Green: let's see oh yeah we've mentioned proximity.
Michael T Ganschow Green: Baba Baba bone.
Michael T Ganschow Green: So when you're placing images on your layouts a couple of a couple of things to remember.
Michael T Ganschow Green: images are very visually dominant so your main image placement really matters, and you can use these images to.
Michael T Ganschow Green: to really move the eye around the document and to really do a lot of speaking for the content in the document so having a large top image is sometimes quite important in the design.
Michael T Ganschow Green: Particularly that image, you know does a lot to summarize what's going on in that page if you're placing other images in.
Michael T Ganschow Green: Just a couple of rules of thumbs.
Michael T Ganschow Green: don't break the Left margin of a body of text basically or rather rather don't break the excuse me not left margin that was my notes before right.
Michael T Ganschow Green: don't break the margin that is not aligned on a rule of on a text with an image if you're going to break a box of text break it along the aligned edge, so that the.
Michael T Ganschow Green: You have a cleaner text wrapped around it, the human eye likes that better to.
Michael T Ganschow Green: let's see to do to do to do get those video covered that nicely white space white space is very important, it gives everything room to breathe room to breathe, remember that you want to have you want to make sure that that your design is not overcrowded and it is not.
Michael T Ganschow Green: That is not chaotic and he is.
Michael T Ganschow Green: causing your poor users to to.
Michael T Ganschow Green: melt down trying to read it, you want to keep it simple you want to keep it clean, you want to keep it.
Michael T Ganschow Green: easy to understand and white space really does that not breaking oh okay yeah good question Kathy okay so breaking the margin so.
Michael T Ganschow Green: On a batch type.
Michael T Ganschow Green: illustrator open already so we'll open an illustrator zoom I zoom we're going to screen share Hello screen share let's see if it will share my on what i'm going to do i'm just going to move my illustrator over here.
illustrator we're going to move you.
Michael T Ganschow Green: Create okay so.
Michael T Ganschow Green: You didn't do there we go with the illustrator in here okay.
Back to zoom screen share.
Michael T Ganschow Green: Okay, so breaking the margin so.
Michael T Ganschow Green: When you've got a bunch of type.
Doo Doo Doo Doo Doo like so go to.
Michael T Ganschow Green: see a paragraph here there we go we'll just to buy that so that's Nice and set so when you have a.
Michael T Ganschow Green: block of time you have a.
Michael T Ganschow Green: You have a.
Michael T Ganschow Green: edge of alignment we're all the time is aligned to this type in this case, a little block East will open it up a little bit this type is aligned to the left edge of this block and fine large, yet the type will continue to stay aligned like that so.
Michael T Ganschow Green: What you want to do is you want to make sure to have your imagery and your type.
Michael T Ganschow Green: come in from this side, so you have your images come in.
Michael T Ganschow Green: Like so.
Michael T Ganschow Green: ups open up to school you window let's go oops type.
Michael T Ganschow Green: Do to do now it's it is wheeling we got a multicolored we on everybody.
Michael T Ganschow Green: I was going to announce hiding my DEMO to so i've got we have a minor explosion there it goes okay so see.
Michael T Ganschow Green: that's right they did not include it in here Okay, so we need to manually text rabbit so basically what happens is.
Michael T Ganschow Green: When you break this side the human eye has a much easier time I really should have cracked indesign open instead of using my open illustrator but whatever.
Michael T Ganschow Green: The human eye has an easier time reading text when.
Michael T Ganschow Green: When it's broken from this side.
Michael T Ganschow Green: As opposed to when it comes in, on the side, where it's jagat cats where it's kind of coming in jagex kicked in of course illustrator doesn't really have a great text rap so but I didn't want to launch indesign so when it comes in, from that side, it looks smoother to the human eye and.
Michael T Ganschow Green: And it's a lot easier on people's eyes and minds basically.
Michael T Ganschow Green: To.
Michael T Ganschow Green: To process that so if you're going to break your line of text either either make sure both sides are justified.
Michael T Ganschow Green: or make sure both sides are aligned by doing a justified block of type which basically all that does is that aligns it to both the left and right side.
Michael T Ganschow Green: or only insert images into your type on the side that it is aligned to now, if you want them coming in from both sides, it really isn't a problem, it sounds like it's a problem.
Michael T Ganschow Green: But it really is it you just have to set your tech text to be justified, so that it's hard aligned on one side and hard aligned, on the other.
Michael T Ganschow Green: So hopefully that answers your question oh here I wasn't screen sharing there for a second hang on, so what I was saying was you want to have your type justified where it's hard aligned to the left and right edges, so you can bring in images from both sides, rather than.
Michael T Ganschow Green: Rather than bringing in images on a side, where everything is crooked alright so let's.
Michael T Ganschow Green: Do that stop sharing so does that answer your question.
sure.
Michael T Ganschow Green: cool excellent let's see so just make sure I hit everything she hit everything real three avoid to do to do, establish a hierarchy design elements contrast.
Michael T Ganschow Green: yep we've covered everything pretty much that you cover on the print side of page layout now the web and a little extra wrinkle as it does with everything so.
Michael T Ganschow Green: If your service illustrator I don't need you at the moment don't save boo boo boo boo boo so illustrator go bye bye all right so.
Michael T Ganschow Green: Why are you putting a website together, one of the things that.
Michael T Ganschow Green: That you'll do, and I believe I make you do it in project three and project for on here.
Michael T Ganschow Green: As well you're laying out your website layouts which is basically just print layouts.
share.
Michael T Ganschow Green: you're also going to be laying out what's called a site map Okay, a site map and there are.
Michael T Ganschow Green: So what a sitemap is is a flow chart of how your web page is going to enter reactor is going to interrelate and react with.
Michael T Ganschow Green: With.
Michael T Ganschow Green: Basically, how your website is going to navigate essentially so and you and what you're doing is you are building a flow chart to demonstrate this so essentially you're showing.
Michael T Ganschow Green: This is what you're showing where your homepage is going to be in the structure, usually it's the central landing page and then the immediate pages.
Michael T Ganschow Green: Of the website of the links thereafter are typically one tear down so essentially what you're building with a sitemap is you're building a.
Michael T Ganschow Green: flow chart to kind of demonstrate how it's going to work now, why do we do this when we're doing the base page layout.
Michael T Ganschow Green: Because this will inform our navigation, this will inform how our content is going to be perceived by our users Okay, and these these these sitemap flow charts.
Michael T Ganschow Green: will really help kind of visualize how our website is going to work and so basically you kind of start off sort of planning out how your pages are going to react so you have.
Michael T Ganschow Green: Virtually all website start off with a with their homepage that's the page most people are going to enter on.
Michael T Ganschow Green: Then they have an immediate navigation, which your pages that are directly available or immediately available from the homepage IE.
Michael T Ganschow Green: The standard, you know about contact you know all sorts of links on GR C 175 that is.
Michael T Ganschow Green: home the forum button the projects button student work and then class recordings y'all come in on the homepage and then these are the immediate pages there after on a sitemap of this thing, there would be a home, it would be a home and then 1234 or five pages now.
Michael T Ganschow Green: Any deeper pages on this list are pages that are they may or may not be navigable from the homepage.
Michael T Ganschow Green: Most times you can get to a deeper page from the homepage but they're typically not immediately available in the navigation so, for example, some pages would be.
Michael T Ganschow Green: All of the project pages that open up in my drop down menu from the projects list here, so when you're setting up a sitemap that will have my that's my other one, this will, this will basically show you.
Michael T Ganschow Green: How it kind of in a react so you've got your main homepage you got pages that are immediately available after it, and then deeper content pages.
Michael T Ganschow Green: underneath it this structure is called a hierarchical sitemap, by the way, it is a.
Michael T Ganschow Green: It basically is a homepage, then there are several immediate pages, and then there are sub pages that are either available only through these pages, or as drop down menus on the on the homepage so this sitemap.
Michael T Ganschow Green: Lets you figure out the file structure of your website, while you're figuring out the design structure of it, I I tend to recommend making this.
Michael T Ganschow Green: structure kind of while your thumbnail and researching can kind of see how you're going to show people how the website works now.
Michael T Ganschow Green: Most websites chat here in case you've got questions most websites.
Michael T Ganschow Green: site maps will look like this, this is what's called a hierarchical site map, but a hierarchical site map basically start to the homepage at the top.
Michael T Ganschow Green: And then goes to the immediate pages underneath and then whatever sub pages are beyond them and they come in a couple of different flavors there are shallow hierarchical site maps which, basically, is a homepage and then an immediate.
Michael T Ganschow Green: Like like a particularly small wireframe or even a small website it's basically a brochure with a contact form attached to it.
Michael T Ganschow Green: might only have four or five actual pages and it might just be a homepage and then four or five immediate links off of that homepage my.
Michael T Ganschow Green: My JRC 175 is kind of that it's a little different but it's kind of one of those it only has a handful.
Michael T Ganschow Green: Now they're all there are these are So these are called shadow hierarchical we're basically it's a homepage and then every page immediately kind of links off the homepage or or 10 immediately visible and then they were deep hierarchical pages, which are.
Michael T Ganschow Green: Which are.
Michael T Ganschow Green: pages, excuse me sites deep hierarchical websites which are.
Michael T Ganschow Green: websites that have content that drills down either only available through one of these pages immediately off the homepage or available via drop down so big sprawling websites might have something let's see like a big E commerce website here so like a big.
Michael T Ganschow Green: Big tall E commerce website might have several chains of pages deep and in fact pages, there may be pages that come off of pages that come off of pages, depending on how you set it up now.
Michael T Ganschow Green: This is the most common structure, although.
Michael T Ganschow Green: There are other other sites structures around we'll go over those in a second, but basically what you're sending this out you're essentially just build a flow chart.
Michael T Ganschow Green: of how your files are going to interrelate to each other, so you can see, you know there's homepage.
Michael T Ganschow Green: he's got a divvied up into sections then there's a sub page of each sub page of each of those and then some of these have sub pages and sub pages and so on and so forth now.
Michael T Ganschow Green: That doesn't necessarily mean sub pages are only accessible by these pages, although it might typically there and drop down menus and things like that i'm big complex E commerce websites, but.
Michael T Ganschow Green: When you guys are setting your websites up you're going to be doing these flow charts.
Michael T Ganschow Green: For the website now when you're building them, these are flow charts are not for the five page prototype of the building, these are for.
Michael T Ganschow Green: The actual website so as if, as if you were building out the whole structure, this would show what that is, and you have pretty broad latitude and putting these guys together, I mean most people do them as pretty simple flow charts, but if you go and you click on a website sitemap.
Michael T Ganschow Green: back a little further back a little further come on me on e commerce, thank you.
Michael T Ganschow Green: And you go into design, you can see a lot of people design them pretty differently there's.
Michael T Ganschow Green: Actually there's, this is a pretty good article here i've actually sent this to people.
Michael T Ganschow Green: With for site maps that's pretty good i'll post it in the on the forum.
Michael T Ganschow Green: Stopping the volume Okay, yes, I know zoom you're going to drop your browser chrome right in my way i'm aware okay so.
Michael T Ganschow Green: That you can also design them, you can feel free to add.
Michael T Ganschow Green: Add your own flavor to them, you can design the so that they're they're actually rather good looking a lot of these are little plane, but you can.
Michael T Ganschow Green: You can set them up, so that they are, they are a little bit prettier too so have so feel free to have fun when you're setting up your sitemap.
Michael T Ganschow Green: So, as I mentioned, they come in, in a few different flavors there is this hierarchical one where you have a homepage and immediate set of pages and then pages inside of those, and that is by far the most common structure to build your website in time.
Michael T Ganschow Green: The the.
Michael T Ganschow Green: Average not the only one.
See here do we.
Michael T Ganschow Green: have an example of linear was just one okay there's a hierarchical structure Okay, so the other big one, you will find that this one doesn't have a mouth, well then let's just go.
Michael T Ganschow Green: linear website so The other example is what's called a linear website now a linear website is.
Michael T Ganschow Green: not uncommon per se, but it yet, but, but you doing count but they're not they're not the common way to build websites and linear websites are.
Michael T Ganschow Green: largely used for presentations typically news articles or image slideshows or whatever, where you start off with a page and then you go to another page.
Michael T Ganschow Green: And then you go to another page, but if you want to go all the way back to the first page, you have to come back.
Michael T Ganschow Green: Through the page in between, so you have a starting page and then you can sort of March down this chain, and they have to march back up the chain to market to get out.
Michael T Ganschow Green: And again, this is most commonly used in like mystical in news articles in.
Michael T Ganschow Green: image galleries and things like that, where you start off with something, and you march into it and then you have to come back out, whereas, unlike a hierarchical website.
Michael T Ganschow Green: Assuming that they're not you know trapping you down rabbit holes there's some good ones there's a nice hierarchical they're assuming they're not trapping you down rabbit holes if you're down in.
Michael T Ganschow Green: Like if you're down in one of these guys typically you can be a navigation get back up out to the homepage so, for example on my project if you're down and project for here say on my website.
Michael T Ganschow Green: it's just a simple to get back to the homepage just by coming and clicking to the home button now if it wasn't this was a linear one, you would have to go back to project three.
Michael T Ganschow Green: And then back to project to and then back to project one and then back home, and after March you back out, so the linear ones are to force people to see and interact with content like I said, the most commonly used an image galleries and.
Michael T Ganschow Green: And news articles face essentially to to force add reloading basically their larger years basically it's a big scam to force add banners to reload.
Michael T Ganschow Green: So the website makes a little more money, so you find a lot of mystical websites and a lot of news websites and make you make you kind of go through one of these scamming linear.
Michael T Ganschow Green: layouts now there, there are good proper uses for linear and a lot of museum websites use linear really strongly to kind of lead, you through timelines and things like that, but linear linear linear is.
Michael T Ganschow Green: is most commonly used as a as a scam now there are a couple of others, that you will very occasionally encounter let me don't drop down to stop buying brought my.
Michael T Ganschow Green: My browser right so there's this Okay, there was one I we go Okay, so this image talks about it and the site structuring is a great article to this one's actually linked in the forum already so.
Michael T Ganschow Green: There is a there's a shadow hierarchical one and there's a deep hierarchical one it really, really, really boils down to drop down menu something use things like that.
Michael T Ganschow Green: One of the other ones that you may come across is this guy right here a hub and spoke, I haven't spoke is like a linear.
Michael T Ganschow Green: In that with most other websites, you can pretty much get back to the homepage from any page on it, whereas with a linear.
Michael T Ganschow Green: The pages or without assuming excuse me with a hub and spoke the pages only lead back to the homepage.
Michael T Ganschow Green: So you come in on the homepage and then you can go out to little pieces of content, but you can't.
Michael T Ganschow Green: Go anywhere else you have to come back to the homepage to get to any other content page so haven't spoke to you will come across as well.
Michael T Ganschow Green: But they're more academically oriented usually sending you out into branches, and even then typically there'll be a homepage that will send you out into a diffuse branch and then these branches.
Michael T Ganschow Green: Will split out into a standard hierarchical structure with each area functioning effectively as its own sub homepage you'll run into those two.
Michael T Ganschow Green: um there's also these guys webs.
Michael T Ganschow Green: web server where there is no homepage you can enter from any page go to any other page and all pages are intended at equal hierarchy and the site structure, there is no master homepage that everybody's supposed to come in on you just can come in, wherever you go wherever.
Michael T Ganschow Green: You don't see too many of these except in academic settings as well.
Michael T Ganschow Green: No commercial website will do this because you want to content filter that homepage to manage and monitor traffic.
Michael T Ganschow Green: You will occasionally see happens folks, but most of the time it's.
Michael T Ganschow Green: Typically, so here's a linear with some breakout hierarchical pages so typically it'll be hierarchical with maybe some post some linear chunks in it you'll find out.
Michael T Ganschow Green: there's also ones there's a web link site everything's on page there's also one more that to run into which is called a hypertext website.
Michael T Ganschow Green: And the dark web is set up like this, where there is no linking between pages in the website, in order to navigate the website, you have to know the address of every single page and type it in in the browser.
Michael T Ganschow Green: The dark web spelt like that, but for our for our purposes.
Michael T Ganschow Green: yeah now that only exists to torture your users, where they're all just i'll just a series of independent pages not linking to each other and everybody has to know the addresses to get there, so yikes on that one.
Michael T Ganschow Green: So questions on site mapping we'll go over it again, as we get a little closer to.
Michael T Ganschow Green: Turning in as we get closer to project three where the where site mapping comes back in again.
Michael T Ganschow Green: So that was a lot of information I packed you guys as brains full on page layout a pack your guys's brains full on the history of the Internet we're just tamping down attacking it full in there.
Michael T Ganschow Green: And these two classes are some of the most information dance ones of the entire semester so congratulations for making it all the way through.
Michael T Ganschow Green: feel free to grab the recording to this one when it goes up probably sometime tomorrow or Saturday on the website and and go through it in, as you guys have questions you know where to find me, you can either message me through canvas or you can email me.
Michael T Ganschow Green: What is the preliminary, let me make sure, so not lying to you, let me get that exact date off the website so.
Michael T Ganschow Green: For literary critique for Michael preliminary critique for project, one is do.
Michael T Ganschow Green: Tuesday February 9 so uh a week from this coming Tuesday I believe.
Michael T Ganschow Green: Yes, so.
Michael T Ganschow Green: We are we, you are here and the due date is a week from Groundhog day so i'll just make you turn this thing in again and again and again, let me screen share that So you can see, we can.
Michael T Ganschow Green: See the calendar so we're here today on the 28th, it is a week from the second so so you basically have.
Michael T Ganschow Green: Like about a week and a half to get your preliminary stuff set up.
Michael T Ganschow Green: And then that's the preliminary critique and then the finalists do on the 26th and will be already off to the races starting to build out big boy websites using html and such by that point, so we will be.
Michael T Ganschow Green: deep into that and I want to assign project to which is take this design that you know that you get on the knife in the 26th and build it into a web page well minimum one page, if you want to go further hey i'm not stopping.
Michael T Ganschow Green: All the questions.
Michael T Ganschow Green: Alright, well then, if nobody has any other questions, then i'm going to bid you guys do wish you a great night may you.
Michael T Ganschow Green: A good luck with your project ones feel free to ask me questions on anything I don't forget to register for the forum, if you have not and don't forget to hit me up with your forum username so that I can.
Michael T Ganschow Green: activate your account, and if you have an active account don't forget to post an introduction in the introductions forum, I see some of you are already talking to each other in the introduction, for them that's so cool.
Michael T Ganschow Green: So, yes please feel free to go post an introduction and, if you want to go say hi to anybody in there, please feel free as well and go through the forum alrighty, then you guys have a great evening.
Michael T Ganschow Green: you're very welcome Kathy very welcome allison I I just cram your brains full keep them going.
Michael T Ganschow Green: you're very welcome is about alright, so you guys have a great evening and I will catch you guys on Tuesday and in between then via email and canvas i'm sure i'll catch a good chunk of you, so you guys have a great one huh all right bye.
Michael T Ganschow Green: Alright free recorders we're going to end that there and the class is like that i'm the last one.