Senior Project

The start

   Senior year is coming to a close and it was time to begin the last project of in e-Comm of my high school career. The assignment was to find something that we didn't know much about and to learn more about it and research it and then create a site about it or using it. We had the majority of fourth quarter to accomplish this project.

   I decided that I wanted to mix the two things that I loved to do most in my free time: photography and web design. At the start of this project my idea was to research different ways to showcase photos on a website. I knew had to do one or two already but knew that there must be more out there to showcase photos in a way that would make it pleasing to the eye and attract potential customers.

Process

   The first thing I did was I looked at a ton of different photography portfolios. I wanted to see how other photographers presented their photos and I wanted to see what worked and what didn't work. My next step was to figure out what web platform I was going to use. I am very experienced in WordPress, however, I wanted to see what other options were out there and if other options were better. I looked into Weebly, Blogger, Wix, and even starting from scratch using DreamWeaver or Visual Studios. However, I didn't want to start it from scratch because then I would be using the school servers and computers, and I wanted to use this site even after I graduated and that would be hard to do when I don't have access to the school servers and don't have a server of my own.

   After looking at all of these website builders I was between Wix and Weebly. After testing both out I decided that Wix was going to allow me the most room to make changes as I want. Then it was time for the content.

Content

   I already had a lot of pictures, however; I wanted more so that I had a lot to work with. So I asked my best friend to be my model. We went on a few different shoots and I took a TON of pictures. I have a total of over 2,000 pictures of her now. I also asked my other friend to pose with her so I had some pictures of more then just one person. I also have a shoot lined up right now with my family as well as a couple and their dog. I will edit these and add them in over time.

Editing

   As soon as I got home from each shoot I would load all of the images onto my computer and go through all of them. I deleted all the ones where I was testing the lighting, or anything that was too over exposed to fix or to dark to fix. I also put aside any photos where the models eyes were closed.

   What I was left with was still a lot of photos. I imported all of them into Adobe Lightroom and began the long process of editing all of them. It's a good thing that I enjoy this portion because it did take a really long time. After I was finished with that I saved them in a folder to be added to the site. Some of them I uploaded to VSCO in order to edit them further. I started to add them to the site when I realized that I realized that I needed to put watermarks on all of them. So I went back and I created a watermark in Illustrator and then opened the images in photoshop and added the watermark and turned down the opacity so that it was less noticeable but was still there. Then I added the photos back in.

The journey

   I learned that it is a long process to create a project this large. It took a lot longer to take the pictures and edit them and everything then I expected. It can also be difficult to find a time that works for taking photos of people and working around other peoples schedules as well as your own to find a time that works for everyone. In the end it was a really great experience. I didn't accomplish everything that I wanted to do but I will continue to work on it to try to accomplish those things.  

The End

   Take a look at my final product https://allysonbchitwood.wixsite.com/photosbyallyson

   My last project of my last year in high school is complete. It was a wonderful experience and I will miss getting to do projects like these. My time in e-Comm has been wonderful and I will forever cherish it and look back on it fondly.

Senior Show

What is it?

The senior show is where all of the seniors in e-Comm get to show off their best work and possibly get jobs or internships. Everyone from friends and family to administration to professionals come to this event to look at everything the seniors have done. 

This event is mainly senior run. Meaning the seniors run it, plan it, put it together, and are the main attraction. I was chosen to be put on the committee that planned it and put it together. My job was to represent the Web strand and to put together the website for the event.

The beginning

To start we met every second seminar on Thursdays. I started by getting all the information I needed to create the site. This included the logo, color scheme (which changed a few times), animations, graphics, and all of what they wanted to be in the site. Because the main focus of the event was the seniors, we wanted to main focus of the site to be the seniors. So I gathered all the names of the seniors and what strand they are in. 

Gathering it all

We then decided that we wanted to have each of the seniors contact information on the site. So I created a google form that asked for everyones: name, email, social media links. This was one of the most frustrating parts. The reason being that there was a large portion of people that just didn't turn anything in. I gave them a due date and over half of the seniors missed that date by a week and a half. There were a few that I or a teacher had to go to personally to make them turn it in.

This part was also the longest part. I had to go in and type up all the code for each person (see right for an example of one persons code). This took me forever because I had to go from the form and copy all the info in and even afterwards I had to keep going back and fixing parts of it because I either didn't put it in there correctly or the info given to me didn't work or needed to be changed a little to work as a link.

I also had to put in all the images for each person. We decided that it would be really cool if all the pictures at first look were just the normal, smiling, professional looking ones. And then when your mouse rolls-over the image then the image changes to the silly image that the person took. 

At first I had some troubles figuring out code that would work in WordPress. With the help of my dad and Mr. Olson we were able to figure out a little bit of JavaScript that worked. Then it was just a matter of sizing all of the images to the correct size (shout out to Annika and Katie who did a wonderful job doing this part) and inserting them in correctly. There were some kind of funny mistakes during this part because there were sometimes where I inserted the wrong image for the wrong person, but oh well it was an easy enough fix to go back and fix it.

Towards the very end of this project, meaning the week before the event, we decided that we wanted to have a quote from each senior. So I set up another google form asking each senior What brightens your life. I then took that information and put it into the site as well.

The End

After it was all said and done I was happy with the result and never wanted to see that site again haha. The event went very well as well. The decorations turned out really great and all of our hard work paid off.

This was a very good experience in the end. I learned how to work with others on a committee to plan and put together an event that will make everyone happy. I also learned that it takes a lot of patience to be working with so many people with different opinions and personalities. In the end I am happy with how it turned out and it was a great learning experience.

Update time

I haven't been able to work on my senior project in a few week because I have been working on the senior show website (which you will hear all about in another post)

Content

I finally got back to it a few days ago and was able to finish all of what I have so far. I still need to take more pictures for more content, but I will just have to do that later on. I would like to take some family pictures as well as couples and some guys portraits.

I finished editing all of the pictures that I have taken so far. I also added a watermark to every picture, which took forever. I first created a png of my water mark so that when I applied it to my images you would only see the text. I then opened all of the pictures up in photoshop (15 images at a time in order to not overwhelm photoshop). I chose place embedded and chose the png and resized it to look correct on the photo. Then for most of them I turned down the opacity of the watermark so it was not as visible. After doing that to every single picture I put them into my library on Wix and added them where I needed them.

Editing Wix

When I first started with Wix i was having a lot of problems getting the photos to fit correctly. When I put them into the grid at first it would cut off the top of a lot of the pictures. I then found that if I use Wix Pro Gallery (which is actually free) then it will change the boxes in order to fit the images correctly.

Senior project update

 This week:

   I started off with my site on Wix, however I soon found out that this was not the best option for what I needed. The reason being that if I wanted to code the way that I wanted I would have to pay for the premium version. Otherwise I could not do any coding at all. So I decided to go with a different option. After looking at other options I decided that unfortunately WordPress was the best option. My dad, who owns his own database, is allowing me to set up my website on his database so it's free to me.

  While all of that was happening I created a watermark for all of my images and also did a couple more shoots to get more content. 

Senior Project

The start:

   It took me a long time to try and figure out what I wanted to do for my senior project. Then I decided to just do something I love and add something new to it that I am not as familiar with. So I decided on doing a site of my photography. As an added I will be trying new and different ways to display and transition the images in the site. I will do this using JavaScript, css and html.

Getting started:

   I started off by setting up a whole bunch of photoshoots with different people in different locations in order to get the content for my site. Then today I created my Wix site. I am now starting to edit the template so that it works the way I need it to.

G.E.R.A

    We were given some random items. The items that I got was, Graphite, Eagle, RA, and 500. We then were asked to create a company or business using those things that we got.

   After I ton of thought and some just bad ideas I finally came up with the business name: Graphite Eagle Rescue and Advancement Center. I decided that it was going to be a company that rescued and helped the rare "Graphite Eagle", an organization that helps over 500 eagles a year. The next part of this was to create a logo. I found this part very difficult because I am always wanting to make things very detailed. however when it comes to a logo you can't make it really detailed because all that detail will be lost in resizing and the logo will end up looking squished and to crowded.The first few logos that I designed I made that mistake. 

   I first started with the idea of having just the circle with GERA in the middle. But then I thought about how it would be really cool to have wings in the logo. Then I thought about the purpose of GERA, which was to rescue the eagles then release them into a protected environment when they are better. So I decided to do two wings around the circle. One being all broken up and hurt looking and the other wing being healed and beautiful, to represent how we save them and help them get better. So I started to create some wings. I did really like the wings that I made, but soon realized they were to detailed.

  I then started to mess around with trying to make the logo more simple. As well as play around with that circle again. I then found that if I merged the circle and the wings then I could put an outer glow

on it and it looked pretty cool. I thought it kind of looked like a stencil was used and then spray painted on top and I really liked the look of it. Also the benefit of this was that I could make the GERA bigger than I could with he others. I then played around with different colors as the outer glow.
   I had pretty much had my mind set with this design (to the right) but then I went to create the business card and realized that the glow just did not good when it was shrunken so I went back and played with just the circle logo.
 

   I found that these three were the ones that I really liked the most. I decided on the circle with the grey background because the black seemed like too much and the white background seemed a little difficult to read.
   Now that I had decided on the logo that I wanted it was time to create the business card, stationary, envelope, app icon, and a sign on a building. This was actually pretty easy. I just used the logo and brought it into each item. I ended up really liking how they turned out. If I had more time however I would have tried to make the sign on the building look better.

Finished products:

"Steal like an artist"

"Steal like an artist" by Austin Kleon is a helpful little book giving advice about being an artist and being creative. It starts off by talking about how there are no new "original" ideas in the world. Therefore it is okay to take something from the past an breathe new life into it. Now as some read this they may think it is wrong, and dishonest. While yes if you take someone else's work and then put your name on it changing nothing about it, that is dishonest. However that is not what Austin is talking about. He is talking about taking a piece of art or an idea and using it as inspiration, putting your own spin on it, combining it with another piece of work. Another good piece of advice that Austin gave in this book was to always have some sort of piece of paper with you. You never know what might inspire you as you go through your day or walking around or shopping for toilet paper. And when you see it you don't want to forget how it inspired you or what ideas you start to get because of it. So it is always a good idea to have something with you so that you can just sketch those ideas down and save them for later to work on more. This book is filled with many great pieces of advice that will open the eyes to many about how to be creative.

Project Proposal

I got... Number: 500, Animal: Eagle, Letters: R A, Mineral: Graphite.

    My company name will be Graphite Eagle Rescue and Advancement Center (G.E.R.A. Center).
Our mission here at the G.E.R.A. Center is to rescue the endangered Graphite Eagle. Little is known about this majestic animal. We rescue these Eagles from dangerous situations such as hunters and broken homes. We then help them heal and get better, while learning about their mysterious ways. Then once they are better we release them into a protected environment where they can live safely. We rescue and help over 500 Graphite Eagles. We hope that through our organization we can help bring awareness to the people about these beautiful birds and hopefully bring a dying species back to a thriving species.

eravensonline.net/students/585abc18/WebClass1617.html

How to edit copy in Wordpress

When you first log in you should get to this screen:

Then go to the tap that says "Pages" 

 

 

 

 

Then find the page that you want to edit the copy on.

 

For this example I am going to edit the "from Miss Leigh" page. Click edit.

 

It will then bring you here (below). You can edit the text here. You can also change how the text is laid out and how things are bolded and things like that.

---

To edit an images size, link, or placement

First click on the image and an option for where you want the image will come up as well as a little
pencil, which is what you will click on in order to make more advanced changes (caption, size, link)

When you click the little pencil icon it will bring you to this page where you can edit the image. When you are finished push update. 

---

To add an image, pdf, etc.

Click "Add Media" and it will lead you to this page.

if the image is already uploaded to wordpress then you would just choose that here and click insert into page. However if it isn't then click "Upload files"

From here you would select your file from your computer or wherever you have it and again just choose insert into page.

When you are finished with all of the edits you would like to make push the "Update" button.

To edit these items:

back at the beginning when you first log on go to "appearance" then "widgets"

   

you will come to this screen

each of these things is a "home widget" so click on the one you want and then click on "text" and you can edit what they say in there. Then when you are finished choose "save".

How to edit and add posts to the blog

Back at that first page again choose the posts button 

Choose the post you want and click edit. Here you can do the same things that you can do no the pages site.

To add a new entry on the blog click "Add New" under the posts button.

When you are finished with that choose either "update" or "publish"

After you have finished with all of your edits or even just want to go look at the changes so far you can click "Leigh's School of Dance" which is next to the house icon on the top left and I always refresh that page just to be sure it all loaded.

Mobile Trends

Desktop and mobile trends

   In the past four years we have seen quite a shift in the way people look at things online. One example of this is the onwravens site. Statistics taken from  the past four years show that the amount of people looking at this site on the desktop version has gone down by at least 12,000 each year. The amount of sessions on a mobile device has increasingly gone up each year, starting at 14.79% to 40.65% between 2012 and 2015. If this continues there is a good chance that mobile sessions will pass desktop sessions in the next few years.

Bounce rate

   A bounce rate is the amount of users who leave the site after looking at only one page. For this particular site the bounce rate is higher on a mobile device than on a tablet or desktop with it being in the 50 percentile. This shows the need for mobile-first designing. The amount of mobile users continues to increase however the bounce rate is now getting any lower which shows that something needs to change in order to appeal to the mobile users more.

The bigger picture

   While this information has all come from the statistics from one page. Similar statistics are showing the same thing for all over the country and the world. Studies have shown that there has been a steady increase of mobile users in the past few years. It has also been shown that the desktop has been used less. On a global range the amount of global users passed the amount of desktop users in 2015. Even google has done a study that shows that there are more smartphone users visiting their site than desktop users as of 2015.

smartinsights.com

comscore.com

www.theverge.com

   The one thing that all of these studies and statistics are showing is that mobile users are becoming more prominent and desktop users are becoming less so. This tells us as web designers that it time to start thinking about the way we are designing our websites. The question is this, is designing for the desktop version first really the best way to go about doing this? It seems that these studies are telling us that it is time to change our ways. It might just be time to begin to design for the mobile version first. However hard that might be to accept it may very soon become the reality.

Tips and examples on responsive design

abc.go.com

Keeping logo placement consistent:

Keeping the logo in the same area of the website throughout the changing screen sizes helps to keep the look of the website consistent. This website keeps the ABC logo in the upper left part of the screen throughout each screen size.

cnn.com

Focus on the most important content:

As the screen size gets smaller keeping the same amount of content would make it look to busy and crowded. So as the size gets smaller it is important to focus on the most important parts of the website, the things that the majority of people go to that site to see. This way they don't have to be scrolling and searching forever in order to find what they are looking for. Or even make them just exit out because there is just to much to look at. CNN.com does this well by taking away everything except for the biggest and newest stories and then putting everything else underneath it and under other tabs.

weatherbug.com

Scale the number of columns:

The amount of columns and the way they look is a large part of how a website looks and how it flows. Because of this it is important to keep the columns scaled correctly based on the size of the screen. If the columns are kept the same size and in the same placement in mobile as they are on a desktop, it is going to look unappealing. WeatherBug does this by scaling the boxes down and putting them below each other than next to each other.

http://espn.go.com/

Consider the number of characters per line:

As the page size gets smaller the amount of characters should get smaller accordingly. This is so that it is easy to read throughout each size. With this the font size and family also needs to be considered so that it is still readable even as it gets smaller. ESPN does this by reducing the amount of articles they have next to each other as well as how many words are in each line.

expedia.com

Switch up the menu:

A menu that works for a desktop most likely will not work for mobile. The reason being that the mobile is considerably smaller as well as the fact that you have to consider touch capabilities and different sized fingers. You also don't want the user to have to scroll a lot when looking at the menu. To fix this problem you should think about changing the menu looks. Going from a horizontal menu on a desktop to a vertical drop down menu for smaller screens.This way the menu is user friendly. Expedia.com does this well. They take their horizontal menu on their desktop and change it to a drop down for mobile.

aritzia.com

Crop images proportionally:

Cropping an images for smaller sized screens is a good way to keep the same look of the website without it being to crowded or to busy. The site Aritzia does this well by taking the original photo and cropping it so that you only see the left side of the images.

Web Design

   There are some really cool things that you can do when it comes to websites. Here I will be showing you a few different websites and the cool things that they did and how they did it using the code.

Seattle Cider Co

   There were a few really cool things that this site had that I wanted to learn how to do.

    The first thing that I thought was cool was how when the site first opened it showed the company logo as well as a large background image and at the bottom some of the tabs. Then you scroll down and the menu comes down from the top as well as the logo in the middle of the menu.

After looking very hard through the code and with a little help I was able to find that it was javascript that controlled it. It is something called window.scroll, it looks at how much you have scrolled on the page and shows the code that you have set for it.

   There was another thing that I thought was pretty cool. It was when you scroll down the site and it showed the process of making cider. When you scroll down it looks like the apples are going into the bucket and the drops go into the buckets and pipes. When looking through the code I found that it was more javascript. This javascript was one that dealt with scroll direction. It looks at which way you are scrolling and shows and hides the specific divs so that it looks like they are moving.

Parcours Canada

This site had two specific things that I liked.

   The first thing is when you hover over the image a new image of the map of that place opens in its place. When it opens it starts from the corner and seems to fold open. this is accomplished using just css. They used animation and visibility when doing this.

   The other thing was that when you hover over an image it zooms in and fades so that the text and/or logo are more visible. We have done this in class before however this was more detailed. They did this by just using transitions in the css.

 

 

 

 

Lifepointe Church

    This site has a few really cool elements. One of these is of background. At first you see a video and then when you scroll down you see text. Then you scroll down more and the next section has an image for its background and just a few words on it. Then as you keep scrolling you can see that the image doesn't move even the though the text does then you keep scrolling, more text, then a different image. This was accomplished by simply using divs and layers and making the images absolute.

Personal logo

Sketching out the ideas:

   The goal of this project was to start from scratch and come up with a new personal logo. Just like any other logo projects the beginning started off with sketches. 

   

   When I started i took some different pieces of paper and started playing around with writing my name in different styles. I then tried to see if my name or initials would create anything cool, like a shape or design. I thought of the "@" symbol. If I made a lower case "A" and  made it small enough to put inside an upper case "C" it looked very similar to the "@" symbol. I thought this might be cool because it has to do with web.

   Even though I did like the "@" symbol idea I wanted to create a few more ideas so that I had more to work with. However I seemed to hit a block. I wasn't able to come up with any ideas. One thing that helps me think because I am a creative person is to doodle and draw. So that's what I did, I doodled all over my page trying to get those creative thoughts going.

   The class then each shared each of their sketches of what they had so far. When I showed everyone mine and explained that I was having a difficult time coming up with an idea. They said that they liked the "@" symbol idea and that I should try more variations of it in different styles.

   I started to draw different variations of what I already had. Using different fonts, colors, placements, to see what looked good and what didn't.

    In the end all I had really come up with was the "@" symbol and the first letter of my name inside the second letter of my name. I really wanted to come up with another idea but the way I was going about it wasn't working so I decided to go ahead and make my two ideas in Illustrator with the hope that, that will spark something and I could come up with something really cool.

                                               Illustrator:

   I started off by doing different variations of the "@" symbol in illustrator. I then thought that maybe it would look cool if I had just my first initial and second initial and have them overlap. 

   

   I created different versions of the overlapping "A" and "C". Some with the A in front some with the C in front. I then tried making it so that they looked like they were linked together. After I got a few different versions that I liked I tried putting them in different colors to see what looked the best. I then thought of another idea.

   My new idea came when I noticed that the lower case A and the lower case C looked similar in size and shape. So I thought it would be cool to do something like having the two letters right next to each other but at an angle. So that it looked like they were the corner of a box, like Thinking outside of the box. Then I thought it might be cool to have a box at an angle right next to the A and have the C look like it is reflected. As I started to do these two ideas I began to realize that it would be harder then I thought it was going to be. I decided that with the time I had that I should just move. However the idea of the C being reflected is defiantly one that I will come back to later on because I think its a really cool idea and has the potential to be really awesome looking.

   I finally decided on one of the logos that I liked the most and played around with having it by itself and with my name. And then finally of those I chose one that I liked the most. I liked how the over lapping letters looked with my whole name under it. However as I continued to look at it I realize I really didn't like it. I thought that I could do better so I decided to go back a few steps and try again to come up with something.

   

   As I was playing around with Illustrator I came across something that looked really cool. I had found that if I put the "A" on top of the "C" and then subtracted the "A" that it left a cut out of it in the "C". I thought that was really cool.

   I began to play around with that more and liked it the more I did it. I then got inspiration from a logo that my dad had done and tried putting my two letters inside a box. I then overlapped the letters and deleted the box. I then played around with the size of the two letters, how much they overlapped, which letter was in front of the other, and finally the colors.

   Finally I had come to a logo that I was happy with. I learned during this project that if you keep doing different variations of the same thing that it can spark a new idea. I also learned that the same design can take on a whole different look just by changing the color or the font.

 

 

   I wasn't able to work a ton on the final logo because I had started over and gotten stuck for so long. But it taught me to just keep at it and don't over think things when it comes to creativity sometimes the answer is right there.