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.