What I learned about wordpress themes!

The first thing that I learned about wordpress themes is what happens behind the scenes.  In order for the the code to work the server its placed on must run the wordpress service.  This allows for certain function calls to be recognized, such as bloginfo().  Once you determine where the theme will run, the code is fairly simple.  Using a combination of html, css, and php you can create a theme fairly easily.   In fact it really on requires two files, the style.css and the inde.php file.

The style.css file is a basic style sheet file that will control the overall look and feel of the theme.  The one thing that I am not clear on from reading several articles on the subject.  Its not really clear how you actually add the styles to the index.php files to control the visual look of the theme.  I presume that you would just wrap each portion of the page in <div> tags and use headers in the css file.

The index.php file is basically the core file and would be what us displayed in the browser.  In this file it will check check to see if there are any posts to be displayed.  It does this by using one of the most important part of the code for the theme, the WordPress Loop.  This loop fills out all the appropriate information for each article, such as the title, the time it was posted, and the number of comments.  This file would also be where we would include the header and footer files for the theme. 

In the header file will be displayed on the top of every page within wordpress theme.  This would include the opening portion of the html code for the theme, including the reference to style.css.  It also includes a list of links that would be used for persistent navigation on each page.  Also included would in the index file would be the footer file.

At the bottom of the page would be the footer portion the theme.  This is a simple file that may include the theme author, as well as the blog information, and the copyright info.  This would be persistent on each page just as the header file would.  The css, index.php, header.php, and footer.php are the files that would be included in the simplest of of themes. 

More complicated themes may include more files then the standard theme.  One file that may be included is a php file for the sidebar.  This file can be used to allow widgets to be used in the theme.  Another file that may be included would another php file for comments.  This allows other users to post comments regarding a post.  In order to keep the post and comments listed and easy to search for you can also include a archive.php file.

Once these having all of these in the correct directory on a server running the wordpress server everything should work.

Don’t Make Me Think PLEASE!

The next chapters of “Don’t Make Me Think” really deal with how to organize information on a website, how to convey information to users, omitting unnecessary information, and how to guide the user.  All of these things may seem so obvious when talking about good design but, at a glance may not be.  In chapter 3 Krug compares web surfing with looking at billboards while driving which I think is dead on.

If web surfing is like passing billboards at 70 miles an hour, how do you make them effective.  One thing is by relating the importance of things visually.  By making the important things larger on the page, grouping things visually that are grouped logically, and nesting information the designer can create a visual hierarchy.  This hierarchy will allow users to visually disect the quicker, which is the goal for billboards.  A designer can also take advantage of conventions, or common design elements, the user will automatically recognize certain aspects of the page.  A common web convention is that the site logo will also be a link to the homepage so if a designer does this the user will already know what to do without THINKING!  Conventions are useful for automatic recognition but for things not so common we can separate the page into different sections.  This will allow a user to get to where they are going a lot faster because its more obvious what area/section has what. Going one step further, if the designer makes the things that are clickable more obvious it will also help to help the decision making to a minimum.  Once we have things organized for the user we can also try to cut the noise out of the page.  Noise would be anything that is distracting for the user, such as loud backgrounds or obnoxious animated gifs.  These things take the users attention away from task at hand and cause them to have to refocus.  The overall idea of this chapter is that the designer should attempt to make things more obvious and less distracting.

In Chapter 4 the focus is how to make things more obvious.  Krug likens this to playing the childhood game of animal vegetable or mineral, which I somewhat agree with.  To me its more like paper, rock, scissors, the user is going to make split decisions and hope they are the ones that beat the site.  However just like paper, rock, scissors the user will only go 3 out of 5.  Its important then that we design the sites to show our hand if you will.  The user should not have to guess or interpret the information on the page and content should be obvious to everyone.  One way to make content easy and obvious to everyone is to get rid of everything that is unnecessary.

Omitting the needless words on a website we can reduce noise and get to the point for the user.  When I first read chapter 5 my initial question was, what is needless?  After reading I realized that this meant that just about everything was needless.  Some of the reasons we want to do this as designers is that it reduces noise on the page, makes useful content more prominent, and makes pages short and easier to scan the page.  All of these things make it much easier to get what your looking for when you are going 70 on the super highway (does anyone say that anymore?)  There are also some useful tips for what to get rid of in this chapter.  The first suggestion is not cut out the flowery happy talk that we never read on websites.  Second is to cut out all those useless instructions that no one ever reads or uses.  All of these things can make content more understandable, but what if its not what we are looking for?

That feeling of being oh so close, we have all had it right!  So what do you do if you haven’t clicked just right or the information is not what is expected?  Chapter 6 introduces the concept of breadcrumbs.  This is the idea that a website should feel somewhat like physical space, but a very large physical space.  The reason for this, is that when we browse we are almost always looking for something.  This fact makes it useful for designers to add not only an indication of where we are in the site but also a search box.  The search box will allow search dominant users to look for things quickly and efficiently. One of the main aspect of breadcrumbs is persistent navigation.  Persistent navigation is consistent throughout the site and is useful to the user in several ways.  Its will act as an anchor for the user, it tells us whats in site and how to use that information, and it also gives us confidence in the people who created the site.  This navigation should be the same on every section of the sight except the homepage, where the site logo should be more prominent, and on form pages.  There should also be separation in links to the sections of the website and the utilities, such as FAQ’s.  Just having a clear well thought navigation system can make or break a site for me, and many users, this is why we Krug devotes so much time to the subject.

Each subject in “Don’t Make Me think” is very important in web design.  The beauty of these chapters and the entire book is the relationship between the simplicity of good design, and Krug’s explanations.  Its almost as if one reiterates the other…

Skip Yowell

To say the least Skip Yowell has lead an interesting life.  Skip has climbed mountains, both metaphorically and literally.  His photos from k2 to Mt Ranier he has literally risked his life for his passion.  The most interesting part of the lecture though was how he climbed the metaphorical mountains, in his business.

Jansport started in an empty apartment above a buidling in Seattle and grew from there.  They were actually the first company to use zippers in the construction of day packs.  The zippers appealed to college students who could zip there books up in the rainy weather of Seattle.  This was the beginning of Market that Jansport still focus’s on today, college bookstores.  By expanding from that niche market and “paying attention”  to the consumer they were able to growto where they are today.  This in it self is a lesson in entrepreneurship.

What I learned most from this lecture is a true sense of business.  Skip commented on some of the challenges and success’s he had when starting Jansport.  When asked what the greatest hurrdle was he answered “financing”.  This is very useful to anyone who is thinking of starting a business or wanting to grow a business.

Diving in head first

I spent much of the weeked starting my final project which is going to be a homepage for my wife and I.  My plan is to come up with something that is professional enough I can post it too a resume.  As I started the project, I realized I have a lot more to learn.  What I have done so far is a lot of CSS so that I could get some more practive with it.  I like the way the page is turning out so far.  I need to work on my linke and my main image that is taking FOREVER to load.

“Don’t make me think” chapters 1-2

1. The title of the book is “Don’t Make Me Think?” Why does the author feel it important that web designers don’t make their audience think? What is the big deal anyway, especially on things that take only a millisecond to figure out? What effect does forcing web users to puzzle over how the site works have on the user? What competitive advantage does a usable website have over sites that are less usable?

  Its important to make things easy for the user, because every decision that we have to make adds up.  As users we tend to make decisions quickly and every decision, even milliseconds, adds up and can cause us to leave the site.
  Forcing the user to puzzle over how the site works causes the user to struggle when attempting to complete a task.  If a user cannot complete the task they came to the sight for they will leave.  However if the user can accomplish the task successfully, and quickly, they will return to the sight.  Almost more important is that the user will find the sight userful and be satisfied.  Having a satisfied customer is the best way to gain a competitive advantage.

2. Tell of an example not related to web design where you have personally made the decision to “satisfice.” Why did you “satisfice” instead of trying to find the best way to do it?

The best example of “Satisficing” for me is when I am driving in a big city. A lot of times I will take an exit that seems reasonable, like “downtown”, when there maybe a better direction.  I tend to satisfice in this scenario because the best or fastest route may not be clear.

For me this class was more than just a study in the visual world.  It has been a study into my world and how I function.  It was not until this class that I realized that I am a visual person.  I have always found myself drawn to, comic books, art house movies, and photography to name a few.  It is only now that I understand why.  Now that I realize this I can carry over these elements into my professional, and personal life.  For that reason I decided to create a portfolio of work that I have done outside of class and how I have implemented these principles.

PoRtFOliO

This is a design for a business card that I designed.  The business is based of making jewelry from antigue found objects, which is why I selected a serif font to portray an antigue feeling.  I also used a larger J because every part of the name used it, essentially making the type a part of the design.  I also used shape in this design, many of the jewelry pieces are made using old dominoes, which I used shape to portray hanging from the J.  The final element of design that I used in this piece is color.  I used violet and yellow which are complimentary colors, which I think really makes the color pop.

This is a photograph that I took of my muse, my wife.  The main element that I used in this photo is perspective.  The tracks disappearing in the background to a single vanishing point gives dimension to the piece.  There is also great value in the image as the buildings in the background are lighter making them look further away.  This also gives great dimension to the piece.

The next image was a logo I created for a fictional company.  I was going to use it as a header for a web page I was creating in another class but it did not end up fitting.  The main element that I used in this piece is line, the arches are made basically of thick lines that add interest to the picture.  The line in the center allows for the views eye to move from one end of the logo to the other. Using line gave the image a simple modern feel.  This is echoed in the sans-serif type that I used to add to the modern feel.  The center line also brings the eye from the beginning of the upper text to the end of the bottom text.

The next three images were used in a final version of a Web Programming project that I did.  I used them in an advertisement banner to shuffle through each image.

The first image is of again a fictional business but adds some of my personal interests in to it.  On main element in the picture is shape.  I used the elongated eclipse to, and smaller red eclipse, to indicate the shape of an olive.  I also used shape with the triangles separating the words, these are meant to be the points of toothpicks in the olive.  I used color as well, making the olive green and pimento red to make the shape recognizable.  Value is also used in the shape of the olive to give it a more 3 dimensional look.  Type would be the last element I used, using a Serif  type for the business name so it would standout.  I used a Sans-Serif font for the descriptive words to again allow for a modern feel to the advertisement.

The second image in the series is a poster for a fictional art festival in Salina.  Thick lines are used to push the viewers eye down and read the type on the side if the image.  Type is used with a capital S at the top that becomes the focal point of the piece, because it is large and bold San-Serif.  Color also plays a major roll in this picture.  Using a kind of orange red with an orange circle behind the S is an analogous color selection.

This last and simplest image I used for the banner.  Color is used in the piece but a representative way using purple and silver to allow association with Kansas Satate.  Simple Sans-serif type was used but in this case was used to simplify the entire image.  Type is also used with the K at the tope of the image, using the large K, it becomes part of the design as a whole.  Value was also used in the circle behind the K to add dimension and make the K pop off the page.

Not only can i see and use these elements in the images/designs I create I am now starting to see them all around me.

Vestal

Chapter 12

I like the idea or perspective.  I was an Enviormental Design major in another life, so its something I have done a lot of.  What has become more interesting to me now, is how this relates to real space.  The first project I did was a photo that I took from looking up my stairs.  You can see how the stairs become smaller as they go up.  I of cource changed the picture to be more interesting and tried to convey a since of creepyness.

The secound project I did was to try and do a perspective drawing like I used to do in drafting class.  I wanted to see if I could translate that to a digital medium.

 

Here are the questions from the chapter.

 

1. Linear perspective is creating objects in design that seem to be 3-dimensional. By creating objects with a width, height, and depth the objects seem more balanced in the space they are in.

    

2. In one point perspective all lines that seem to move away from the viewer, and show depth will converge at the vanishing point. The vanishing point will be just above the horizon and make the objects appear further away.

    

3. In two point perspective all lines that show length will converge at one vanishing point. At the other vanishing point, lines that form the depth of the object will converge. All lines that should be parallel should meet at the same point.

    

4. Isometric perspective differs from other perspectives because it does not use vanishing points. Any lines that are moving away from the viewer would be drawn at the same angle.

    

5. Twisted perspective is completely different than any other perspective. It is used to portray more information about the subject that you would normally see.

Words as meanings 2

I also like the idea of using type to convey a meaning of how we are all interconnected.  Language, words and type are a good way to display this because even the most primative of cultures have a way of communicating through language and type.

Words as Meanings

I wanted to make a type that portrayed the image of fire.  I liked this idea because artistically fire has lots of colors, angles and, curves that could be incorporated into to type.  I also think the image itself paired with word offers a lot of meaning and feeling.

Chapter 16

1. One family of type is Transitional type. This family is characterized by smoother transitions from different stroke thicknesses, stress put on the vertical axis of the letters, and serifs that are thicker and and less horizontal than the preceding family of modern type.

    After the transitional type family there was a period of modern type. This family has severe transitions in line thickness and feet that are skinnier and more horizontal. Modern type does however maintain the stress on the vertical axis that is found in the Transitional family

2.  Decorative or novelty type is type that is separated into is own category because it is hard to classify. This could be type that look like a children’s handwriting or balloons. These can be used on specific occasions that tie into the novelty of the type.

3.  Serifs are feet on each letter in a particular type face. Serifs were originally used on letters to mimic the chisel marks made when carving type out of stone.

4.  Sans Serif is used to describe type faces that have an absence of serifs, or feet on the letters.

5.  Kerning is the adjustment of the space between each letter in type, and is used to allow letters to be more evenly spaced. An M might have more width then a u so the kerning can be adjusted to compensate for the difference.

6.  Leading is the amount of space between each row of characters in type. Using leading can allow different type on a page to appear to belong together or be read together.

7.  Pixelation can occur when using type in new design because of curves. Any time curves are represented using digital square pixels pixalation can occur. My type faces heavily use curves so this can be an issue. This is why many times in digital design we will use modern or square, sans serif types, because they are affected less by this.