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.