End of Junior Year Reflection

In my Junior year of Web Design, I have learned valuable lessons in many areas. These lessons can be categorized into the 5 guarantees of eCommunications.

Technology

In the area of technology, I have learned how to use PHP to improve my projects. We were introduced to PHP in a series of mini projects. Although I faced many challenges like small errors in code, and difficult concepts to understand I learned a lot. This knowledge is important because it can be used to record users info in a database, take polls, and it helped me to understand the basics of other programming languages like Java (which I learned in another class).

Collaboration

This year has brought to my attention a new side of web design. I learned the value of collaboration and peer feedback on my projects. Throughout the year, I have learned to value the input of my classmates. When I come to a problem, or need help thinking through a design choice, I can rely on my classmates to give important feedback or just an extra set of eyes. The only semi-challenge I faced was bridging the gap between the Juniors and Seniors at the beginning of the year, but I'm glad that I did because I gained many valuable friendships. 

Communication

This year I learned the most about communication through my client project for the Green Tech booster club. I designed their website for their "Summer Seminar" trip to Colorado. I did this through communication with a representative from the booster club. We began the project with an in person meeting and continued it through email. This experience gave me insight into the business world and taught me the importance of through communication.  The challenge I faced was the periods of time when my client would not respond to my emails, which made it difficult to understand what needed to be done.

Project Management

Through our year of web projects, I have had plenty of time to strengthen my project management skills. I have been able to practice using my time effectively in order to complete the projects on time. I have also learned valuable lessons about working on multiple projects at the same time while working on my class work and my client project. I will be able to use these skills in any job and in many areas of life as I work on projects. Some challenges I faced include spending too much time on one small problem and being distracted by other things.

Leadership

Although leadership is not the most obvious trait to be strengthened by our individual projects in web design, it has played a big role this year. When the class has been having trouble on a project, I would go around and bring others in to collaborate to solve our problem. If no one would have stepped up to bring our minds together, it would have been much more difficult to finish the project adequately. 

Conclusion

My greatest strength is being able to quickly understand and identify the principles and format of a program or language, as well as being able to work with others to solve a problem. I have strengthened these areas by learning new concepts in web, like mobile first and PHP, and by working more closely with my classmates. My greatest weakness would likely be finding and fixing my errors in a code. If I can't find the problem quickly, I can get stressed out, but I have improved these problem solving skills while working on some of our more complex projects.

Although I may not be going into web development as my career, I will still be able to utilize many of the skills I have learned in this class for the rest of my life. I will always be able to use my problem solving skills, my communication skills, and my leadership skills.

Looking back at this year, I have little to regret. The only thing I may change is to not take my time in this class with Mr. Olson and the seniors for granted. I am now realizing that it truly is coming to an end and it fills me with deep sadness.

I am very grateful for my year in web design. Although I am disappointed that it is ending, I am looking forward to the new and exciting experiences that the next year will bring.

Lori's Lumens Logo Mockups

I created these mockups with my final logo to show how this could be used in real life.

Lori's Lumens Logo Revised

Here is the revised version of the logo. I listened to the feedback and chose a different font to give it a better look.

Lori's Lumens Logo Design

In web design, we are creating a website for an imaginary business. The website will include this a logo which I am in the process of designing.  Here is my work so far on the logo for Lori's Lumens.

On this page, I have a light bulb tilted on an angle.
I like the box with the text on the side of it the best.

This page continues experimenting with more ideas. I tried to imagine a light bulb hanging from a string on the ceiling.

On this one I added more detail in the bulb and on the screw part.

I tried to explore other ideas that isn't just a light bulb. I couldn't figure out how to make it look right, so I probably won't be using this. 

Here I was testing out different fonts to go with the logo.

Embedded Maps

In class we have been researching maps embedded into websites with custom pins that show personalized information for a potential client. We looked at three different sites and how they worked to understand how we can make our own version. 

Zillow-

Zillow is a real-estate website. The map makes it easy to find houses in an area and all of the information that may be needed.  I couldn't find exactly how they made the custom pins, but they embedded Bing Maps into their site to create the map.

Century 21

Century 21 is also real-estate website. This map has highlighted red areas to show what area is selected and also has similar pins to Zillow.  I couldn't find exactly how they made the custom pins, but they embedded Bing Maps into their site to create the map.

T-Mobile

This site shows all of the T-Mobile stores on the map. This one is created with Google Maps and also has custom pins providing information about each store.

I will use Google Maps to embed a custom map onto my site with custom pins.

Web Design Reflection - Sophomore Final

My Sophomore year in web design has taught me a lot.

For technology, I have learned a lot about HTML, CSS, and how to efficiently use Dreamweaver after all of the projects we've done this year. Although I faced many challenges like Dreamweaver crashing every time I tried to save, I learned a lot.  These skills will help me to succeed in my next two years in web design, and possibly beyond then.

In collaboration, I have collaborated with others to improve our projects. In leadership, I have helped my classmates to solve problems or just to suggest an improvement.

For communication, I have learned how to present myself online and I have improved in my writing skills. This will help me in these upcoming years in school and it will also help me to get a job.

For project management, I learned how to use my time efficiently and effectively to complete all of my projects on time. I will be able to use this skill for the rest of my life wherever I am.

My greatest strength is project management and my greatest weakness is communication. Project management is a strength because I am able to work on and complete my projects in a timely manner. Communication is my greatest weakness because I don't enjoy writing blog posts or long papers. I have improving in my writing this year and I will continue to improve the more that I write.

I will use the skills that I have learned to improve my work in school and to also improve myself for life and my future employer. If I were to change anything, I would go back to my earlier projects and improve them with the skills and knowledge that I have gained this year.

I am happy with what I have accomplished year and I am excited for the next two years that I have in web design to improve myself and my work.

ONW Rebranding Project

In web design, we are redesigning the Olathe Northwest logo and mascot. I chose to design a logo for the Olathe Northwest Aviators. I chose this color scheme to reflect the red baron. 

This is still a work in progress.

New Home Page

I created a new home page using a dreamweaver template. Using a template instead of starting from scratch is easier, but it does have it's challenges. I had some problems with the formatting of the projects list. The css was already in place so I only had to modify it to fit my needs. 

This experience helps me to understand how professional web designers work. Most of the time, they probably use a pre made template instead of starting from scratch every time.

Check out my web site here: 

  

Past, Present, Future

For this project, I created a website about my past, present, and future. The buttons are rollover images created with photoshop. I created the overall site with Dreamweaver. When you hover your curser over the buttons, it displays the years that are being covered, and when you click on my name in the header, it takes you back to the homepage.

Check it out here!

Responsive Design Project

What is Responsive Design?

Responsive design is the process of creating websites that work on desktops and mobile devices. It is now more important than ever because of the rise of mobile device use. 

My responsive website

The css in my sight uses media queries to change the format of the site to fit whatever screen it is being displayed on.

Check it Out!

Without Responsive Design

Desktop

iPad Mi

With Responsive Design

What is responsive web design?

Responsive Web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation. It is becoming more important because the use of mobile devices with smaller screens is on the rise and has already passed desktop use. Media queries are a major tool in responsive web design. They are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation, and even resolution. One of the most useful media queries is breakpoints. Breakpoints create different versions of a site depending on the size of a devices screen.

St-Jerome Harley-davidson-

This is an award wining responsive designed website.

In it's smallest form, it has a drop
down menu, smaller text and resized
pictures. It also has a vertical layout
as opposed to the larger ones.

The medium version has a menu across the top, larger text, and larger pictures. The layout has a vertical and horizontal layout.

The largest version has the menu across the top right of the screen, slightly smaller text, and it shows more of the same sized picture. It also has a vertical and horizontal layout.

Topic Website - The Boy Scouts of America

For this assignment, I was tasked to create a website on a topic that I was interested in. I chose to make mine on the history of the Boy Scouts of America. I used a template that we had made before to start. Then I put in the content and changed the colors to match the content. This was our second "full" website, with multiple pages, so it helped me to understand more how to use dreamweaver to create what I need. If I were to do something differently, I would figure out how to make my sidebar to touch the footer on every page. Something I would the same was the color pallet that looked good in the finished project. For the next project, I will definitely use the same website for color pallets.

- My topic site

- My Index

Raven Vs. Crow - Web

This was the first website this year that we used Dreamweaver for. This project helped me to understand it and it's many features. It is a lot easier than writing straight code in TextMate. It is easier in particular to use css with the easy to use menu.

The Eight Core Web Fonts and Hexadecimal Color Codes - Web

Recently, we have been going more in depth into the wonders of web design by creating two more websites with the application TextMate. We made a page for hexadecimal color codes and a page for the 8 core web fonts that are used in web. 

These projects helped me to understand and get familiar with writing the HTML by hand before we get to use Dreamweaver, which writes a lot of the code for you.

These are the pages I made-

I used dividers (<div>) to create both the rainbow boxes and the boxes around the text on the font page.

Then and Now - Web

With this project, the first of my sophomore year, I was tasked with using the wayback machine to look at how popular websites have evolved over the years in both look and code.

Youtube-

Then

Now

                       

The famous logo and colors haven't changed much but YouTube has changed a lot over the years. It started out as a dating site and is now the largest video sharing platform in existence. On the surface, it has changed too many things to count . But if we look at the code we can see several changes. For example, they used tables to format everything and now they use containers.

   Facebook-

Then

Now

On the surface, facebook has changed its overall color, design, and audience. The code hasn't changed much, but has become much more complicated overall.

Gregg Riess Photography-

Then

Now

Gregg Riess Photography became more modern and easier to understand. The code, on the other hand, has become drastically more complicated and does a lot more for the site. 

Invasive Species - Web Design

This is my second web design project.

e9 Semester 1 Final - Website

For our final we made a website with dreamweaver. It isn't actually hosted so to show it off, I took screen shots. This project helped me to understand how websites are made and got me interested in web design.