Summary. Yesterday I designed a website for Kuriko Mizuno. She wanted a simple but elegant website without a huge investment of time, technical overhead, or cost. Using WordPress.com it took less than 30 minutes to create an attractive site that was functional and easy to use. By explaining what I’m doing as I work, the website creation process is partly a tutorial in how to use WordPress.
Site Structure. For the basic framework and structure of the site, I decided to use the Twenty Eleven WordPress Theme because I trust it to be stable and adhere to industry standards.
Site Design. Despite its popularity and wide use, the Twenty Eleven theme can be personalized with a unique and artistic custom header graphic. So, the next few steps describe how I created a custom look to the site with a special header image.
Creating the Header – Step 1. The dimensions of the Twenty Eleven header image are 1000×288 (meaning 1000 pixels wide by 288 pixels tall). My favorite tool for creating headers is the Apple Keynote software. I like it because as I resize graphics, or use the Apple selection tool (Shift + Alt/Option + 4) the size is displayed in pixels. I usually copy an existing header and drop it into Keynote to get a quick idea of the size image I’m working toward. When finished, it’s important to leave Keynote in 100% view, then use the selection tool to capture an image that is precisely 1000×288 that gets saved to your desktop. For this project, it seemed appropriate to find an image that represented Japan. A quick Google search of images on Japan as a keyword provided a very crisp photo of the Kinkaku-ji Temple in Kyoto, Japan. We agreed this would be a great image for the header because it was wide enough (1366 x 768 pixels) to be cropped down to 1000×288.
Creating the Header – Step 2. A nice feature of the Twenty Eleven theme is that it’s easy to disable the text above the header that just unnecessarily takes up valuable space on the screen. The header can convey the name of the website instead. The setting for this is found in the WordPress Dashboard under Appearance > Header. A challenge of having text over a picture is finding just the right font color. Yet, often, the changing colors of a background make it difficult to see overlaid text. So, I decided to use the Apple image selection tool to grab an image of some paper found in Keynote Theme Sedona under the Blank Master Slide. This becomes like a strip of tissue paper that text can be placed on top of. Then, in Keynote, by changing the transparency (opacity) to 81%, it’s still possible to see the picture underneath this tissue paper, yet at the same time it enhances the readability of the website name. Transparent layering (like using drop shadows) helps create an additional artistic dimensionality to a web page.
Creating the Header – Step 3. I wanted to have the site name in the header written in a nice font that fit the picture. Herculanum was a perfect fit with the text color in dark green and a drop shadow to add depth, the site name floated nicely on top of the translucent paper effect. The Herculanum font was already included free in the Apple computer, but I noticed it selling for about $30 online (at Fonts.com).
Creating Pages. It seemed like a good idea to keep the site simple initially with just some basic pages: About, News Feed, and Contact.
About and/or Home Pages. In the past, I’ve setup websites using a dedicated Home page and a separate About page. Yet, depending on the type of site, the Home page and About page can be redundant. For a personal website, the home page is a way of introducing yourself, as is the About page. So, consolidating these makes sense. For a larger organization or business website, it makes sense to have separate Home and About pages, with the Home page being like a main announcements board and the About page telling a bit about the organization or company. With this website, an About page seemed to be enough. In the WordPress Dashboard under Settings > Reading it’s possible to define the About page (or Home page) as the page people first see when they visit the site. So, I set the About page as the primary landing page. I also created a graphic to look like a signature. This I did in Keynote using the Mistral font, then I rotated it 8.7 degrees to give it a handwritten look. I added a brush stroke underneath it.
Sidebar Template. The Twenty Eleven theme comes with two page layout templates in addition to the Default Template. These provide alternative page layouts. The Showcase Template takes advantage of the full page width by removing the right column and filling the entire page width with article content. The Sidebar Template retains the right column on the page which is a more typical page layout.
News Feed. When blogs first became popular, it was common to have the primary introductory page of a site be the latest blog entries — like a random stream of consciousness presentation of ideas. As explained above, it seems more practical to have the landing page of a website be an introductory page to offer a welcome message to visitors. Most people seeking information, are interested in specific topics. For this reason, categories and keywords (tags) are assigned to articles, and the articles (also called posts) are searchable by those categories and keywords. This helps people find what they are seeking. For those wanting to simply keep up with the latest postings on a website, the News Feed page is a useful tool. To create a News Feed page, simply create a page called News Feed, and then in Settings > Reading, assign the News Feed page as the page to display posts.
First Articles. For archival reasons, I like to create a page that documents the launch of a new site. So, I usually rename the Hello World page and use it for this purpose. With this website, I wanted to create an additional article. There had been a news story about Kuriko in a local newspaper that I wanted to include an excerpt from as an article. So, I added that. In such cases, I usually change the posting/publishing date of the post to be the same as when the original news story was. This maintains the site timeline integrity.
Custom Menu. The automatic menu system of WordPress has some advantages. It causes the navigation of a website to dynamically and automatically present the available pages of a website. If pages are added, removed, or renamed, the navigation automatically reflects this. However, the custom menu provides greater control. I used the custom menu for this site and created an additional menu option that links directly to the University of Iowa Japanese Language program.
Right Column Widgets. Most websites have a column of content to the right of the article or main page content. For this website, the content I selected for the right column was a subscription option at the top, then a listing of recent articles, and finally an RSS feed providing a live stream of articles from a Japanese Language Learning website.
Bottom of Page Widgets. The WordPress Twenty Ten theme has space for four widgets at the bottom of the page. With the Twenty Eleven theme, there are three widget spaces. The widgets seem to be smart enough to notice how much space is available. For example, with this site, I used a single calendar widget and it spread across the entire page bottom.
Social Network Integration. Something I really like about WordPress.com is that social network integration is built-in. Some sites enable sharing with a single button, but I like to have each link and logo immediately identifiable. So, instead of having them hidden under a single share button, I have the individually showing.
Site Design at Launch. Below is an image of the site design at the time of launch. As with many sites created by web designers, the site content and design can change over time – particularly if the site owner is trained and empowered to manage the site on their own.
Click the image below to visit the site.
