Blaze Blog

Archive For: Design

Jul1

ChickSpeak.com: A Wordpress MU Based Social Network

I recently completed my biggest project yet; a fully fledged social network aimed at female college students. The difference? It’s built on Wordpress MU.

Wordpress MU (WPMU) is basically the multi-user version of Wordpress, the popular blog/cms tool. The aim of WPMU is to allow for one installation to spawn multiple Wordpress blog instances. Basically, you can install WPMU on your server and run as many individual Wordpress instances as your box can handle.

Wordpress MU has the basics of a social network right out of the box - individual member blogs, member profiles and the ability to scale well.

Don’t Hack - Just Plug

Wordpress also has an excellent plugin API, as well as a whole host of quality pre-built plugins ready to download and activate. The key here is that I didn’t have to hack the core - I could just achieve the additional functionality needed by building dedicated plugins.

Plugins were built and used for private messaging, advanced profile management, online polls, photo management, multi-blog search and user credential management.

Not Blogs, But Member Home Pages

Member Home Page on ChickSpeak

The crucial part to the whole project was morphing Wordpress MU to stop it from generating new blog instances and instead generating new member home pages.

A member home page includes a users own personal profile front and center, their own personal “journal” as a feature of their home page, as well as private messaging functionality.

To achieve the desired change it was down to making a new Wordpress theme. The theme would have exactly the same look and feel as the core site - making it look like the new member home page was still part of the core site itself.

Within the theme, I removed the code that usually makes the blog posts front and center, and changed it to the code that outputs the users profile. The blog code was moved to the sidebar so it could still be accessed as the members “journal” feature.

Finally, the code to output the users new private messages was added to the sidebar, as well as some code to output polls, photos and other smaller bits and bobs.

A nice feature of Wordpress MU is it places member pages on a subdomain, so any members home page can be found at http://membername.chickspeak.com. A nice touch, as it’s then easy to remember the to link to your profile.

Adding Some BBPress Magic

BBPress Forums on ChickSpeak

The project also called for a fully featured discussion forum. The forum needed to work seamlessly with the site, using the same login credentials and the same look and feel. Another project called BBPress fit the bill perfectly. BBPress is a no-frills forum/bulletin board application built by the same guys (Automattic) as Wordpress. It has the same style, plugin architecture and most importantly can share the credentials data and cookie information. Perfect.

Limiting Credentials

The final step was to limit the administration functionality that a member has on their own blog. This stops them from signing up new users, deleting content they shouldn’t be, or changing the theme of their member page. I created a simple plugin that disabled the menus for these settings in the Wordpress admin interface. The pages could only be accessed by site-wide administrators if needed.

I’ve only really glazed on what I did with Wordpress MU to turn it into a fully fledged social network engine - but you get the overall idea. I’d be happy to answer anyones specific questions if you have them.

ChickSpeak is up and running over at ChickSpeak.com. Feel free to take a look when you get a chance, I’d welcome any feedback. You can also click the image thumbnails in the article to get full screenshots.

Jun21

Leopard Finder: A Close One?

By Andy in Apple, Design

Thankfully it turns out the Leopard Finder mockup I produced a couple of months ago wasn’t too far away from the real deal. I’m pretty happy with the additions Apple have made, it should make for a much better overall experience.

 

I’m happy with the new look, although I personally think it feels a little unfinished (aqua scrollbars still? Hmm). Unifying the look across core applications was the right decision, especially when Apple are picking up new users in droves.

A Comparison:

Smarter Filters, Cover Flow & Quick View

Better smart filters are very welcome. Although they didn’t use them in exactly the same way I expected, the fact that they are providing pre-created filters is sure to let users actually know filtering exists - and is useful in everyday situations.

Cover Flow was a given, I’m not sure why I didn’t pick up on that one. Apple loves it, although I’m still unsure whether this will be any more than an added whistle. Perhaps for folders of pictures or videos I can see it being helpful, but for viewing the applications folder? I doubt it.

Quick view is excellent. I think it could be the best feature announced. I hate opening up apps just to check to see if I have the right document. Hopefully this will be easily extensible, so 3rd party developers can add support for their own document types.

No Tabs - But Hello Breadcrumb!

I wish Apple would add tabs. Perhaps this breaks too many interface guidelines to be considered. I still think it would be extremely useful - providing I can drop files onto a tab and have it spring open in the same way folders do.

One thing that did find its way in to the new Finder was a bread crumb. I thought this had very little chance to be honest, but it’s a very welcome addition. We see bread crumbs on websites all the time, and they are a critical component to the iTunes store. Users know what they mean, so the Finder seems the perfect place to use them.

Overall a great (and needed) upgrade. I’m looking forward to using it.

Apr19

1 of 35 on Smashing Magazine

By Andy in Design, News

Smashing MagazineSmashing Magazine have just posted their latest article entitled “35 Designers x 5 Questions”. I’m very flattered to have been chosen to participate. Head over there and take a look, it’s a very interesting read and yet another great resource from them. Kudos!


Apr15

Tackling Mac OS X Leopard’s Finder

By Andy in Apple, Design

OS X LeopardIn the latest build of Leopard, Apple has started to pay attention to the window chrome, unifying it across the board.

I’m positive this is an indication we will see some serious work done on the interface of many core applications (unification is just the first step).

Here’s a mockup of a new Finder interface, and what I feel we might see, or at least I’d love to see, in the October release.

Mac OS X 10.5 Leopard: Finder Interface

Full Size Version

 

1. The iTunes Look & Feel

When iTunes 7 was released, along came another new interface. However, this time there had been a lot more thought put in. There were new widgets, new colors, and a distinct lack of “Aqua”.

My personal opinion, and that of many Mac enthusiasts, is this will start the transition. A transition away from the jelly bean, “reflections everywhere” look and feel that has been with OS X since day one. I think we will see this look and feel (or at least some sort of variation of it) across the board in Leopard.

2. Tabs Tabs Tabs

Tabs are something that Finder has been crying out for for a long time. When tabs exploded onto the browser scene a few years back, people took time to adjust to having multiple layers in one window. I think most people now find it hard to live without them. Tabs help stop window clutter and make it simple to see all of the locations you have open at one time.

I think Apple would be crazy to leave tabs out of a new Finder application.

3. Bread-crumb Navigation

This is something I would personally love to see. A Finder bread-crumb would represent a history of where you’ve been, rather than just a simple folder hierarchy. This would tie in nicely to the back and forward buttons, but also allow you the freedom of jumping to any point in the history. This may well break interface guidelines however, as it differs from the way it works in iTunes, so it’s probably a long shot.

4. Multi Views

Smart folders are great, I make them, use them for five minutes, and then forget about them.

What if Apple came up with some pre-made smart folders that would appear in a section at the top of each finder window? Most of the time I’m opening finder if get hold of a file I’ve edited pretty recently. If Finder presented me with my last five edited files, this would be a big time saver.

Apple could create other options such as “files with a red color label” or “files less than 5mb”. All this functionality already exists through smart folders. I’m just making it more useful for the average user.

5. Smart Folder / Burn Folder Button

Following on from before, smart folders and burn folders are hidden up in the “File” menu. Why not bring this into view by using a “cog” button on the main finder window?

6. New Folder Icons

Along with the new look and feel, I think we will see new folder icons. The current ones are very “pinstriped” and look dated. Maybe we will see folder icons along the same style as the new Adobe CS3 folder icons?

What are you thoughts on a new Finder?

Jan3

Minor Site Updates and a New Portfolio


Previously on this site I was using some javascript to detect your browser window size. If it was below 1024×768 then the left hand column would collapse and the site would shrink to fit in an 800×600 resolution.

Resolution Stats

I’ve decided to remove this and stick with a 1024 width for a couple of reasons. Firstly, I’ve been checking my logs, and less than 5% of visitors run a resolution smaller than 1024×768. It seems as though most people have decided to dump that aging monitor in the past couple of years. Even global numbers for people running 800×600 are only around 1.2 people out of every 10.

The second reason for sticking to 1024×768 and above is that it seems a lot of people who view this site are running widescreen displays. People with widescreen displays rarely maximize their windows so that they can utilize the extra width to show two windows side by side. So even if their resolution is high, their actual window size may be much smaller, which would give them the low resolution design still.

Sticking with 1024 seems to be the best solution for everyone. It makes me feel better knowing that everyone is seeing the full design as intended and not a simplified design because their browser window is sized too small.

Folio Screen

Finally, I’ve updated my portfolio page with some new work and greater detail. I can also now show my role on each project whether it be design, development or both. Go take a look when you get a chance!