My three favorite features of the ThemeShaper WordPress Theme

A must-read is the article The ThemeShaper WordPress Theme Tutorial: 2nd Edition. This second edition includes updated code samples that draw from the Underscores (_s) starter theme, as well as new lessons and new tools. In only 16 individual lessons, this tutorial will show you how to build a WordPress Theme from scratch – one that is both powerful and up-to-date.

After completing this tutorial your finished theme will include the following features:

  • A well-organized, modular file structure
  • All the search-engine optimization you’ll really need
  • Google-supported Microformat markup
  • Valid and logical semantic markup structure than can be used to create ANY layout
  • Smart default CSS layouts
  • Localization support: translation-ready mark-up and an RTL stylesheet
  • Dynamic body, post, and comment classes
  • Separated trackbacks and threaded comments
  • Two widget areas: the first one with default widgets, and the second coded to disappear when it’s empty
  • Support for the Aside Post Format (after the tutorial, you’ll easily be able to add support for more post formats)
  • A Custom Menu, Flexible Custom Header Image, and a Custom Background
  • Simple responsive styling, including a lightweight navigation menu for mobile devices
  • And all the typical WordPress stuff you expect from a theme

By the way, my favorite three are…

– A well-organized, modular file structure – important for finding files later!

Valid and logical semantic markup structure that can be used to create any layout – again, for future edits!

– Simple responsive styling, including a lightweight navigation menu for mobile devices – because responsive styling is the current trend – especially a nav menu that works like a champ on mobile devices!

Applied Gestalt – Exercise 3

 

 

 

 

 

 

This exercise was to choose a logo from a website and analyze it like the “Applied Gestalt” analysis in our textbook Layout: Where to Put Your Visual & Type for Impact. I chose the Eight logo (shown above) to use for this analysis.

A little background first on what is the Gestalt Theory. A group of German psychologists were studying the way the human brain perceives objects and discovered that the brain subconsciously and automatically simplifies, arranges, and orders the objects the eyes see. Consequently, specific patterns of perception emerged from their research and became known as the Gestalt Laws. In our textbook, four of these laws are discussed that are related to design – Proximity, Similarity, Continuity, and Closure. Let’s use these terms to analyze our logo:

1. Proximity – We perceive objects that are close together as belonging to the same group. We notice in our logo that all elements are in close proximity; they are clumped together. Our brain perceives these objects as a the word Eight.

2. Similarity – Our minds group things with similar properties such as color and shape. Our logo has similar shapes in each of the letters composing the word Eight. Also, all the letter components are of the same color – black.

3. Continuity – Our minds will continue an ending pattern beyond its ending points. Applying this concept adds a sense of direction and movement to the word Eight. Our eyes read the word and do not focus on individual shapes that comprise the logo.

4. Closure – We mentally fill in the gaps in order to complete a perceived shape. In the logo example, we see the letters E-I-G-H-T, even though the letters are actually numeral eights, even though none of the numbers are outlined. Our brains mentally close the gaps and allow us to read the incomplete numeral eights as letters forming the word Eight.

For more information on how to use the Gestalt principle in web design, check out this link:

http://graphicdesignjunction.com/2013/05/how-to-use-the-gestalt-principle-in-your-web-design-projects/

Exercise 4: Page 68

This exercise required finding web sites that break the typical grid layout. I found that each of the sites, listed below, rely heavily on some pretty fantastic graphic-impactful artwork!  I believe that is what makes them successful, even though they break the grid.

In the five examples below that they each:

1. Capture your attention.

2. Control your eye flow.
(to some degree, perhaps not as strongly in some cases as a more structured grid-designed website)

3. Evoke an emotion from the visitor to their site.

4. Rely heavily on graphics to get their message across and convey information.

Check them out for yourself and see if you think they are successful
despite breaking the rule of the grid:

http://www.cottonseedoiltour.com/

http://www.thebuildingworks.com.au/

http://www.pointofe.com/

http://www.teamgreenadventures.com/

http://www.seymourpowell.com/flash/#/

 

 

 

Mini Art School: The Elements & Principles of Design

The Seven Elements of Design:

The Seven Principles of Design:

In response to Lorelle…

On tLorelle on WordPress he popular WordPress blog website “Lorelle on WordPress”, Lorelle VanFossen wrote a series of Prove It! Campaign articles, including “Prove It: What Makes You Trust a Website?” (You can read the entirety of the article here:   http://lorelle.wordpress.com/2012/02/06/prove-it-what-makes-you-trust-a-website/.)

In this article, she discusses some of the reasons why some may find a website to be untrustworthy. These include too many ads, little or no original content, no clear indication of the site’s purpose, looks spammy, or the most curious reason – “you just know”.

So, what makes you trust a website? According to various studies on the subject, a website has less than a second to make a good first impression to avoid what is referred to as “back button syndrome”. This is where people exit a site within seconds of landing on it. Sometimes though a site isn’t really “shady”, but rather just presenting their content the wrong way. This is where the trust triggers come into play. So, how do you build in these “trust triggers” into your website?

First let’s find out what are trust triggers. Trust triggers are elements that help people know that their site can be trusted, such as a logo that conveys a clear, professional message or use of comments (or a comment counter) as an indicator that others trust the site enough to interact with it. An example of a great “trust trigger” is scorecards – such as subscriber, follower, or reader numbers.

So now let’s discuss some reasons a customer might not trust your web site. Is your site guilty of any of these faux-pas (listed on Lorelle’s site)?

  • Written like a brochure.
  • Littered with typos.
  • Lacks clear differentiation from others.
  • Uses the royal “we” too much.
  • Not up-to-date.
  • Hard to navigate.
  • Uses too much jargon.
  • Looks like a template.
  • No About Page.
  • No physical address or easy to find contact information.
  • No third-party endorsements or testimonials.

This brings us to what does make a website “trustworthy”.  According to Lorelle, B.J. Fogg, a researcher at Stanford University, who researched the process of identifying what makes a website credible suggested…

“People quickly evaluate a site by visual design alone. When designing your site, pay attention to layout, typography, images, consistency issues, and more. Of course, not all sites gain credibility by looking like IBM. The visual design should match the site’s purpose.

To increase the credibility impact of a website, find what elements your target audience interprets most favorably and make those elements most prominent.”

Another study by Southampton University, found that easy to find information, easy to read descriptions, and coherent and simple layout, navigation, and design are important reasons why one site might be chosen over another.

“For a site to be trusted it has to convey the idea that there is a team of real, locally based people who have taken the trouble to make it easy for you to do business with them and who are there on the end of a phone to sort problems out once they’ve happened.

Anything clever or that gets in the way of this is at best not relevant and at worst actually gives a contrary impression. That’s not to say that people don’t appreciate elegant use of technology – they just don’t want it pushed into their faces.”

In Lorelle’s post, she says Google describes a high quality site as one that inspires trust:

“Our advice for publishers continues to be to focus on delivering the best possible user experience on your websites and not to focus too much on what they think are Google’s current ranking algorithms or signals…Search is a complicated and evolving art and science, so rather than focusing on specific algorithmic tweaks, we encourage you to focus on delivering the best possible experience for users. Our site quality algorithms are aimed at helping people find “high-quality” sites by reducing the rankings of low-quality content.”

Another noteworthy recommendation from Lorelle’s blog post is to focus on natural, organic growth. Develop a body of work that is valuable and unique and tailored towards people not search engines, as well as built around human-centered design and usability.

So what are some tips for improving credibility and building trust for your website? Lorelle suggests:

  • Make it easy to know you and your blog through your About Page.
  • Make it easy to verify the accuracy of any and all claims by citing sources and linking to them.
  • Make it easy to contact you.
  • Make it easy to navigate and find things.
  • Build your site around your content not around the design.
  • Choose advertising methods and placement carefully and purposefully.
  • Update your content regularly or hide dates.
  • Keep all visuals (photographs, graphics, and video) clean and professional, not template or stock photography.
  • Make testimonials and trackbacks easy to see and find.
  • Watch spelling, grammar, and typos no matter how insignificant they may seem.
  • Keep comments clean from spam and time-wasting comments.
  • Make the site look like it has the answers someone is seeking.

In conclusion, the three “take-away’s” from Lorelle’s article:

  1. True trust comes from a company’s actual behavior towards customer’s experiences over an extended set of encounters. It’s hard to build and easy to lose: a single violation of trust can destroy years of slowly accumulated credibility.
  2. Reduce advertising to a minimum, update content regularly, make it easy to use, a clear and specific about page, and verify your claims.
  3. Don’t ramble on about how great you are. Tell the customer what you can do for them. Use the word “you” instead of “we” or “I” as much as possible. Ideally, your website should tell visitors what you’ve got, what it will do for them, and what they need to do next.

If you are interested in checking out the entire Lorelle Prove It! Series…

http://lorelle.wordpress.com/2011/12/29/campaign-2011-prove-it/
http://lorelle.wordpress.com/2012/01/02/prove-it-its-starts-with-defining-who-you-are/

http://lorelle.wordpress.com/2012/01/16/prove-it-kym-huynh-exposed/

http://lorelle.wordpress.com/2012/02/06/prove-it-what-makes-you-trust-a-website/

 

Is 2013 going to be the year of Responsive Web Design?

According to the article published recently on Mashable (http://mashable.com/2012/12/11/responsive-web-design/), the new year of 2013 is going to be the year of responsive web design. And those that choose not to consider updating their sites to be responsive, may find themselves behind the curve.

What exactly is responsive web design?

Responsive web design term is related to the concept of developing a website design in a manner that helps the lay out to get changed according to the user’s computer screen resolution. More precisely, the concept allows for an advanced 4 column layout 1292 pixels wide, on a 1025 pixel  width screen, that auto-simplifies into 2 columns. Also, it suitably fixes on the smartphone and computer tablet screen. This particular designing technique is call “responsive web design”. Source: http://designmodo.com/responsive-design-examples/#ixzz2GpoYGiby

Here is a website example (http://foodsense.is/) that shows how a responsive website is viewed on a variety of browser sizes. Notice how the website content “resizes” for desktop, tablet, and smartphone viewing.

Example of Responsive Web Design: http://foodsense.is/

Example of Responsive Web Design: http://foodsense.is/

In order to accommodate reading on a variety of devices, Mashable itself just redesigned their site to be “responsive” – when you resize the browser, the content also resizes.

So, how does responsive web design work?

According to Mashable, responsive design “…uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen.”

In the case of Mashable, they also detect the type of device and change the site’s behavior accordingly. “On touch devices, for instance, we enable swiping between columns. (Technically, detecting device functionalities may be referred to as “adaptive design,” rather than “responsive,” but increasingly both approaches are used in tandem.)”

So, to solve having to design for each anticipated viewing device website content may be accessed on, it seems the solution is to use responsive web design. Why should we consider it?

One reason the article states for considering redesigning a pre-existing site to be “responsive” in nature, or designing a new one in responsive format, is the huge increase in tablet sales – projected to exceed 100 million this year. Additionally, smartphones are a popular purchase now. According to Mashable, 30% of their traffic is now mobile. They anticipate that by the end of 2013 that this percentage will rise to over 50%!

Designing with mobile use in mind makes websites more accessible to more users and also saves time in rebuilding sites specifically for each anticipated method of viewing them. Mashable says that more data is suggesting that the mobile web is key, that 60% of tablet users prefer reading news on the mobile web than even via an app. So, even though companies should offer apps, it might be worth also having a great mobile website also. Source:  http://www.journalism.org/analysis_report/future_mobile_news

A reputable authority on this subject, Ethan Marcotte, says in his book Responsive Web Design (Mashable also quotes from in their article): “Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things.’”

The benefits are obvious: You build a website once, and it works seamlessly across thousands of different screens.

“Given the rapid adoption of tablets and smartphones — and the fact that users currently seem to prefer reading their news on the mobile web rather than in apps — I think it’s inevitable that 2013 will be the year that responsive design takes off. For publishers, it offers the simplest way to reach readers across multiple devices. For users, it ensures a great experience on every screen.”  (http://mashable.com/2012/12/11/responsive-web-design/)

So as we begin the new year, now is the time to really consider using responsive web design in future website development.

For more great examples and best practices in responsive web design, see http://designmodo.com/responsive-design-examples/

Spa Layout Project

This week’s project was to design a one page website layout for either a spa or landscaping company.
I chose to design a spa layout for my website.

I started by reading the Website Design Process posted on our online classroom website, then proceeded to get some inspiration for my website. Here are some of the links I found for “inspiration”.
(I would love to visit the Hershey Chocolate Spa someday – first link listed below!)

http://www.chocolatespa.com/index.php
http://www.goldendoor.com/about/default-en.html

http://www.westglowresortandspa.com/

http://www.beachspabnb.com/

Next, I “Googled” what a “day spa” is, just to define what type of spa I wanted for my fictitious website. Here is what I found on Wikipedia:

Definition: A day spa is a business which provides a variety of services for the purpose of improving health, beauty and relaxation through personal care treatments such as massages and facials. It is different from a beauty salon in that it contains facilities like sauna, pool, steam room and whirlpool that guests may use in addition to their treatment. (http://en.wikipedia.org/wiki/Day_spa)

It was time now to find my CSS reset code: http://meyerweb.com/eric/tools/css/reset/

And to locate a CSS-only (no javascript) tutorial to help me create an impressive navigation/menu with hover states. Here is the link to the one I chose: http://www.webdesignerdepot.com/2012/08/create-a-stunning-menu-in-css3/

Now it was time to get into the upfront development work. I searched for photos on Photospin, downloading spa images that I might find useful on my website. I then:

1. Came up with a focus statement:

Green Leaf Spa is a nature-inspired women-exclusive day spa, featuring the latest in organic spa treatments. Our main focus is creating a relaxing and rejuvenating spa experience by pampering the needs of our patrons. All of our spa treatments are 100% organic and all products are cruelty free/not tested on animals.

2. Came up with a website goal:

To educate future customers on the variety of services offered by our day spa, emphasizing a nature-inspired ambience, 100% organic and cruelty-free products.

2. Developed a “mood board” using the Style Tiles template, which you can download from this website: http://styletil.es/.

Green Leaf Day Spa mood board

Green Leaf Day Spa Style Tile

3. Wrote a concept statement explaining the look and feel I chose:

The Green Leaf Day Spa client requested a clean, nature-based, calm, peaceful, yet modern web concept. Colors include a soft gray, bark brown, spa blue, and bright leaf green taken from their logo. Fonts will include a simple Franklin-Gothic font for main headers and body content. Sub-headers will be a script font, such as Amienne. Textures may include rocks, water, soft swirls, and leaves. Other nature-inspired photos will be used within the site depicting spa products and services.

4. Finally, developed a wireframe (using PowerPoint) for the home page of my spa website.

Green Leaf Day Spa wireframe

Green Leaf Day Spa wireframe

5. The completed website!

This has been challenging for me! I’ve been working on these HTML and CSS files for some time now.
I tried to incorporate one of the layout techniques we studied earlier in the course, choosing the layout technique from “In Search of The Holy Grail” – see website here: http://www.alistapart.com/articles/holygrail.

Click here to see the Green Leaf Day Spa website!

 

What Makes a Design Look Professional?

The Non-Designer's Design Book coverAs I wrap up my first class “Internet Technology Fundamentals” on my journey of learning web design and development, I’ve decided to choose to review one of the books we covered in the course entitled “The Non-Designer’s Design Book” by Robin Williams.

This book is specifically written for the visual novice on basic design and typographic principles. The book is divided into three sections: Design Principles, Designing With Type, and Extras.

The first section of the book, Design Principles, defines the four basic principles of design, which are: Contrast, Repetition, Alignment, and Proximity.

Within this first section of the book is also the topic of using Color, such as color relationships, shades and tints, warm colors vs. cool colors, and “how to begin to choose”.

The design principles section of the book concludes with extra tips and tricks, such as tips for designing web sites. Of the four design principles stated above, the most important for a web site is “repetition”. Another important factor of good web design is “clarity/readability”.

Ben Lind website

Great use of typography in web design:
benlind.com

The second section of the book covers the topic of Typography (Designing With Type). One of our final projects for this course is “Typography as Art Site”. Later I will be posting this project to my Portfolio page, so stay tuned! (At the end of this post, I’ve included a list of great articles on the subject of typography in web design as well as a list of web links to examples of websites that used typography as the main element of design.)

As the author states, just as in life when there is more than one of any particular thing, a dynamic relationship is established. Likewise, on a page of type usually there is more than one element. So a relationship is established within these dynamics on the page that can either be concordant, conflicting, or contrasting. Of the three, contrast is the most fun as it attracts our attention, thus making it the most effective. One of the ways to add contrast in design is with type.

Austin East Ciders website

Great use of contrasts in type:
www.austineastciders.com

So, with that conclusion on type relationships, the author leads us into the next chapter on Categories of Type, which she focuses on six groups: Oldstyle, Modern, Slab serif, Sans serif, Script, and Decorative. Learning these board categories of type is important because having visual awareness of letterforms gives designers the power to create interesting type combinations.

Next is a chapter on Type Contrasts, the final chapter on typography in the book. Meyers discusses several type contrasts, including size, weight, structure, form, direction, and color. In conclusion she says “don’t be a wimp”, as most effective type layouts utilize more than one of the contrasting possibilities.

To wrap up the book, the final section includes a chapter on “Does it Make Sense”, a chapter solely to answers to quizzes (which are sprinkled throughout the book), and a great final chapter on “Typefaces in this Book”.

Made By Cool website

madebycool.com

She sums up “the process” with the following thoughts on where to start when you design or re-design something:

  1. Start with a focal point.
  2. Group your information.
  3. Create and maintain strong alignments.
  4. Create a repetition.
  5. Use strong contrasts.

Learn the basics of design and type by getting your copy of “The Non-Designer’s Design Book” by Robin Williams – a great place to start!

Articles on Typography:

One More Time: Typography Is The Foundation Of Web Design
http://www.smashingmagazine.com/2012/07/24/one-more-time-typography-is-the-foundation-of-web-design/

30+ Gorgeous Typography Based Sites
http://designshack.net/articles/typography/30-gorgeous-typography-based-sites/

21 Examples of Inspiring Typography in Web Design
http://webdesignledger.com/inspiration/21-examples-of-inspiring-typography-in-web-design

Get Inspired: 40+ Websites with Beautiful Typography
http://www.1stwebdesigner.com/inspiration/typography-inspiration/

Examples of typographical-designed websites:

http://www.linksla.com/
http://undesign.it/
http://lifeingreenville.com/
http://www.austineastciders.com/
http://viljamis.com/
http://madebycool.com/
http://benlind.com/

Toast and Jam… a web student’s blog.

toaster with smiley toast popping out

 The fear of failure…

As we wrapped up our second week of class, our first project was underway – designing our first website and now putting our first blog post out on it! As I mulled over the pre-determined five questions we had to choose from to “blog about”, the one that stuck out the most was this question: “What is your biggest fear about this course?”

The answer for me: The fear of failing! I really, really want to know this stuff! I want to learn the nuts and bolts of web development and all aspects of web design I can and build a solid portfolio by the time I complete the program. However, as many a working adult knows, it’s hard! Time robbers appear almost as soon as you resolve that you are going to do this.  It takes commitment and resolution to focus after putting in a day at work and still balance the duties of personal life and other commitments.

So, I “Googled” for some pointers to keep me on the straight and narrow since my first two weeks into the course were less than stellar in pacing myself. I found myself struggling at the end of the week when course materials were due to complete the week’s work. Of all the pointers I read about – the one that I chose to post here was…

“Remind yourself constantly of what studying will mean for you. Have a very clear reason to do the course. If your reason to do it is weak, your motivation to sit down and study will suffer.”

Amen! So going forward when I feel defeat or even ponder throwing in the towel and saying “I can’t….”, I’m going to remind myself what the end result is I am wanting to achieve – I want to be able to do this stuff in “real life”.

A great resource that we watched in Week 1 of our class can be found on http://www.lynda.com entitled Web Design Fundamentals” by James Williamson. I will go to these videos often during my progression through my web classes, as they contain great information for anyone wishing to delve into the world as a website builder. In this video, Williamson asks the question:

“Do I want or need to be a professional web designer?… Being a professional web designer is not a part-time endeavor… Technical skills and knowledge required by professional web designers takes as much commitment, if not more, than other professions.”

I want to be a professional web designer and developer! This is my motivation to hang in there. And with anything worth doing, it is worth doing well!

And just for inspiration…

http://www.smashingmagazine.com/2009/07/30/50-fresh-portfolio-websites-for-your-inspiration/