End of Year Reflection

"#1" Takeaway

Over the course of this year in web design, I learned more than just how to create and design websites. I learned that 1.) web design is hard, but more importantly, I learned that you shouldn't just give up if it is hard. There were many times when my website got messed up or it wasn't turning out how I had expected, but I ended up completing it, and a completed website is better than an uncompleted website. Sometimes, I didn't even want to start a project because it looked way beyond what I could achieve, but once I got started, I learned that it actually was achievable. In other words, it is much better to try than to not. I also learned how to be productive or to manage my time well. Unsurprisingly, if you are procrastinating and not working on a project, chances are that you won't complete it. In addition, I learned that it is okay to ask for help. In my case, I was asking for help quite often, and the answer tended to be "have you tried refreshing it", and that usually fixed the problem. Regardless, help really did help, and once again, it was better to ask for help than to give up. Every once and a while, people actually asked me questions, and sometimes I could answer them. It felt really good to know how to do something well enough to be able to help others. 

Strengths and Weaknesses 

I'm not going to lie: web design is difficult and confusing. I am not the most "techy" person, so I struggled with web design. I understand how to use the CSS panel because it is very user friendly and doesn't really require much understanding of code, but I'm not very good at understanding the code itself. However, at the very beginning of the year, HTML and CSS code looked like a big, ugly jumble of letters, numbers, and symbols, but now I can look at it and get a pretty good understanding of what the code is doing to a website and how it works. I would say that I have an eye for designing websites based off of the color, font, etc..., but I need to work on understanding the code better. 

Application

Now, whenever I see an attractive or cool website, I have a better appreciation of it and how it was designed. In addition, sometimes when I am typing presentations or blogging, I can adjust the HTML or CSS to make it be closer to what I am looking for. This is something that I wouldn't have been able to do prior to being enrolled in Web Design. 

Alterations

If I could change anything about this year in web design, I would have liked to have known that if you arrange you work in the sever into folders, it messes up the websites. I also would have been more careful when copying websites and CSS because sometimes the CSS is still attached and rolls over to the next website. But overall, I wouldn't change anything.

Conclusion

This year had its ups and downs. Sometimes I really disliked a project, and sometimes I really liked a project. I challenged myself by enrolling in web design, and I'm glad that I did because it made me better at pushing through the hard stuff so I could achieve it. I had a good time learning about the interesting world that is the internet and exploring how to add to it. 

Olathe Northwest SQUIRRELS

If Olathe Northwest changed their logo from ravens to something else, I would want it to be the squirrels. This is because squirrels are terrific. First of all, they are incredibly adorable, but beneath their cute appearance, they are vicious, deadly critters. They are swift, competitive, and intimidating creatures. These are all components of a good mascot.

The creation of my squirrel mascot is going decently so far. I wanted to make the squirrel look cute as well as vicious. I achieved this by using the pen tool in adobe illustrator to vector a clipart image of a squirrel. After doing this, I created the body and tail. I made the tail protrude form the back of the squirrel. Next, I found a swirly font that I thought would work well as a school font. I typed Northwest squirrels on and above the tail.

with words

just icon

Now it's time for color! I wanted my color scheme to look clean and look well together, so I chose a complimentary color scheme of orange and blue. I think this color scheme looks very good.

colored squirrel head

colored squirrel with words

Now that I had the squirrel, it was time to make the actual website. We just made the home page with a bunch of fake links. I incorporated the orange and blue color scheme togo with the colors of the mascot. I used a web template, so it was very easy. All I had to do was put in the content. Because it is a template, it came with responsive design. There is a cool image that moves as you scroll. This image disappears when the screen size is a certain size. This is how it turned out:

Check it out here.

Updated Index Page

We thought that our web index pages that displayed our web work needed a facelift. To redo my index page, I used a web template provided my Dream Weaver. This template looked very professional, clean, and was complete. All I had to do was insert all of my content and create a color scheme. This made creating a website much faster and look much more professional.

This is what my web index page looked like before the makeover. I designed it by myself (with out a web template). I liked the color scheme that I had before, so I tried to incorporate a similar one in my new index page.









This is what my updated index page looks like. It has a similar color scheme as my old index page, but I did not set a photo as the background in the new one. A big difference is the layout. Each website displayed is inside a thumbnail. In addition, each website has a short description of what the website is about. To check out the website, instead of clicking on a boring text link, a screen shot of the website is the link. Another different in the new index page is the "Email" button at the bottom that allows someone to click it and it takes the person directly to my email.

 The web template has responsive design incorporated into it. This made it extremely simple to have a website that would look good at any device size. This is how the layout was spaced out on a cell phone. Something I like about it is how each thumbnail occupies the whole screen as seen to the right. This looks very clean and makes content simple to read. This is what my index page looks like on an iPhone 5.





Creating a website from a template is very beneficial. It is much faster, easier, professional looking, and versatile. However, it isn't guaranteed that the website will be perfect. For example, the layout had a problem at a certain screen size that jumbled up the thumbnails. I couldn't figure out how to completely fix this. In addition, following a web template guarantees that there is another website that looks very similar. This is bad because originality is important, and it's boring for many people to have the same website. However, you can always change the CSS and HTML to personalize it.

I doubt that many web designers create websites completely from scratch because it is much more efficient to adjust certain aspects rather than starting everything from scratch.

Check out my new index page here.

Past Present Future Website

In web design, we made a website that is totally different than any we have ever made before. It is a website, but it has a div that looks like a cool TV and animated text. This was an animated layout that we created in Photoshop. When I saw what the website was going to look like, I thought that it looked really complex, and I didn't think that I could pull it off, but it was actually quite simple.

original

original layers

First, we created the layout in Photoshop. I wanted mine to have a cool galaxy background because when I think of time travelling, I think of outerspace. I, next, typed out my name in a big font and gave it a shadow. I wish I had chosen a cooler font. I did the same with the words Past, Present, and Future. I also added the big "screen" in the middle that would depict my information. I rounded the edges and gave it an outerglow to make it stand out. Next, it was on to animating it. In the layers panel I made two rendeitions of the words. One that would be the original, and the other, the one that changed when hovered upon. Next we animated the layers to fade in and out in the time line. Lastly, we made slices of each word and saved the starting one, and the animated one.

changed 

the slices

changed layers

Then it was on to Dream Weaver. I struggled getting my slices on to Dream Weaver. I inserted a roll over image inside a div. This is where I put all of my slices; first the original and then the animated. I then  made an inner-bottom div, which is where I typed in my information for past, present, and future. I also included pictures. I then entered in the code to make a scroll bar. I changed the CSS to make the scroll bar purple to match my color scheme. I learned that I had to work almost entirely from live view because it didn't show up at all how it really looked in design view. I made four different pages in all and linked them all to one another (linking images works the same way as linking text). I am very happy with how my website turned out, and I'm surprised I actually made it work.

Check it out my website here.

Responsive- Photo Composition Site

What is Responsive Design, and what makes it work?

Responsive Design allows websites to adjust to any screen size in an appealing and balanced way. Different devices support different screen sizes, and the original website that was designed for a desk top rarely looks good- or is even readable- on other screen sizes. In order to achieve responsive design, something called a media query is used. A media query is a CSS code that over-rides pre-existing code. It uses specific breakpoints for when to change the layout and position of objects on the screen. These break points are based upon the size of the screen, so when the break point is reached, the website changes its layout design. Different media queries are used to represent specific breakpoints.

media query for tablet sizes

Without responsive design

This is what my Photo Composition site looked like on a smart phone before adding responsive design. It looked a little different before, but I didn't save the original. As you can tell, the text is very small and the main is very stretched. In addition, the menu does not hold all the link text.

Responsive design on a mobile phone

After adding responsive design, the menu panel was moved to the bottom to allow more space for the text at the top. It is a lot cleaner and a lot easier to read. I did this by adding a mobile style as the media query.






'

Responsive design on a tablet

Using the tablet style as seen above, I created the layout for my website that would look good on a medium- sized screen. I added in percentages to allow the main to shrink to the size of the screen so that no information would be cut off. The menu panel is still on the right side because there is enough space for it to fit well.

Responsive design on a desk top

I did not have to change anything for my desk top web site because it was the original layout. This was the longest website that we have created so far in web design. There is a home page and 13 other pages describing the secrets to photo composition. I researched each topic listed in the menu panel, found pictures, and designed the website. If you want to learn about photography and see a responsive site, click the links below.

Check out my responsive site here

Check out my original site here

Responsive web design

What is it?

Responsive web design lets the website that the viewer is viewing to adjust to the size, platform, and behavior of the device that it is being viewed from. This is done in an appealing, balanced, and flexible way.

Why is it important?

Responsive web design is so relevant today because the use of mobile devices has sky rocketed through out the past decade. In addition, there are many different mobile devices that have different screen sizes.

Media queries

A media query is a CSS technique introduced in CSS3. It uses the media rule to include blocks of CSS properties if a certain condition is true. In other words, it is the code that makes responsive web sites possible.

Narrow

 This website, when stretched, has a very symmetrical feel. The menu tabs are all perfectly centered and are very large. It is all one thing after the other: The logo, the title, the menu, and some additional information. It feels very cramped, but it is still attractive.

Medium

In contrast to the narrow layout of the website, the menu tab is at the very top of the page, and it is not as emphasized. The medium layout has more content because there is more space to present it. For example, there are multiple graphics at the bottom of the page. It feels a lot more spacious.

Large

The wide layout (a.k.a the full view) leaves a lot of room to breath. It is spaced out nicely. Because there is more space, more things can be included on the page. There is a register button at the bottom and the graphics are larger. 

Check out this awesome responsive site here.

Flash

a common example of a Flash website

the burger moves when hovered upon

Flash is a web-based video, animation, and interactivity software that enables awesome and diverse websites to be created. It consists of small animations coming to life when they are clicked on or hovered above; it consists of sound effects and music. Flash plugin became very popular because it made sure that this incredible content would appear the same for any and every computer and web browser. Despite how amazing Flash is, its popularity is dying. This is due to the fact that it is complex and has gone through many versions, and is hard to preserve for future generations. In 2007, Apple announced that the latest iphone would not support it because of these reasons. Steve Jobs said Flash was "insecure and resource intensive, and its plug in was overly proprietary". Apple shifted its focus from flash to HTML5 and Java script because they were based on open standards that web browsers could easily support. Apple's exclusion of Flash was a big deal because many website games had Flash. Luckily, apps that used Flash were still available. In 2011, Adobe also stopped allowing Flash, and it switched to Edge animate, which, was renamed Animate CC in 2015. Animate CC was announced to be the new web animation tool, and urged developers to abandon flash. By 2015, HTML 5 had evolved and was taking over the web. However, Flash hasn't been completely abandoned. Facebook is Flash's last hope, but it looks like Facebook is also going to give into HTML 5. Google Chrome recently announced that it is blocking Flash by default. Flash has not completely vanished from the web; animations and videos and parts of websites can still include flash, and you can still access it by clicking an opt button. However, not an entire website can be made from flash.

what shows up on flash websites

learn more about Flash here

What's the Big Deal About Tiny Houses?

Home page

For our final in Web Design, we were supposed to combine our skills from previous projects into making a web page about something we are interested in or passionate about. I am very interested in anything having to do with tiny houses, so that is what I decided to dedicate the topic of my website to.

All of my docs

 We were required to include information about our topic in our own words, so this project required a lot of research. Because I am very interested and passionate about tiny houses, I had no problem with spending a lot of my time, both in school and out of school, researching my topic. After all of my information had accumulated, I realized that I had far too much information to make just one sub-category of. I ended up having information on the benefits, designs, and mindset of tiny houses (each with multiple sub categories).

My banner

My graphic

Once I had all of my information on tiny houses, I was ready to design my web page. Luckily, we didn't have to make one from scratch; we had previously made out Real Or Hoax? page that we were able to simply transfer our information to. At first, I had no idea how to design my website, but after making a web banner, I based my color scheme off of it. This brought my website together. The light and dark burgundy, cream, and green colors really evoked a comforting feeling that I wanted to portray through my website. In addition, I made a simple graphic to place beneath my side bar. I made the "H" in houses into a house my adding a roof.

Links page

Next, I had to do all of the technical work. I  linked all of my pages together (which took a very long time considering hoe many pages I have), put pictures on all of the pages, and found links for each page. It was a little bit frustrating having to use the "label for reuse" button when searching for copyright free images because I knew that there were really good tiny house pictures that were copyrighted. Eventually, I accumulated a good selection of pictures. After that, I found multiple links to strengthen my page and to let viewers learn more about tint houses.







Overall, I enjoyed this project (mainly because I enjoy tiny houses), and I think that it turned out very well. See my website here.

Halloween page

Because it was Halloween, we made a Halloween web page to celebrate this fun time of year. This website included many new elements- many of which being photoshop embellishments.

To spice up our Halloween page, we typed it is Halloween in a spooky font and made it transition from black to purple and purple to black again and again. This is the title of our web page. I think it looks very cool and spooky.

In addition, we made a jack o'lantern . It looks like the candle on the inside is flickering in the wind to make it appear more realistic and cool. This is a nice touch to the web page.

Lastly, we made a gradient to set as the background image. You might not have noticed it, but it looks better than just having a plain orange background. Although we are not in animation, it is still important to expand upon areas that we will benefit from to make out websites more appealing. Other than creating multiple animations, we learned a new thing in Dreamweaver called an iframe. This is a big picture that shows up on the webpage after you click on it to see a new webpage. Because our theme was Halloween, we found links to websites over Halloween topics

I really liked the way this webpage turned out. It did require a lot of effort and steps, but it is cool to see the final project. 

Raven VS Crow from Adobe DreamWeaver

Ravens and crows may look similar, but they are actually different. Because the raven is our mascot at Olathe Northwest, we created a webpage describing the distinction between the commonly confused birds. Unlike the previous web pages, when creating them with TextMate, we were introduced to Dreamweaver. Dreamweaver is very different than text mate. One reason being that text mate requires you to type out everything manually, while Dreamweaver is mainly done through the CSS menus. The menus are very simple to use. It is a lot easier to just press a button in the CSS menu rather than having to recall the html code for it and type it out. Dreamweaver enables you to be very creative and Persue your creativeness simply. 

Hexadecimal Color Coding and Fonts

Hexadecimal Color 

Hexadecimal color coding is a way to display color in HTML. It is represented by #RRGGBB; the R representing red, the G representing green, and the B representing blue. Hexadecimal has a base of 16 digits, which range from 0-9 and A-F. The letters are higher than the numbers, so F is like a 16. The higher the number/ letter, the lighter the color will appear and vice versa.

 We incorporated our web design knowledge with our knowledge of the hexadecimal color coding to create a webpage. Looking at the HTML coding, you can see that the body has a lot of similar looking coding. But you can see that each is a different color with a different hexadecimal color code. We started off by doing the rainbow. For example, to create red you make the RR part the highest, which is FF, and leave the rest as zeros. Then we made a lighter color/pastel section. To create the lighter colors, we made the colors less vibrant. To do this, for example, the color red: You keep the RR turned up all of the way but make the other spaces in between dark and light by making them eights. Lastly, we made a section of "colorless colors." Black is the lowest number (#000000) and white is the highest (#FFFFFF), so to create gray, you meet half way. Gray would be #888888.The hexadecimal color coding does not always have six digits. If there is a color that has the same digit in each place, it can be shortened to just three digits. For example, #FF0000 can be shortened to #F00.

 This is what the Hexadecimal webpage looks like.

In addition to creating the hexadecimal page, we made a font page as well. We first learned the eight core web fonts. Some of which are serif fonts which means they have little 'lines' or feet at the end of them, while some are sanserif which means they do not. The serif fonts include:

• Times New Roman
• Georgia
• Courier

The sanserif fonts include:

• Arial
• Verdana
• Tahoma
• Trebuchet

• Comic Sans, which is a very controversial font. Many people hate it because it is commonly misused, disproportionate, and is overused.

After being educated on these fonts, we used created a webpage for it. We included the eight core web fonts by doing the same thing as creating the color page instead with fonts. We created a div style and set the font family to whatever the font was. We then typed: The quick brown fox jumps over the lazy dog. We typed this to display the letters of the alphabet because this simple sentence includes all of the letters in the alphabet.

This is what the font webpage looks like

Internet Archive "Wayback Machine"

The moment a website is "born" to the present, the evolution of it is being tracked. Some websites change drastically, while some stay pretty much the same. From the content to the design, it is always interesting to see the progression of a website. Luckily, there is a website called Internet Archive "Wayback Machine"(https://archive.org/web/), that allows you to go back in time to the very beginning of a website, and anywhere in between. In web design we looked up popular websites to go back in time to. I chose Amazon, YouTube, and Blogger.

Amazon.com

Amazon 8/25/16

Amazon 8/25/16 HTML

Today Amazon.com looks clean and appealing. It gives the online shopper much to want to click on. There is a lot going on, yet it is simple and organized. There are also many pictures and icons. To the right is Amazon's present HTML (Hyper Text Markup Language, which is the language used for content on the web). There is a lot going on in its HTML.

Amazon 10/13/99

Amazon 10/13/99 HTML

Amazon has not always looked so good. On October 13th, 1999 the website could use some work. It had a painfully dull design with little to no appeal. It was all words, with no pictures and few icons. The HTML in very simple which is shown through its design. Luckily Amazon has changed since the twentieth century.

                                                              Youtube.com

Youtube HTML 8/24/16

Youtube home page 8/24/16

Youtube has a very organized layout, and it needs to be that way because of the millions of videos it hosts. The popular video sharing platform is easily accessible, with its search bar placed at the top, and recommended videos placed in plain view. The layout is simple and works well for its intended use. The HTML is quite complex with many different sections, which correlates to its visual design.

Youtube home page in 4/28/05

Youtube HTML in 4/28/05

Everyone knows Youtube as a site to find and post videos, whether it be for entertainment or a tutorial; but Youtube has not always been this way. Back in 2005, at the "birth" of Youtube, it was actually used as a dating website. Not only was the old Youtube's intended use cringe-worthy, so was its design. The Youtube logo has stayed pretty much the same to the present day's, but the wys it was placed on the original website is very bad. It would be much better if the logo was made transparent. Overall the original design is not interesting. Its HTML is very simple. On each new line there is hardly anything.

Blogger.com

Blogger home page 8/24/16

Blogger HTML 8/24/16

What this blog post looks like as you are reading it now was quite different than what it would have been back then. Blogger's home page is very artsy, clean, organized, colorful, and simplistic. It has a sign up button, a few pictures, and a changing background. The HTML is very complex because the home page has a lot going on, but it is displayed in an organized way.

Blogger 6/1/04 HTML

Blogger 6/1/04

Blogger was still a blogging platform at its beginning, but it was not as aesthetically pleasing as today's is. Blogger's design was extremely boring and bland, with its lack of color. Unsurprisingly, its HTML was incredibly simple.