Google's Web Fonts

Today, (well actually yesterday but THAT DOESNT MATTER) we have been given a SOCK

 WEB FONT! A google web font site, to be precise. These are a wonderful thing made by the omnipotent Google for use by anyone. It's incredibly easy to use, too. The first step is obvious; you need to go to the Google Web Font site. Afterwards, browse through and find fonts you want. For my jabberwocky site, I selected "Eater" because it fit my desire for a spooky font for the poem. 

After that I wanted to find a font that would look fancy for the author and for the other background info. Both of these looked good and fit the bill for what I needed, but I picked the top font, "Spirax" over the bottom one, "Cinzel" because Jabberwocky originates from a book that features the same character Alice from Alice in Wonderland; since the movie adaption was by Disney, I figured a more fantastical font was in need. 

After you've picked the fonts you want, you click "use" (bottom-right) and then after a few more selection you are able to see how the font looks in paragraph or heading form. Something important to note is that if you go too crazy with fonts and font variety, you could cause your web page to load slower then it should, which might inconvenience your users (see my previous blog posts on preventing thinking).

Once you are happy, you need to pick how you put the fonts into your website; I personally prefer "@import" (totally not because I don't know how the other ones work)

In the CSS file for your website, simply add the code it gives you to the top and then save and check it out- boom! Fonts that aren't Times/Comic Sans/Wingdings/Papyrus! Like magic!

CSS Zen Garden Jabberwocky

The above piece of paper is my design for the CSS Zen Garden website. We were given a HTML file and a blank CSS file with some suggestions mapped out and spaces for us too use. We, without editing ANY of the HTML, had to create a 100% original interpretation of how the site should look. This was to help us learn the power of CSS, and that you don't need to use HTML to make a good website.

Thanks to the use of images and fluid width, I feel like I replicated my ideas very well (compared to how complicated it usually goes). With Photoshop and Illustrator used to make the background, I also used them to create the title and the lightning bolt for effect. In my mind I thought I would be able to seperate the content and the title with the bolt, and put the extra links and info next to the author, but it didn't quite work out that way. At the same time I think it works better how it came out.

One major thing I learned doing this project, and its hard to believe I didn't know about this before but somehow I didn't know that you could input images wherever you wanted through background images and/or AP Divs. I had always been under the impression that the only way to put in images was through HTML, which gave me a little concern when I started but thank goodness I found out. In fact, the background, hilariously enough, the hardest part of the project, but not because of the background images concept. I spent 1.5 periods in class (and even some outside of class! I was silly determined to see it work) just working on the background and it's respective images. There were too many things I wanted to put in and I spent so much time trying to make them all fit and have no border and all this other nonsense. 

All in all, the entire project took me about 6 class periods to create and I am very satisfied with the end result. It has a few hilarious issues with browser width, but otherwise it's good. In fact, you don't need to take my word for it, check it out yourself on my index!

Billbords 101

With chapter 3 of "Don't make me think!" by Steve Krug, we read about websites needing to be very simplistic and easy to navigate, because most users spend far less then even 30 seconds on a website. They skim and look for exactly what they are looking for. This means that as a web designer you need to be able to design a website that easily accomplishes that, with clearly defining the important things and what can be clickable and what can't through use of color and space. We needed to afterward find websites that succeeded or did not succeed in these categories.

Site with excessive BG noise/busy-ness 

Wikipedia is a big-name website, but it's front page is rather a mess. There are clearly defined sections, yes, but there are so many different links and background colors that it's hard to spot what you want.

Site with low competing noise

Rather a given, Google's homepage is extremely minimalistic to the point that there are less then 15 different items on the homepage, including the different words. For someone brand spankin new to the internet it might be hard to decipher what there is to do.

Site without obvious buttons/links

Amazon's homepage lacks links at all. Each of the pictures when you hover over them turn out to be links, but according to the book the user shouldn't have to guess at what links are. 

Site with obvious clickable stuff

Going back to wikipedia, it's very clear on what you can click on and what you can't, granted this is because they use a very basic web theme but nonetheless it's true and it works. Each link is colored in default blue, compared to the black of the default text and the white/light RGB that the rest of the page has.

Site not split definably

With "coolmath-games", there are no borders that separate the games from the ads. There is a thin line that separates everything from the header and the menu, but then there is a random divider between the advertisement and what looks like another game. In general it seems like there wasn't a lot of thought into organization, but that might just be me being harsh.

Site well split

With different colors separating the text and buttons from the header advertisement, the Overkill Games website is split well without having to use any graphics or space. It's simple but more original then most websites around.

Site with good conventions (common themes)

The walmart homepage uses both the generic sidebar, header menu, search bar with a magnifying glass AND a shopping cart to organize and help users. Maybe they arent used better then other websites but it's pretty clear they use them more then any other website.

Site with good hierarchies

Going right back to walmart again, they use visual hierarchies well to organize their different sections for products.

Unnecessary Thinking

After completing the "paint place", we have been given packets of reading material from "Don't Make Me Think" by Steve Krug. We needed to read associated chapters and compare modern websites to them. Chapter 1 was focused 100% on the title- "don't make me think". With poorly designed websites, the user should be able to use a website from the get-go without having to have any explaining. If you don't succeed, your user has to ask him/herself things that shouldn't be thought about, such as "where is the search bar" or "where is ___". With this in mind we needed to hunt down websites and explain what may cause those questions on said website.

My supposed questions for the Olathe East homepage:

Where do I find a list of teachers? There isn't anything clearly defined for finding out how to contact a teacher that one may have missing work for, or a question.

 Where is the search bar? There is no clearly defined search area, and so if a user can't find what they are looking for they won't even be able to find the thing that could help them find what they are looking for.

My supposed questions for the Olathe East homepage: 

Where is a link to other sports/the school website? Having a website dedicated to their football is great, but what if the user didn't mean for this sport? There isn't any clear method of reaching the main OE site, nor any of their other athletics. 

 Is that magnifying glass a button?  In the top right their header features a random magnifying glass. Typical this signifies a search function, but there is no clear text box to search in, and the magnifying glass itself looks faded and almost like a background object.

My supposed questions for the Olathe East library homepage: 

Where is a link to the school website? Once again, there is an Olathe East affiliated website with no clear link for their school website. At least there is a clearly defined search bar, and it stands out from the rest of the site.

They have a twitter button, but what about Facebook? This is more of a personal gripe, but I am a user too, after all! They feature a button for e-mail and twitter, but there isn't anything for Facebook, which in my experience is more widely used then twitter is. If you have social media buttons, it's at this point a standard to include all of the main stream media options.

Paint Place

The Paint Place

For the past couple of weeks, I have been hard at work on a large project. In Wordpress, we needed to make our own website from scratch using a fresh download of Wordpress, using a customized theme and an original logo.

The Front Page

Logo 

For my logo, I started with this.

When I was brainstorming for ideas for a logo, I knew we needed to make a formal-ish logo for a formal-ish website, so I instinctively thought of Times as a font. But, everyone else does the same thing, and thus there are thousands of "formal" things that are in times new roman- it's become rather generic. So I figured I could make it unique from everything else while keeping the font. I thought about using paint chips, and viola, I'm using times new roman without being a copycat. From there, after peer suggestions, I re-aligned the words, removed the background, and came up with the final product.

Theme 

For my theme, I looked on wordpress for themes that used dark colors (to bring the color out of the logo) and when I found something I was happy with I created a child theme with it- in simple terms, I set-up my theme to have specific parts overwritten even if the theme is updated, without messing with the original theme. With a few modifications in order, including a new header (featuring the logo) and a new background (again, to bring the color out) I am very happy with the final product.

Front Page

Our front page needed to feature various posts for tips and tricks with painting (which was a problem for me since I didn't really know how painting needed any instructions) and a main post that was "sticky", or non-changing. With some (a lot of) obvious corner cutting, I managed to achieve the requirements.

The Pages

Store Location 

In a lapse of any ideas, I decided to go with humor rather then legitimate content. There isn't much else to say about this page other than I don't really know what else I could have put in here.

Brands 

For brands, rather then create multiple custom brands I decided to go with more humor and rely on some obvious fake and terrible clip art for "brands". With more copying and pasting for the illusion of legit content, of course.

Colors 

I didn't (and still don't) know how to name all the various colors of paint you could buy from anywhere, so I screen capped the page for HTML colors on w3schools for paints.

Inspiration 

The (regrettably) only page with some full, legit, content, I used stock photo websites featured in my previous blog post to grab pictures of rooms and file them into categories and galleries for display.

There are quite a few more galleries actually featured, but I think putting all of them here would be rather redundant, as they all follow the template presented above. I got the idea for doing "inspiration" like this from various other paint store websites with similar ideas, but without the formatting/amount of pictures. I think this works perfect for the tools I have available to me.

Learning Center

For the learning center I, to be perfectly honest, copied word for word content from a webpage for "painting for beginners" and then set all of the text as a link to that website (evading copyright laws like a boss) with some silly clip-art pictures added for effect. This way I also had pictures on each page of the website.

Conclusion 

(whoa! professional-y! scary!!)

Overall, if you ignore all of the fake content, I feel very happy and proud of what I have created. Something I will definitely take away from this is that I spent so much time on the webpages with the most original content and it really doesn't look like a lot of time was spent, so I should focus on perhaps making it half fake and half real for class projects that require content. This way I spend far less time and all pages look like they have an equal amount of content. If I had to make something similar I think I would focus more on finding a good theme to customize, and then do far more customization on it, to make it nice and unique. I would use a similar idea for the logo though; specifically, putting it in the middle of a header image and then putting complimentary graphics on the sides. I think that the content took the longest, and the theme was the quickest to get and adjust to make it better.

Wordpress

Wordpress is a wonderful program that helps you easily create and manage a blog-style website. It's open-source, based on PHP and is a content management system.

It has 2 websites, wordpress.com and wordpress.org. The com website is for actually getting Wordpress, and then the org website is for downloading themes, plugins and other additions for your Wordpress.

There are a LOT of websites that use Wordpress- as of January 2015 it's used by 23.3% of the top 10 million websites. In fact, it is used by well known websites such as Target, Glad, CNN, People and even Star Wars!

Something to note is that Wordpress is not the only content management system that websites use. Alternatives include things like PHPWiki, or Enonic.







Sources:
https://wordpress.org/hosting/
http://w3techs.com/technologies/overview/content_management/all/

Photo Sites Project

I am now beginning my junior year in the e-Comm program. As such, I am now only participating in Web, which means that nothing will be from animation or video. So assume unless otherwise stated that everything from now on until forever thats on this blog was made in my Web class.

With that, our first project of the year was a simple "Photo Sites" project. We were given 4 websites and told to pick a topic and search for it on each site, then find the best photos and decide on a few opinions:
The website with the Best Photo, Most Photos, Easiest to Use/Navigate, & Easiest to Download. Then finally, a pro/con list with 1 for each site.

The best photos I found from each site are as follows.

Morguefile

Pexels

Unsplash

Gratisography did not have a picture of a barrel or anything similar.

This is my pro/con list, in table form.

WEBSITE	PROS	CONS
Morguefile	Lists specs of the picture right next to the picture	Color pallette is kind of odd, although it makes sense with the "morgue" it doesn't make sense with the background being white.
Pexels	Lots and lots of categories; if you don’t know what you are looking for specifically its easy to find related pictures.	Only 1 photo found, most advertisments
Gratisography	It’s “search engine” Takes me to better website with a search bar.	Few pictures, no in-house search feature
Unsplash	Very clean looking, very simple	Pictures are very large and are listed 1 at a time

Finally, my opinions are:

Which site had the best photo?

I feel like Pexels has the best because of it’s even lighting, but it still has a variety of colors from the windows and bricks.

Which site had the most photos?

Morguefile had the most pictures that I was looking for. All others had 1-3.

Which site was easiest to use and/or navigate?

Unsplash was a site I found easiest to use, and I got what I wanted and was done just like that. It was the most simplistic and had no screen clutter, featuring the pictures, which is exactly what the site is meant for.

Which site was easiest to download from?

Pexels was easiest to download from because it was the only site that prompted me where to save the file, and in the format I wanted.