Week 4

The website is under way! I've created the home page, and immediately inputted content, by now the home page is ready to be edited using css! Next week, I'll be stylizing and finishing the homepage.

Obviously, I've already added just the baseline css, things like div ids, centering text, and whatnot, but next week, I plan to add color, a font, box outlines, and everything else in terms of css next week!
See you guys then~

Week 3

This week I further researched symbols and how they're implemented, I also began constructing more in depth of what the website would like, the color scheme, font, etc. So far, as for the color scheme, I plan to use Light Steel Blue (#b0c4de), and I've drafted 2 color schemes, using Color Scheme Designer, I was able to easily create a complementary and analogical color scheme for Light Steel Blue, these are the two-


                            


I'm leaning more towards the complementary one, using the secondary color as a header and footer, then using the darker blue as a menu background, Light Steel Blue as the background for the site, and the lighter blue as the background of content divs, but that's just concept for now. As for the font, I think I'm going to go with either;
Trebuchet or Verdana
I'll likely stick with Trebuchet, but Verdana may go better with the color scheme.

Week 2

This week I researched famous fonts that were used historically, and compiled a list of 6, with this I started on forming guidelines for what my font chart will look like, I also expanded on ideas for website, and begun writing content for the website. So far, the website will have the following pages:
History, Symbols, Uses, and a general Home page

In the image below, you can see the list I've compiles, and the content I've begun writing-

From here, I will continue to compile content and information, next week I plan on creating the site and inputting what I had.

Portfolio part 1 reflection

For the past few weeks, I've been working on a portfolio site for myself as a web designer, I wasn't restricted on any aspect on the design, I just had to make it about me, which turns out to be a lot harder than it seems. Making the design was easy, I just made it the way I wanted it, and if I didn't lie something, I took it out. That was one of the benefits of making a website about me, If I didn't want something, then why keep it? It was my website, after all!

As a pre-assignment to this project, we went through a packet about making web design portfolios, and did some activities to practice out personal branding skills. We did things like formulate a catchy yet professional tagline, find a font that's appropriate for you and for your portfolio, and think about professional displays of past works for client reference. After we honed those skills, we put them to the test by creating logos and taglines, then shortly after that, we started the website!

Throughout my portfolio design, I've had to restart from scratch twice, that's two times where my design broke, or just went too far in the wrong direction, to where I just had to delete and try again, and through those two mess-ups, I learned that not everything I want to do will happen, or will even be possible, so instead of trying to do things in a bunch of different directions, I just focussed on the main aspects that I needed, and added cool features later.

Overall, this project was probably the most difficult I've faces, but I've learned so much about myself, and about writing myself already, and it isn't over yet.

Melody Baker - College Q&A

We had a senior from last year, Melody Baker, come back to our web class for a visit. While she was here, we got to hear what her college experience has been like so far, and get to ask questions we were instructed to create before we started. Here are the 5 questions that were the most helpful to me

1. How much did was your total cost before scholarships?
 -Tuition - $8500
 -Room & Board: $5000
 -Books & Other: $2500
 -Total: $16000

2. Are your professors willing to provide help outside of class?
 Most of them are, but if they aren't, then there is a study hall on campus in the library where you can get help from other students/tutors.

3. How many classes would you need to take per week for a 4-year degree?
 15 credit hours/5 classes per week.

4. What have the dorms been like?
 The dorm rooms are split into girls/boys, and both are on 1 floor. The RA (Room Advisor) organize events for special holidays, or to help out with mid-term papers/tests.

5. Any general advice for college?
 Study a lot, do your homework on time, plan your weeks out, and don't drink on Sundays.

Lapis Lazuli co.

Lapis Lazuli co.

Introduction-

Lapis Lazuli is a company based off of 4 random things i pulled out of a hat, the 4 "things" I got were Elephant. Lapis Lazuli, 72, and the letters X and O. I used these various things, and based the name, design, and function of a fictional business. The business I decided on would be names "Lapis Lazuli est. 1972", or just "Lapis Lazuli", LL is a fashion and beauty retail chain, their slogan is simply "XOXO".

Logo process-

The actual design for the logo went through many phases, as you can see below, I first started with the idea of having the elephant head facing forward, with either teardrops, or an X and an O for eyes, and the trunk in the shape of an L

Right off of the bat, I didn't like the drops, so I stopped using them, and 2 eyes seemed like too much, so I instead decided to move the X into the O, I also wanted to see what the trunk would look like if it were straight, since the L-shape looks creepy and unnatural

I tried out some alternate colors

After taking a good look at these, I turned to other elephant based logos for direction, and I ended up finding that all of them has the elephant head turned sideways, this is when I made a big decision, and that decision is what brought me into the final stage of designing, and my last draft was my official logo, and for the font to go with it, I chose Lao Sangam MN

Commercial Use-

After I decided on my final logo and font, I went to make commercial uses for it, things like signs, business cards, billboards, a mobile app, envelopes, and even stationery. Each one of those uses the same elephant symbol, but they use different parts of the text logo

Conclusion-

After weeks of work, revisions, and sampling, and more revisions, I learned that it takes more than just a few designs to complete a logo, I had to do more than just look at it myself, I had to get the critique of my peers. And to go even further, I had to turn to the internet to look at other ideas, only to realize that I need to start from scratch, just so i could turn the head of an elephant sideways. All in all, I learned valuable lessons from this design project, and I'm happy with the final product of my efforts.

Steal like a artist

"Steal Like an Artist" 

  Summary-

This first chapter of "Steal Like an Artist" gave a brief explanation on the phrase "steal like an artist," it explains that there is no such thing as an original idea, every creative thought is built upon even the smallest base. It tells you to embrace stealing, to use it to your advantage, and gives many tips on stealing from art, only without directly stealing.

  Reflection-

In my opinion, yes, this book tells the truth, it is right that no idea is original, and that creativity truly comes from works that others have created. This chapter talks about following a "family tree," or a history of interests by artists to draw where their creativity, and repeating that process as far back as you can. Although I agree with the message of "Nothing is original," I really do not agree with some of the other statements this book makes. I do not agree with the suggestion that you should google before asking, because a lot of questions are too specific for google, and you should really ask the people you know before asking google. I also don't agree with the statement that you should be looking for ideas to "steal" from, I really don't like this because while it is good to draw creativity from other works, it is unhealthy to instead attempt to base everything directly off of another person's work.

  Conclusion-

This chapter has a good meaning, nothing is truly original. But, later parts of the chapter are pretty pretentious, and honestly bad advice. You should stress the human resources, rather than dismiss them, and instead see google as a more valuable source of information. Overall, you should probably just read the first few pages, and just skip the rest.

Project Proposal

The mineral, number, animal, and letters I received were:

Lapis Lazuli
Elephant
O, X
72

I used these 4 things to brainstorm 5 different businesses, and what they would function as. In the end, the business I went with was; Lapis Lazuli XOXO est.1972.

LLXOXO's logo is a small, detailed elephant, and their main products are focused around beauty. They sell their own lines of clothes, for men and women, and beauty products, all for a low price! LLXOXO's most popular product line is called 'Pinq', and is targeted towards women, this line includes perfumes, makeup accessories, shirts, dresses, sweatpants, and other similar items. LLXOXO's main customers are teenagers, and young adults, they are very popular, and keep up with current trends within those subcultures.

Senior and Junior class list!

My web design class:

Please check out my new website! It's my first senior project! I made a site compiling facts on all of the juniors and seniors in web design! Link below:

http://eravensonline.net/students/942mrp24/projects/Junior%20project/Junior.html

Glyphs panel - Photoshop CC

Intro-

  I looked on Lynda.com for a simple new feature from Photoshop C6 to Photoshop CC, and what I found was described as "long-awaited," and "added at last." This new feature is called the "Glyphs Panel," this window can be found under the "Window" tab, but it can also be found under "Type>Panels>Glyphs Panel," as seen below.

Uses-

  The image I am using Is just a picture I took of a blank table, the words on the left and right are "ありがとう！," and "Thanks!", "ありがとう" means "thanks" in Japanese! (There is  a difference difference between the word "thanks," and the phrase "thank you" in Japanese) 

  What the Glyphs Panel is, is a panel that allows you to see the entire set of symbols within a font. The reason I chose Japanese was to show the difference between the few english characters there are, and the many Japanese characters that are in it's language system (That's over 5000 characters!), It also goes to show how much is access-able within a font, so if you can't make it on your keyboard, you can just look through the Glyphs Panel to get any symbol that's in the font without copy-pasting symbols that aren't access-able on the keyboard.

EOY Reflection

My E-comm junior year experience

This yea was hectic in and outside of school. This year in web, what I learned wasn't a handful of new concepts (except for PHP), but rather, ways to build upon the main concepts of web, and make my websites look more appealing to the eye, and the way I learned it was through the help of Mr. Olson, but also a good deal of self-directive teaching. This is pivotal because before this I haven't been very self-driven, and that definitely showed at the beginning of the year, though I was strong at the concepts that I learned, and that's why this class has been very important to my life and personality, the way I learn as a whole.

 This year, I definitely wish I actually tried first quarter, and there are some other instances in the year that I wish I was a little more focused, but it is because of these mistakes that I learn to make my senior year in E-comm a much better experience, to try my hardest and use my mistakes as stepping stones! In conclusion, Junior year was about what I put in, and how I got it out, about self-directive, but also not being afraid to ask others for help, this year was great, and I just hoe next year will be even better.

Extreme homepage makeover websites

 Here are the 2 websites i chose to base this project off of:

The one on the left is Mahaffie Elementary, the one on the right it Taco Via

I chose to base my final off of these 2 sites because the Mahaffie site has a nice, sleek design, and Taco Via's site has a simple, single column design that i think Mahaffie Elementary would benefit from.

Here are links to both sites:
Mahaffie
Taco Via

6 tips for mobile sites

1) Take advantage of white space

Don't be afraid of white space, embrace it. When you have no room for text over an image, try putting it below or above in that extra white space you have! White space can actually make your website look better. A good example can be seen below.

2) Keep logo placement consistent

No matter what, when making a website optimized for mobile, you always keep your logo in the same spot, and don't change it! If you keep your logo in the same spot, people who saw your desktop site won't feel lost, it gives them a sense of comfortability, remember, people don't like change! You can see an example of this below.

3) Remove excess visuals

When making a website for mobile, you try to keep the essential information, and functions on the website on the page. If there is just too much, don't be afraid to remove excess visuals, this is to ensure that your page is less crowded, and people would feel more comfortable visiting it. Look to the example below for reference.

4) Consider finger size

When making buttons and just other general things to click on in your website, make sure they are big enough for fingers to tap on, and users wont get frustrated and just leave the page. some people have a very hard time with these things, and since they are the consumer, you must accommodate to them. You can see this in the example below.

5) Focus on the more important content

This rule should be a given. When cutting content of any kind from your website, make sure you keep the essentials, this rule also goes for when you are creating content for your site. Look to the example below.

6) Scale font size

This rule is also a fair given. When scaling down to mobile screen size, make absolute sure you scale the font size correctly, also just try to generally avoid making your font size too big to see, or to small to see. This is demonstrated in the example below.

Looking into websites

w3schools

The try it demo

In w3schools, you can try out a certain html element of your choosing for yourself! it's very helpful and I wondered how it worked, but it's just a combination of iframes used to simulate html editing, and the javascript is what changes the result in the next box. The javascript element used is called "submitTryit", as seen on the image to the left.

The top navigation bar

The navigation bar is a vital tool for helping users browse websites, and is seen on almost any informational website. I chose  to feature w3school's because it has common organization and drop menus

You can see what they look like below!

Creating My Logo

Creating My Logo

In the beginning
As you can see from my sketches, I immediately chose yellow to be the base color for the logo, and I had blue be the complimenting color. I wanted to base the actual design of of the letter M, being the first letter in my first name. So at first, I went with a crown design, and making 2 diamond shape holes that would be negative space. My next idea was to make a flag on a pole, by turning the M upside-down, and having the letter P, the first letter of my lat name, be featured as the symbol of the flag. For my final design, I stepped away from the idea of basing the design around my name, and I put a small yellow flag on the top of a hill, with a green gradient representing land. Although in the end I chose to go with the crown, I came close to choosing the small hill design, it was nice, simple, and looked cute, though I felt there were too many colors when you add the brown for the flagpole, and the green to represent the land. As for the other flag design, I didn't go with it because the upside-down M wouldn't  be noticed, and it would end up looking like a weird flag with a P on it.

The Ultimate Choice

I ultimately chose the sketch up the hill, and crown based designs in Illustrator, and would choose from there, I also slightly altered the designs, like making the gems in the crown blue, making the flag a bit taller, and making the border on the hill green to fit in better. In the end, I chose the crown to represent my brand since it was small, not too wide, not too tall, and could be easily shrunk and expanded. My problems with the hill design was that it felt too big for what it was, and it was too wide to shrink or expend to put on a business card, or banner. I think this final decision for the Crown logo was a well thought out choice that definitely helped me in the end.

Google fonts; A very useful tool when designing websites

When using fonts, you try to pick fonts fitting to whatever design you are making. Normally, though, you don't have that many preinstalled fonts in whatever program you may use, and installing fonts is a huge pain, so instead you use css to add options for fonts, while you can't use too many since the more you have, the more the browser has to load. This is known as Google Fonts, a program created by google to greatly expand the number and types of fonts available to web designers when creating a site. As you can see below, a site I created called Jabberwocky with the font Times New Roman, Verdana, and Arial.

Next, we have the same site, just using a font called Vollkorn.

See how much better it looks just from changing the font? Next, the font used is called Libre Baskerville.

In conclusion, fonts do so much to a website, and they can either make or break a website, a website can be much worse if it was all inTimes New Roman, or even Comic Sans. So make sure you use this incredibly useful tool when in need of new, creative fonts!

Best Stock Images

  The theme I chose for my stock images was, well, birds. Simple enough, I suppose. I love birds, and apparently tons of photographers do too. It'd be kinda weird just to sell un-retouched photographs of birds.

-On which site did you find the best photo?

  The best quality photo was found on morguefile, because of the many options I had.

-On which site did you find the most photos?

  Like I said in my last answer, morguefile had the most selections out of any site.

-Which site was easiest to to search and navigate?

  I would say pexels, the search bar didn't take any effort to find the search bar, and it wasn't a chore just selecting an image, unlike some other sites.

-Which site was easiest for downloading a photo?

  Any of them, I just right-click and select "Save image as..."

-Morguefile:

pro- Easy to navigate, and gives many results.

con- Half of those results are poor quality.

-Pexels:

pro- Search bar is east to find.

con- Doesn't give very many results.

-Gratisography:

pro- Fun, stylish homepage design.

con- Hard to navigate.

-Unsplash:

pro- Great, interactive site layout, especially for selecting photos.

con- Doesn't give many results.

-Which site will be your "go-to" first choice the next time you need a photo? Why?

  My fist chouce is definitely morguefiles, the site's easy to navigate, it gives plenty of results, and it gives off nice quality photos.

-My best photos

Pexels

Gratisography

Morguefiles

Unsplash

Vitamilk

This is my product, Vitamilk. Vitamilk is a special milk that repairs your broken body, and it's filled with great nutrients. Making the label had it's troubles, but the real challenge was getting the 3d revolve to work correctly. After countless events of trial and error, I finally got my label, and die-line to fit correctly on my bottle, and box respectively.

As you can see, this is my creative process, first thing's first I had to find my color scheme, Mine is made of basically the color scheme of a cow. I also created my logo, hand drawn. For what font I used, I first wrote out what my logo should look like, then i went in to find a font that resembles it the most.









In the end, I am greatly satisfied with how Vitamilk turned out.

emagine experience

eMAGINE

emagine was so much fun! I got to hang out with my friends, get to look at these amazing entries that were all made by just students! And not to mention, we got free food after the awards. All in all, this was a great celebration of students who have these fascinating talents, and I'm happy I was there to see it!!

Desktop and mobile statistics

      Over the years, the percentage of desktop sessions on our very own onwravens website has gone down 24% since the year 2013, all the while he percentage of mobile sessions has gone up about 20%, so as you can see, mobile browsers are being used more heavily, and is beginning to overthrow desktop. 

Bounce rate    

Bounce rate is the rate at which people enter a site, and leave without visiting other pages on the site, this is most used to determine a websites effectiveness, and appeal of a website. on the onwravens site the bounce rate has gone up only about 1% over the past 2 years, it can be estimated that the bounce rate is rising along with the percentage of mobile sessions.

  Above this text is a chart made in 2010 to try to predict what mobile and desktop user statistics in 2015, and while it's not exactly correct, it is vaguely right in its predictions.