Ai

User Testing

Nicholas — Wed, 16 Jun 2010 21:40:23 +0000

The user testing on this project was an ongoing process as the website was built. I had several testers on the website after the functionality was set up but before the design was even started. As I designed and built interface elements they would be able to tell me if it worked or not. By the time the website was in its release version it had all ready been trouble shooted. At this time the only issue I am aware of is the formatting of the side navigation.

The major issue I encountered was post previews repeating since the websites home page calls post loops in several areas, this issue was resolved by storing all the post IDs and having the page check if the ID is in storage, if the post is in storage it will not be called.

Minor issues were mainly color contrast issues, mainly on links. And another was creating navigation for the profile page, I had to make it clear that the top bar is the main profile navigation and the bar below it is a sub navigation to the subject chosen. I solved this by having a current state on the main navigation button being the same color as the sub navigation.

The website is still currently being tested, no additional issues have been found yet, but they are fixed with in the same day as they are found.

Study Guide

Nicholas — Wed, 16 Jun 2010 21:11:14 +0000

Section I: Overview describing the project goals and target audience

Nicholas — Tue, 15 Jun 2010 19:00:33 +0000

The target audience for this project will be “gamers,” mainly males between the ages of 16-30. A gamer is someone who plays video games, as quoted from “Historically, the term “gamer” usually referred to someone who played role-playing games and war games. More recently, the term has grown to include players of video games. While the term nominally includes those who do not necessarily consider themselves to be gamers (i.e., casual gamers), ^[1] it is commonly used to identify those who spend much of their leisure time playing or learning about different games.” My target is both causally and hardcore (committed) and anyone in between, my main target is the type of person who plays multi-player games online. I am targeting this type of gamer because the project will be based on a social network, and hopefully something like a meeting place where gamers can find each other.

The websites content will be coming almost entirely from its users, I will be creating a platform so the key users may blog and share news or give reviews about games they have played, and there will be a sub-blog where the average user can share reviews and news to the community as well. In this sense the website will continually grow as content is added by all of its members, so there is no set amount of content.

The website will be have five static web pages; home, activity, members, groups, and forums, these five pages are all for the social network aspect of the site. The site will also use categories for the blog posts, and the web site will automatically create new pages to house the content as categories are created. Because this website is so dynamic nothing can be set in stone.

The challenges I can foresee is issues with security, since this website will be housing massive amounts of information I must make sure it can not be hacked or broken. Also I see a problem creating the standard users blog and must find a way to make it work.

Section II: Information architecture and content

Nicholas — Tue, 15 Jun 2010 18:00:40 +0000

Flow Chart

The site will have to be user friend as the user will be the one to enter the content, I have devised several methods for the site to be automated when content is added, for example if an image or image gallery is added light box will be applied to the images. Another issue I needed to solve was keeping options like changing the post category and comment control off for lower member levels, for this problem I just hid the options.

The content is automatically organized by it’s category, and the container is extremely flexible to fit any size of content as far as height, if an object is wider than the content area light box will be employed to display the content fully.

Section III: Technical plan

Nicholas — Tue, 15 Jun 2010 17:00:51 +0000

The navigation design will mainly focus on the social network aspect of the site, the main focus of the home page may be on video game news and article, but at its core this site is about social networking. This main navigation will be placed at the top of the page and be accompanied by a search bar. The links in this navigation will be; home, activity, members, groups, and forums.

The secondary navigation will be placed on the side bar; this navigation will not have a set height, because it will be filled dynamically based on categories. The user will have control over the categories and can create new categories freely. The categories can have sub-categories and the navigation will reflect that.

The website will use Wordpress as its platform with the Buddypress plug-in, Buddypress will give the use of many social network features. With Buddypress, users will be able to interact with each other and create their own personal space on the web page.

Since the content is almost all user generated, a numeric naming convention is used to keep file names clean and uniform, this will also keep permalinks “pretty”. The user will still be able to choose the posts or files title. The websites directory structure is mainly based on categories and sub-categories, and is very fluid.

May 11 – Start learning Buddypress, and have an understanding by the 18^th.
May 18 – Install Wordpress and Buddypress fresh, decided on features to use.
May 25 – Design informational (back end) structure, and design content (front end) structure.
June 1 – Create graphical skin and apply.
June 8 – User testing, and fix problems and tweak minor design elements.
June 15 – Enter beta, allow user registration and entry of new content from users.

Section IV: Visuals

Nicholas — Tue, 15 Jun 2010 13:25:46 +0000

I have posted all of my images and designs that I have used, and referenced through the process of creating this project. You won’t find many visuals as far as graphics mainly because the site uses just css accompanied by very few graphics to attain its look.

There was only three graphics used in the final design, all so small they could not be discerned unless repeated. The header was one of these images, its only 10 pixels wide and 175 in height, then its coded to repeat horizontally in the css, this makes the final page smaller in file size and faster to load. The other images were the main navigation buttons, done in the same way, 1 pixel wide and 40 high. And the third image was the very faint background in the content area on 6 pixels in width and height.

Above are images of my process, I start with a rough sketch to get the idea of how the web site will be structured, at this point I don’t plan for design just how information would be set out. My second step is to actually build the rough sketch in CSS and HTML, at this point I begin to design the graphical look of the site, trying multiple elements and graphics until I find something I like, keeping the color scheme in mind of course. And lastly, after user opinions and a second personal revaluation I’ll either redesign the site entirely or just do touch ups, in this case it was almost an entire overhaul as far as the graphics and design went.

What is Buddypress?

Nicholas — Tue, 15 Jun 2010 01:23:33 +0000

Buddypress is a Wordpress plug-in that turns your Wordpress website into a social network platform, giving you many options to suit what ever your needs may be. For example out of the box you have features like rich profiles with the ability for users to make friends with other users and follow that users posts and comments, you can also send private messages to other users. Another notable feature is groups, groups allow users to form smaller communities with in the social network, and if set up, each group can have its own forum system.

In my following tutorials I will demonstrate how to install, set up, and skin Budypress. If you have not installed Wordpress please do that before continuing. If you need help you can follow my Wordpress installation tutorial.

Project Proposal

Nicholas — Sat, 12 Jun 2010 17:18:18 +0000

For my final I plan to learn how to make a website using the tools Wordpress and Buddypress, from this experience I will then share what I learned by writing a step by step explanation of how to copy my results.

Buddypress is a plug-in for Wordpress that allows the blogger platform to be turned into a social network platform. The tricky part is learning how to code and theme a Buddypress install; this will be my main focus. I will also focus on learning how to manipulate the features to better suit me and my sites needs, out of the box Buddypress gives the user many features, but for me some features give the user to much power and will have to be removed. I have also found that Buddypress does not use privacy settings so I will need to solve that issue as well.

My goal is to have learned how to work with Buddypress fully, and have a working and full functioning social network built by the end of class. I feel that my final product should be a finished professional project to show that I fully grasp the knowledge I set out to learn, and share with others.

Midterm: Installing Wordpress

Nicholas — Tue, 08 Jun 2010 21:55:28 +0000

Installing WordPress to your server is a very simple process, and most web hosts actually have an auto install option in the control panel. If your host doesn’t give you the easy option, here is a small tutorial on installing WordPress manually, which is almost as easy.

First you will have to create a database for Wordpress on your server, make sure you also are an MySQL user with full privileges to modify the database.
Next download and extract/unzip the WordPress package, it can be downloaded here http://wordpress.org/download/.
Find the file named wp-config-sample.php and rename it to wp-config.php.
Open wp-config.php with Dreamweaver or any text editing program, but not a word processor like Mirosoft Word. Enter your database information, save and close the file. Also scroll down to line 57, and change “wp_” to something else like “example_”. This will change the name of your tables and make your Wordpress more secure since your not using default names.
If you would like WordPress to be on the root of your domain, copy the contents of the WordPress folder to your server. If you would like WordPress to be in a sub-directory, rename the WordPress folder to the desired sub-directory name and copy the folder to your server.
Run the installation script by going to “example.com/wp-admin/install.php” or if its in a sub-directory “example.com/sub-directory/wp-admin/install.php”.

That’s all there is to it, WordPress is now installed.

My WordPress Tool Box

Nicholas — Mon, 03 May 2010 04:12:49 +0000

The installation was only the first part, and there is alot more ahead. Here are a few tools I use for maintenance and theme creation.

MAMP – A program that creates a local server enviroment on Mac OS X. This is a must have tool when designing Wordpress themes, it makes previewing your changes and faster and much easier than uploading to a server after every change. MAMP’s install also comes with a widget to easily turn the local server on and off. I recommend the free version, MAMP Pro is overkill when it comes to Wordpress.
- Download – http://www.mamp.info/en/mamp/index.html.
  ( For windows users try WAMP, I have used it a few times and works just as well as MAMP. – http://www.wampserver.com/en/ ).
Sequel Pro – This tool makes creating, viewing, and editing databases a breeze. No longer do you have to log into your servers c-panel. When it comes to Wordpress this tool may only be used once when Wordpress is being installed, but its a great tool that should be in every web designers tool box.
- Download – http://www.sequelpro.com/ ( Mac OS X 10.5 – 10.6 ).
Whiteboard Framework – Another must have for a Wordpress theme designer. This is a very simple blank Wordpress theme, giving you a framework to build upon.
- Download – http://whiteboardframework.com/.
Lorem Ipsum Wordpress Template – I wouldn’t call this one a must have, but it defiantly makes designing easier. Its an XML sheet filled Wordpress content; adding posts, comments, pages, links, and tags. All you need to do is import it. This template was created Liz Andrade, a web designer in Seatle. Check out her blog, she posts some awesome tips and tricks.
- Download – http://dl.dropbox.com/u/843912/WP_lorem.xml