It's been a loooong Christmas Break, hasn't it? With the pressure of the Major Project Proposal and Grow Project hovering over our heads I imagine that many people, myself included, have been really feeling the stress of things.

Fortunately I and, from what I've been seeing on the twitters, many other IMD students are finally bringing things to a close. Today I'm going to be going over the design process I've undertaken with regards to the Grow Community Gardens Site.

Establishing a Starting Point

In my last post on the topic of Grow Project I had just finished off the logo for the charity. Pretty much from the get go I had an idea of a somewhat graphical, seemingly handmade design.

Grow, as a charity, have a very hands-on approach to things. They were directly involved with the starting points of both the Waterworks and Helen's Bay gardens and this is something that I wanted to carry across to the logo I designed as well as the site design.

Whilst I want the site to have an appearance of being something that the charity could have created themselves, it is important that the site is also designed and developed in such a way that it is professional. This involves creating a balance between hand-made, simplistic design and professional quality work.

Paper Prototyping

In one of my Major Project blog posts I covered a lot of paper prototypes that I have been working on. Paper serves as a fantastic tool to work out the basic aspects of a project. This is as true with Grow as it was with my Major Project.

Fortunately I had a solid idea for the style I wanted for the site, and sketching the style of the site design that I wanted.

From Paper to Pixels

With the idea for the site style quickly established I quickly put together a concept for the site header.

I was immediately quite pleased with the design that I had put together, as it met up very nicely with the aim that I had for the site itself. From here I jumped straight into the markup of the site itself.

Site Design

One of the requirements of the Grow Project was that, when developing using WordPress, that we make use of the fantastic Starkers Theme by Elliot Jay Stocks. This was perfect for me as my personal preference for WordPress theming is to work from Starkers anyway, and I've recently completed a project that involved making some pretty drastic changes to the Starkers Theme ¹.

Header

This knowledge has proved to be quite useful in terms of how to tweak some bits of the site, allowing me to create custom elements of the site. This first started out with creating the header and navigation. On the home page I also wanted to show a mission statement as one of the most notable aspects of the site.

I also wanted to ensure that the donate button was somewhat noticeable across all pages. I did this by providing this particular link with a separate cloud, which helped ensure that it breaks away from the rest of the site Navigation:

On page header sections that aren't the home page, the mission statement is removed from the page, providing slightly more space for the site content.

Sidebar

The site content itself, for the most part, uses a similar two column layout throughout. There is a sidebar that contains content displayed on every page, with a set of consistent data being rendered on every page with the sidebar, and certain page specific content being rendered on certain pages.

This page-specific content is used as a sub-navigation for certain page areas, to make it as easy as possible for site users to navigate around the site. The universal content is a search field, links to various social media, links to Garden Categories that have posts made on them and finally weather conditions for the gardens.

Content

It should be noted, however, that the weather section of the sidebar can be quite fiddly at times, refusing to render the relevant weather at times. This is an issue that I have been unable to get to the bottom of, and I am increasingly believing that it is related to the infrastructure at Yahoo! as much as anything else.

The site content is laid out differently depending on the type of page. The three main page types are Pages, Categories and Single Posts. Each work similarly, but with slightly different visuals. Individual pages are quite plain in their appearance, fitting into the overall theme of the site quite nicely.

Categories and Single Posts use a similar layout to one another. Categories display multiple posts, whilst single posts display a single post and all comments on that post.

Home Page

The Home Page is a beast of a different nature. This page has a set of content designed to help highlight what the charity is about. It does this by talking about what Grow is about, with a slideshow to provide a visual to go along with the content.

Footer

The site footer is split into two sections. The top half of the footer is dedicated to a site map to help users navigate the site. It is more comprehensive than the navigation in the header, in that it provides a direct link to both pages and sub-pages of the site.

The second section of the site has three areas to it. Two of these are similar in nature, covering the Funders and Sponsors of the Charity, and providing contact information when there aren't any (as is the case with Sponsors).

The final area of the footer is related to the designer of the site, namely me. It's a simple message covering how the site was designed and developed by myself.

Gardens

There is one area of the site which is designed to be completely different. The Gardens page is an area that was mentioned during our brief was that they wanted to be able to show their own gardens as well as other gardens on a map. When I got to thinking about this I realised that any maps embedded on a single page could quickly get very cluttered with multiple gardens. To prevent this I decided to create a whole page map that would be used for all of the gardens that Grow wanted to display.

The navigation for this page was also modified to fit the adjusted content of the site:

Development

That covers the design aspect of the site, but there is quite a bit more being done to make the site as usable as it is. In particular I made use of WordPress's functionality to create custom post types as well as one plugin to add some useful functionality to WordPress.

Custom Post Types

Custom Post Types allow developers to define custom sections for content which can be used for custom sections. I've used this for three different areas of the site, which I will cover shortly:

• Gardens Page
• Funders Page
• Sponsors Page

Each of these pages have one thing in common, they need to be specifically set up. The following is the snippit of code I used for one of them:

$args = array(
    'labels' => array(
    'name' => __( 'Gardens' ),
    'singular_name' => __( 'Garden' ),
    'add_new' => __( 'Add New' ),
    'add_new_item' => __( 'Add New Garden' ),
    'edit' => __( 'Edit' ),
    'edit_item' => __( 'Edit Garden' ),
    'new_item' => __( 'New Garden' ),
    'view' => __( 'View Garden' ),
    'view_item' => __( 'View Garden' ),
    'search_items' => __( 'Search Gardens' ),
    'not_found' => __( 'No Gardens Found' ),
    'not_found_in_trash' => __( 'No Gardens found in Trash' ),
    'parent' => __( 'Parent' ),
  ),
  'public' => true,
  'show_ui' => true,
  'capability_type' => 'post',
  'rewrite' => true,
  'query_var' => 'Garden',
  'supports' => array('title', 'editor', 'custom-fields', 'thumbnail')
);
register_post_type( 'gardens' , $args );

This creates a custom post section which can then be used separate from Posts or Pages:

This is how I was able to set up the Gardens section, as well as gather weather information to display on the site. The custom Garden pages are set up to allow for a couple of custom fields, for latitude, longitude and the location of the garden:

It was also used to allow for easy addition and removal of Sponsors and Funders from the site's footer.

Plugins

WordPress is a very popular platform and, as a result, there are a multitude of plugins available to do pretty much anything that you would want it to do. One of the most important plugins, in my opinion, is something to handle Search Engine Optimisation, otherwise known as SEO. This is important as it helps your site be found. After all, what is the point of having a site if it's not findable.

For a long time I'd been using All in One SEO, but have recently made the leap to Yoast's SEO Plugin. It's a very similar plugin but with one big change, it makes it a lot easier to see how SEO affects the page in question:

Omissions from the Site

Due to the time frame of the site development there were some things that I would have loved to implement but couldn't manage in the time frame. It is my stance to implement something fully or not at all. There is no point in doing something if it's not going to be completed. This is the case with a mobile version of the site. I'm a big fan of Responsive Web Design, but didn't have the time to fully implement, or even experiment, with developing a mobile version of the site.

Validation of the Site

In terms of site validation the site validates as valid HTML5. I had been having some issues with the single post pages, but was able to track down a rogue </p> element hidden in amongst the comment form the site is using. With this resolved the site now validates fully.

In terms of CSS the site doesn't validate, but this isn't due to sloppy CSS. It happens because I'm making use of CSS3 to enhance aspects of the site in specific browsers, without hampering browsers that don't support these newer attributes.

Browser Support

The site functions fully in the following browsers:

• Chrome (OS X and Windows)
• Safari (OS X and Windows)
• Firefox (OS X and Windows)
• Opera (OS X and Windows)
• Internet Explorer 8

In addition to this the site also functions in older versions of Internet Explorer, versions 6 & 7, though there is a hit to the visual of the site itself. The following are screenshots of the browser output in various browsers. I will cover any issues that come up with specific browsers:

Internet Explorer 6 has issues with a couple of pieces of styling used in this design. The most obvious issue, when you look at the site, is that it simply doesn't support Alpha Transparency in PNG files. This causes an issue with the header area, where such images are used in great amounts.

The second issue is the lack of hills in the site header, as well as in the footer. This is an issue with the :before pseudo selector for applying content. This is used in the design to insert the hilly areas of the header and footer, to avoid adding unnecessary markup to the site.

Internet Explorer 7 has a better set of support for the Grow Site than Internet Explorer, in that it supports PNG Alpha Transparency. Unfortunately this is where the improvements end, as Internet Explorer 7 also doesn't support the CSS :before pseudo selector either.

Fortunately support for the CSS :before selector is supported in Internet Explorer 8. With Internet Explorer this is the base-line that I work to unless it is specifically required that I work towards earlier versions of the browser.

Now that I'm back online after the dreaded internet outage of twenty ten, I thought I'd share a couple of little bits of WordPress related Code that I've stumbled across, tweaked or coded up myself to make WordPress behave exactly how I want it to.

I'm not sure if anyone will find them useful or not, but I don't see any point in keeping little bits of code to myself when they might help someone else out.

SubPage Redirection

This is a little snippit of code that I discovered whilst working on a client's site. Their About section was broken down into multiple sections, with each defined as a sub-page of an About Page. This left the About Page itself lacking in content. This left me with two options:

1. Load some content into the About Page
   • This runs into a potential issue with duplicate content, which would be bad from a SEO perspective
2. Redirect the About Page through to a subpage

In the end I opted for the second option, to avoid any SEO issues that duplicated content might cause. To do this, I made use of the following piece of PHP, placed before any HTML, to redirect to the first subpage of a page:

  
    if (have_posts()) {
      while (have_posts()) {
        the_post();
        $pagekids = get_pages("child_of=".$post->ID."&sort_column=menu_order");
        if ($pagekids) {
          $firstchild = $pagekids[0];
          wp_redirect(get_permalink($firstchild->ID));
        }
      }
    }
  

What this code does is check to see if the page exists. If it does, it then checks to see if there are sub-pages. If there are it redirects to the first of the sub-pages. Pretty quick and easy, and rather effective.

Examples

• Copan's About Page
• #LiveProject About Page

Listing Sub and Sibling Pages

This snippit of code also ties in to a client project I was working on. The About Page needed a dynamic list of children pages and, if you were on a child page, to list it's siblings. The following piece of code does this and a little bit more:

  
    /* if the current pages has a parent, i.e. we are on a subpage */
    if($post->post_parent){
        //$parent_title = get_the_title($post->post_parent);
        $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); // append the list of children pages to the same $children variable
    }

    /* else if the current page does not have a parent, i.e. this is a top level page */
    else {
        $parent_title = get_the_title($post->ID);
        $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0"); // form a list of the children of the current page
    }

    if ($children && !is_search()) { ?>
    <h2><?=$parent_title;?></h2>
      <ul class="submenu">
        <?php echo $children; /*print list of pages*/ ?>
      </ul>
    <?php } ?>
  

What this code does is check to see if we are on a parent or child page. If we are on one of these types of page, a query is run to list the child/sibling pages. These pages are then displayed in a list. The heading, courtesy of the previous snippit, is defined as the parent page's title. If you don't use the first snippit then some additional work will be necessary, but should consist of merely uncommenting the piece of code in the if statement.

Examples

• Copan's About Page
• #LiveProject About Page

Wrapping up (for now)

I hope you find some of these snippits useful for the #liveproject or in any future projects you might end up working on using WordPress. If you have any of your own little bits of code you'd like to share, I'm sure that there are people out there who would love to see them.

Especially me.

When it comes to a new company, charity, or organisation one of the most important aspects to get right is the brand.

In my last post on the Grow Project I covered some of the idea generation that took place when trying to come up with a logo idea for Grow Community Gardens. Today's post follows on from this one.

This time we'll be going a bit further and, with the recent return of my Macbook Pro from the Apple Store, creating a more complete brand.

Where We Left Off

When I last posted about the Grow Project I was working off of a spare machine which, due to it's use as a spare machine, no longer had many of the apps that I find vital for getting work done, including the obvious exclusion from my blog post, Adobe Software.

As a result of this, I was left in a position where I had a lot of rough sketches and wireframes, some of which were refined, but no software that I could use to convert things from a paper-based design into a digital one. In the time that has elapsed a few things have changed:

• I have developed a case of insomnia, with the following consequences:
  • Lack of sleep (obviously)
  • Brainwaves happening in the middle of the night (awesome but frustrating)
• I've gotten my Macbook Pro back (now back to work..)

Side Effects of Insomnia

The lack of sleep and random, middle-of-the-night, ideas have been surprisingly useful for me, as it was one of these late night ideas that served as the catalyst for what has become my logo for the Grow Project. Allow me to sum it up using a truthful interpretation of what transpired:

“Late one night our amazing, god-like, modest designer was attempting to sleep. All of a sudden, an idea struck... the idea! For days he had been wrestling with a logo design when in his sleep-deprived state suddenly everything made sense. He reached for his iPhone, fired up Adobe Ideas, and set to sketching out the ideas for the Grow Brand...”

An honest interpretation of the events surrounding the idea for the Grow Community Gardens

Honestly folks, that's how it happened. Especially that modest part.

On a more serious note, I did have an idea strike me late at night, which did have me scrambling for my iPhone (it's backlit and the room was dark). The end result was a very rough idea that I wanted to translate into something a bit more refined when it came to the finished piece. The end result of this late-night-doodlefest can be viewed below:

As you have probably ascertained, my ability to produce fine art using my fingers is somewhat limited. But these sketches gave me an idea for a logo design which I was able to start work on the next day.

As an added bonus to this, I also discovered that the Adobe Ideas App for iPhone saves/sends your sketches as vector based PDF files, which are editable using Adobe Illustrator. This served as a rather useful starting point for developing the Grow Logo further.

Creating the Logo

So, with Adobe software finally back in my hands it's long overdue that I sit down and create something... in this particular instance a logo for the Grow Project. In the last year I've learnt pretty much all that I know about logo design, and I know that the first port of call is Illustrator, to allow for vector-based design. This mean that I can be much more precise in terms of my designs and means that I can resize elements without losing crispness - Illustrator uses mathematic equations to render elements, it's not pixel/raster based design like Photoshop, where resizing elements would lose detail.

So with Illustrator running I pulled up the PDF version of the above image, and started refining it. To start with I recreated the layout, as opposed to modifying the original. There were a few reasons for this:

1. The original was very rough (I did draw it on my iPhone in the middle of the night)
2. I find it better to iterate than adjust... if I make changes I don't like it's easier to roll back to a previous version.

I quickly worked my way through several refinements from the original sketches:

After several iterations, tweaks and adjustments to the design I came up with an image I quite liked. With the logo I wanted to try and keep it looking like something the members of Grow could have made themselves, whilst still keeping a professional feel to it. This is something I want to try and carry across to the site design.

So now that I have a logo, I need a font for branding to go with it. Ideally I wanted the font to be usable anywhere the logo is, which immediately cuts out most of the fonts in my collection. Fortunately there are several great resources for fonts online. The ones that I most often set my sights on are:

• The League of Movable Type ¹
• Google Webfonts ²
• Font Squirrel ³

I do have a few other resources that I have stumbled across in my hunt for good, free (as I'm a student, with all of my money already invested in my future), fonts. Eventually I settled upon a font called Fontin. And, just to err on the side of caution, I even checked the licencing for the font to ensure I could use it for both the logo and on the web site:

4.b.IV. Direct Linking or Embedded Opentype Files with the @font-face CSS property (ONLY for FREE fonts)

If the font is a free font ($0.00 license fee), you may use this font for Font-Face embedding, but only if you put a link to www.exljbris.nl on your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font.

exljbris Font Foundry. 2010. exljbris Font Foundry EULA. [ONLINE] Available at: http://www.josbuivenga.demon.nl/eula.html. [Accessed 20 December 2010].

After quickly playing around with the font I have come up with the following, which I will be using for the Final Grow logo.

Week 12 is both a fantastic and stressful time for me as a student. Fantastic because it marks the end of a semester, which has had some rather unenjoyable work involved in it. Stressful because it's the final week of the module, which means it's crunch time when it comes to getting work done.

You'd think that would be enough for any student on the course. UnFortunately, I'm a glutton for punishment I love a challenge so, in addition to coursework deadlines, I was also putting the finishing touches on a client project. Fortunately, I work well under stress and am, for the most part, quite good with managing my time.

Planning - Making It Possible

Juggling a lot of tasks can be very challenging at the best of times. Add in deadlines, stress, people asking for work, and working on projects with multiple people and things can get out of your control very quickly. This is true regardless of where you are in life. School, college, university, work or even a social event, there will always be things that will quite happily eat up hours of your time.

So it's important to take control of what does take up your time, to ensure that you have enough time to do all the things you need and want to do. For the most part this isn't an overly difficult thing to manage daily, but it's always good to have a good groundwork in place to ensure that if when things suddenly decide to all need done yesterday that you can take things in your stride.

Having a Plan

Plans have this horrible tendency to be really useful. Scary, I know, but true. They help people to get things done. This is true regardless of how detailed the plan is, be it of a militaristic battle plan or a simple list noted down on a scrap of paper.

Many, if not all, of my blog posts start off as a simple list on a piece of paper. The benefits of this, for me, are two-fold:

1. This helps me structure what I am doing
2. It gives me a checklist to ensure I've covered everything I want to cover

This is applicable to other things that I do, as I find writing lists a fantastic way to ensure that I get work done, as well as helping me to organise what I need to do in order of importance. It also provides me with an easy way to identify what has and hasn't been completed.

This proved to be really useful for the closing week of the semester due to the extreme busyness wrapped around everything that was ongoing. If you find yourself struggling to get your work done then you really should look into planning things out. It helps.

After my last couple of posts, in which I covered our Design Brief and showed off some of the research I've done I've taken some time to sit down and sketch out a series of ideas, for both the logo and site design.

I've been somewhat fortunate in that my ideas for things have come together quite swiftly, which is a first for me.

Disclaimer: I'm going to be up front here and state two things:

1. I am currently without Adobe software in any form, due to my mac being in for repairs at the moment, so don't expect perfect vector graphics in this post.
2. I am really not all that great at logo design. It's why I do web design/development.

With that out of the way, I'm quite happy with the direction my ideas have taken, I'm just throwing out the disclaimer because I know my strengths and weaknesses... Logo design isn't one of my strengths.

Getting Ideas on Paper

First thing that I wanted to do was get some kind of idea of what GROW was. We'd been given a list of things that GROW is and is not about, but I wanted to sort my own thoughts out. I did this by getting a nice big (A3) piece of paper, a marker and writing thoughts down as they struck me. I ended up with the following:

After sketching these ideas down I picked up on the growth aspect of things. GROW, as the name suggests, is all about growth. Plants, of both the consumable and non-consumable variety, but more importantly the growth of communities, helping to bring them together.

The more I thought about it the more I got to thinking that GROW essentially plant the seeds to bring communities that would otherwise avoid one another together. This is the kind of imagery that came to my mind when I started sketching out logo ideas.

Unfortunately the photo above doesn't really display much, but you can see (on the right) that I started to focus on a particular type of imagery, that kept things simple whilst remaining tied to the idea of planting seeds, and growth.

Because of the face that there are two clearly defined aspects to these sketches I was also able to define potential icon type logos, that could be used at smaller resolutions, e.g. favicons. Unfortunately, due to my Mac with the majority of my software is currently being repaired, I have not been able to develop the logo any further than sketches. Fortunately this is all that we had to do this week, and I should have my Mac back in time to convert my sketches into a full vector design for next week.

With my inability to convert the logo from sketch to full logo, I instead turned my attentions to generating ideas for the GROW web site. Whilst I, in my own opinion, suck at creating logos, I think that I'm quite good at sketching out web site layouts. I have whole notepads, and a folder on dropbox, filled with different site layouts I've cooked up in the last two years.

So I found sketching out layouts to be much more enjoyable than logo idea generation. I quickly pieced together a rough sketched out wireframe/doodle site idea that probably needs a lot of work over the next few weeks, but that I quite like.

This kind of layout, I feel, helps portray the things that will interest visitors to the site, with a combination of what they're about, what they're doing and showing how much of an impact they have.

This is achieved by having an area at the top of the site dedicated to stating their message, complete with call to actions for visitors to learn more about what they do or, if they want, how they can get involved. Directly beneath that there is an area dedicated to showing off images from the various gardens, possibly along related news.

Beneath this area there is a section for news, along with a map of the various gardens, both associated with GROW and others that have no ties to GROW, letting people where gardens are, with the option to see more information about them and, if appropriate, links to their respective sites/blogs.

Finally there is a footer that helps put everything a user might be looking for in one easy to find place. This means that, if a user happens to get lost, that they can easily find their way to the area they are looking for. This is in addition to the navigation at the top of the site, and exists to provide an additional method for users to help find their feet whilst also providing access to some elements which aren't part of the navigation, such as social media and possible a mini gallery of garden related photos.

Moving Forward

Obviously, at this point, everything is still very much rough around the edges, and I will be taking time over the coming weeks to refine and develop the ideas presented in this post. For now, though, I'm quite happy with the direction that things are headed in.

Following on from my previous post I'm going to take be doing some research into sites that are in a similar area as GROW, as well as some sites from other areas to help me identify what, in my opinion, GROW's branding would benefit from.

This research will help me identify a good starting point for creating the branding for the charity, as opposed to creating something with no substance.

Taking What We're Given

In our meeting with our Client, Siobhan Craig, we were given a series of sites that she both liked and didn't like, which gives us all a great starting point in terms of research, as it helps us to identify things that are, and aren't, liked. This will help us tailor both further research and our designs & concepts to better meet the tastes of the client.

Starting Point - GROW's Blog

Before I go over the different sites that Siobhan mentioned to us, I'm going to take a look at something a little bit closer to home - GROW's blog.

To be honest, there are bits about the blog that I both like and dislike about the site:

Likes

• Clean, Simple Design
• Nice application of colour - colours compliment one another
• Emphasis on Content
• Mission Statement is one of the first things you see when the site loads

Dislikes

• Very bland design - nothing makes it stand out
• Poor layout/use of the sidebar
• Styling used for some posts is quite poor, it could be much better

There's quite a lot that makes this a pretty good site, but attention to some of the aspects of it really let the site down. There is also a general lack of flexibility in the site, as it cannot expand to fit more areas into it. This is more an issue with the platform being used than of the design, but it still worthy of note as it means the site isn't capable of meeting the requirements that the client has.

Taking a Look Around

Siobhan was also, as mentioned above, provided a list o sites that she both liked and disliked, covering some of the aspects of each design that she liked and disliked, allowing us to get a feel for the kinds of things that she would and wouldn't want in a design of the GROW Site. Let's take a look at them shall we?

ACGA - Liked

On the whole Siobhan liked the design of the ACGA site, stating that the the only thing she disliked was the navigation of the site. I'm not too keen on the way that it has ultimately been implemented but I do quite like the idea behind the site's navigation, colour coding graphics and links to help tie them together.

I'm not a big fan of the design of the rest of the site though. The header area, in particular, feels sloppy to me... there's an idea behind it but it hasn't been implemented well at all. As a result the header area feels cluttered and messy and, as an added negative, I find my eye continually pulled to the header graphic even when I'm trying to read the content on the site.

Once I removed the graphic element from the site (Chrome Developer Tools are handy like that) I found the content of the site to be good, if poorly structured. I also noticed that, whilst the content is good, the only attempt that is made to involve site visitors is so bland that I didn't actually realise it was a Call To Action until I tried to find it. I can see why it could be liked but I can also see how it could be improved.

Parkrun - Liked

Parkrun's site is actually quite nicely laid out. Content is nearly laid out and good use of space is used. I'm not a big fan of Flash being used in site designs but the flash used here works, though I'm sure there are other approaches that could be used that would work in more areas. The big issue that I had with this site is that the animated section of the site takes up so much space without actually achieving anything, and pushes the content of the the site further down.

On the whole I really like the design of this site, which delivers it's message in a very eye-pleasing manner. I feel that the banner section of the site could stand to improve by providing way for visitors to the site to actually get involved, as opposed to making them scroll down the site to find out how. Having something that is eye-catching is pointless unless you do something once you have caught their eye.

Federation of City Farms & Community Gardens - Disliked

Siobhan doesn't like black header areas at all. In all honesty, neither do I. Which is, in my opinion, the only weak point that stands out with the Federation of City Farms & Community Gardens site. The actual content of the site is quite nearly laid out, making good use of space to lay out the content as well as making good use of imagery to support the content of the site.

Grow it Yourself Ireland - Disliked

Grow it Yourself Ireland wasn't a popular site with Siobhan either. In the meeting she said that it was 'clunky' and had areas with no content. In my own exploration of the site I found the opposite to be true, with every section being populated with content with a mix of recent and older content.

I also don't think the site is clunky, though it does feel quite claustrophobic to me... a lot of elements in the site don't seem to have room to breathe, which might be what Siobhan had meant when she said clunky.

Siobhan also didn't like that the site was trying to be it's own social network. I feel that, from what I've seen, it does this quite well but that it isn't the kind of thing that GROW need for themselves, as their goal is to help bring communities together, not to create a social network.

Thrive - Disliked

Siobhan didn't like the logo this site uses. To be quite honest, I don't like much of this site's design at all. I feel that it makes very poor use of the space that it has, prioritising the wrong elements of the site, and pushing the important elements further from where they will be seen.

Other Sites

As helpful as it is to have a client provide sites that they do or don't like, I find that it's always a good idea to look beyond the sites they give you as well as beyond the sector their site is aimed at. Sometimes you can get fantastic ideas from other sites that have nothing to do with the project you're working on.

With that in mind I went searching for other sites that appealed to me. I also wanted the sites to have a more illustrative slant to them, as this was one of the first things that struck me when Siobhan was talking to us. The following are a selection of sites that I quite liked and will may refer to for inspiration with branding and site design.

RedBrick Health

RedBrick Health is a site I stumbled on during a google search for nature based site design. This site has a really nice illustrative feel to it, though i do feel that it's a bit heavy on the noise on the skyline.

The site's header area clearly and immediately identifies who they are and what they stand for. They then provide important information on the site and make it easy to navigate to other areas of the site. There is no clutter to confuse their users... everything serves a purpose.

indiqo.media

Indiqo.media is the web site of a Maximilian Bartel and demonstrates how a nice grid combined with beautiful illustration and artistic skills can produce a really visually powerful site.

Wrapping Up

Having taken a look at a great many sites I have a much stronger feel for what I want to produce for GROW with regards to branding and site layout. I'll be sketching out ideas over the next several days before I settle onto any particular design.

This week marks the beginning of further distraction from the Major Project the Live Project. I'm kind of split on the whole idea of it, as it serves as a fantastic way to distract me from my Major Project but, at the same time, is for a very good cause.

This post is going to cover what I took away from our first, and potentially only, meeting with Siobhan Craig who is a representative from the client, GROW Community Gardening Charity.

Wee Bitta Background

As mentioned above, this week we met with a representative from Grow, one Siobhan Craig. This meeting took place during our normal lecture slot, and consisted of Siobhan giving us a simple, to the point, presentation that talked about what GROW is about and what it does. This was followed by a Q&A session in which she answered our questions.

It was nice to be able to actually talk with the client about what they want and to get answers that actually helped... something that is lacking from my own Freelance work all to often. At the same time, some of the answers were, at the time, quite terrifying. Fortunately the scariest part, the timeframe for the work, was dealt with quite swiftly by The Standardistas via the wonders of the Twitterwebs:

The Meeting

The meeting with the client was actually quite enjoyable. I'd never heard of GROW prior to the meeting and, it turns out, what they do is pretty cool. GROW are, as I've mentioned above, a local charity that seeks to help bring communities together using community gardens. They have been doing this from April of this year with the aim, as stated on their current blog, of:

Our aim is to promote community development, tackle food poverty and improve health and wellbeing through organic community gardening and sustainable living.

This is a noble goal, trying to improve communities in multiple ways and in multiple locations.

The meeting itself covered a lot of things that Siobhan believes that Grow wants from the project. For the most part, I agree with the things she brought up though I am fairly sure that some of them could be implemented differently, or better, than the manner Siobhan has suggested. That's one of the things that we, as a designers and developers, have to tackle ourselves for our clients. There's typically a reason that we are approached to do something for a client. It's because we have knowledge that relates to how we can convert the ideas a client has to what they both want and need their site to be.

What I Took from the Meeting

I picked up quite a few things from the meeting. The first is that there's a lot of work, which has immediately added to my stress levels. Fortunately, I tend to work pretty damned well under stress and pressure, so this might actually help motivate me to get stuff done.

Aside from personal stress I also noted down quite a few things relating to the GROW project itself. The things I noticed, and noted down, are:

• Client wants a CMS for the site
  • WordPress was mentioned by client, and would probably be a good fit for the project
• Site needs to be Future Proof
  • Site needs to be able to handle expansion in the future
• Needs user management for members of community
  • WordPress has functionality for this build in
  • WordPress plugin BuddyPress might be a better way to handle community users, providing a miniblog for each user
• Blogs for each garden
  • Currently they have two gardens, but there will probably be more in the future
• Want to make use of Social Media
  • Twitter
  • Facebook
  • Newsletters
    • Mailchimp would make for a suitable tool to handle this, and is something I have some experience with.
• Branding
  • Web
  • Print

This covers the things that the client wants from the project. That's a pretty lengthy list, and it just covers what they want in general terms. The topic of content that they want for the site was brought up and, as it was brought up, I noted it down:

• Home Page
  • Mission Statement
• About GROW
• Learn
• The Gardens
  • Map of Sites
    • Capable of including non-GROW Projects
    • Different markers for different projects?
• Why Get Involved?
• Getting Involved
• Support
• News
• Funders & Sponsors

All in all this strikes me as a rather standard list of content for most sites. I've worked with charities before, and for the most part this is on par with work I have done for them.

In addition to content there was some discussion with Siobhan regarding the kind of design she would like to see the site have. Whilst this isn't necessarily the be all and end all of my design options, it's always a good idea to know what your client has in mind, even if you decide that it might be better to go in a different direction:

• Modern
• Clean
• Easy to use
• Not Clunky
• No big banners with black backgrounds

All in all this gives me plenty to be thinking about when it comes to researching and branding for this project, which I shall be doing over the coming days.

Over the past few weeks I've been spending a lot of time doing two things:

1. Sketching ideas on paper
2. Writing about various things that have entered my head

As you can see, this doesn't actually afford a whole lot of time to do my work. This is something that I'm going to be working to rectify over the coming weeks, which might mean a temporary end to my random topics of discussion. So what will I be doing? Well, today I'll be looking at conversing some of my sketches into an actual wireframe.

Where We're At (and Where We're Going)

At this point, I've got a myriad of sketches relating to my Major Project posted up on my 365 Design Blog but, for some reason, none of these images have been making their way over to this blog. So I've got a load of work that simply hasn't been put up on this site which really is madness. As such I'm going to be putting focus onto two things, to get my work prepared for the Major Project Proposal in January and the Major Project itself, due this summer:

1. Pull all relevant data into my blog
2. Get the Yii Framework up and running for experimentation and development

Pulling Things Together

As I mentioned above, I've been doing a whole load of paper-based work and sketches regarding my WebApp without actually sharing them here, where I'm meant to be documenting my progress with the design and development of ReferenceIt. This work ranges from a series of sketched out wireframes to more detailed sketches having to do with elements of the branding and site elements.

When starting out with this blog post I had intended to simply link to the individual posts on my Design Blog that relate to what I've been doing but I've been noticing a frustrating trend with Tumblr lately, that it tends to be unavailable when you really need it to work. I also think that it's better to keep all the reference material for my project in one easy to access location. Below is a series of sketches, and other graphics, relating to my progress with ReferenceIt.

This is where things really started out for me. You can see this, along with an overview of some of the other images, back in my Playing with Paper article from a few weeks ago. You can see the overall idea of a site layout sketched out, along with some individual components being sketched out roughly. I further refined some of the ideas, which are covered in the next few images.

The above image is a collection of ideas that I've had in terms of branding. Regardless of medium the logo will always have the two letters that make up the encompassing brand of ReferenceIt, the r and i. The different layouts are for different mediums, with the top left sketch being aimed at iPhone iconography, as I ultimately want my WebApp to be viewable wherever the web works. The logo beneath that is the standard logo, and uses the iconography that I intend to employ across the board.

The other two sketches make up something that I am considering by way of a pseudo business card, in that it's not the kind of thing I will be handing out one a one-to-one basis. Ultimately the aim for my WebApp is to ensure that it is used and, as much as it's a WebApp, the scope of ReferenceIt goes beyond your screen, as referencing has it's roots in books.

This pseudo-card will, if I can get them produced, take the form of slim post-it notes, branded to match with the site design. On the front side there will be the simple ri logo, and a blank space. On the back will be the site's url, referenceit.org. These will, for at least the initial phase of my project, be available in bulk for people.

Why? The reasoning behind this is that it provides a method for my WebApp to enter the real world. When you are flicking through a book and need to place a marker, these will be perfect and, when it comes time to reference things, you'll be gently nudged in the direction of the WebApp to do so.

This is another of the sketches I've produced based off of the original, rough, doodle-fest. It takes the first step from sketch through to to something ready to be wire framed. It's not perfect, but it's definitely a step in the right direction.

Following on from the above point, that the sketch wasn't perfect, is an example of where I've decided to change thing, in my opinion, for the better. This is an example of how I want quotes and references to look when displayed. You can also see a little stamp in the top right corner. This is an idea I had to allow users to see the medium the quote is from, be it web, print or another source.

This is a bit of a closer look at the stamps, showing off some of the different mediums available for referencing. Ideally, to tie in with the visuals I want, these would look like they had been added using a rubber stamp.

This is a revisited version of the previous wireframes, taking things in the direction that I want them to go in. At this point I decided that I should probably try and get something digital related to my project pieced together, especially with the topic of this post...

Converting things from sketches to HTMl can be both really easy and really hard, sometimes all in one go. I've been fortunate, so far, with this but I can see it becoming an issue when it comes time to convert my wireframes into a visually designed site.

This is actually part of why I am already producing site-related elements in HTML. By producing my wireframes in HTML I am able to get the ground work for development set up. At this point it has allowed me to set up the grid that I will be using for the site itself, as well as getting some of the basic elements in place.

Throughout the vast majority of my work so far I have been focusing on what the functionality and layout of the site will be once a user has registered and logged in. In addition to realising recently that I haven't been getting nearly enough work done, I also realised there's a flaw in the approach that I have been taking. Who is going to bother registering if I don't actually provide them with a reason to. This is what the above wireframe seeks to address.

Ironically, the last photo in the series is from the start of a period of insane procrastination. It's relevant in that somewhere, in amongst all the doodle, there is a thought process behind something that Nicklas suggested I could look into using as a part of ReferenceIt. The idea is that I could make it possible to tie into one of the most common places books are bought from, Amazon, and use their system to allow users to quickly and easily reference books by visiting the Amazon page and clicking a button, in a similar fashion to what I want to do with web sites.

Fortunately, for me at least, this doesn't seem to be too difficult to implement. Amazon have their own code system that they use for their products which makes use of ASIN codes. For the vast majority of books the ASIN code that is uses is identical to the ISBN codes used by the books. This is, unfortunately, changing with ISBN switch from 10 digit codes to 13 digit codes, but I am sure that there will still be a way to convert from one to the other, and vice versa.

So I've identified that there is, for most books at least, a relation between the ASIN and ISBN codes of books... so what? Fortunately it also seems that there are developer tools available to allow for people to make use of such data. The image shows how I would like to tweak the bookmarklet I have kicking around to detect if a user is on an Amazon book page, so that it would reference either the page or, if it's an Amazon book page, the book itself.

This is one of those things that is definitely on my to-do list for further research and development, as it would prove to be another useful tool that I could make available to aid referencing and citing of work.

What's next?

As I mentioned at the beginning of my post this week, I'm going to be looking into getting the basic framework, Yii, uploaded and see what I can do about getting the basic elements of the site in place. This might take a few weeks though, as we will shortly be beginning our Live Project and multiple other deadlines are beginning to loom.

There are a lot of good things out there to look at regarding web design. If there weren't, then why would we even be doing it? Unfortunately, there are also a lot of things out there that aren't so great.

I'm not talking about design or development, though there are examples of both out there that make me cry. I'm talking about the methods used in selling some things. In particular I'm looking at buzzwords and how they are, far too often, used to make things look better than they really are.

Oh, and since you've decided to read this far, I feel that I should point out that some of this is rather opinionated, possibly even rantish. Hopefully I'll get the point across without causing too much offence.

So what is SO bad about buzzwords?

"I'm going to code the site using the HTML5s and the CSS3s, making use of..."

An example of the kind of thing that annoys me about buzzwords

Let me be up front here, there's a time and a place for buzzwords. It's when you actually know why you're using those things. A lot of people don't seem to, opting to use the terms to describe things they are going to do, without knowing much about the terms that they are using.

This is not something that is unique to people selling things. People use terms and talk about them all over the place, and these kind of posts can prove really frustrating to people who actually do know what they're talking about. A perfect example of this is InfoWorld's post about why users should hold off on deploying HTML5 in websites which resulted in Remy Sharp's post on the matter, which begins with a rather honest disclaimer/introduction:

Please note that this post is intentionally unedited. It’s a raw rant that would probably go down better in a pub. Since we’re not in a pub, this medium will have to do. ¹

A Couple of Examples

After publishing this post, it was brought to my attention that I might be mis-defining buzzwords somewhat ². Based on the feedback, I'm going to use this area to provide a couple of examples that relates to what my post is aimed at. The examples I'm going to take a look at are the close friends Apple and Microsoft. I'll try and keep things brief.

Apple

Not all that long ago Apple released an HTML5 Showcase to show off just how fantastic the latest and greatest in HTML5 technology just works. HTML5 is a step towards a more open web, so this is something that you would expect to be the case with Apple's HTML5 showcase... except that it isn't open at all.

The examples only work in Safari, as every other browser (including those with better HTML5 support than Safari) is blocked. Oh, and to top is all off, a lot of what is demonstrated isn't even HTML5 ³. What you end up getting is an amalgamation of HTML5, CSS3 and JavaScript all being bundled under the heading of HTML5, because it's a term people recognise.

Microsoft

Don't go thinking that Apple is the devil though... at least not by itself. Our good friend Microsoft has a tendency to bend the rules when it comes to talking about HTML5. In particular when it comes to singing the praises of their up and coming Internet Explorer 9 which, don't get me wrong, is still a vast improvement over their previous browsers.

In this instance it isn't claiming that things they are using are HTML5, is that they are selective in talking about HTML5, leaving out things that they don't support and, based on the elements they do talk about, declaring themselves the browser with the best support of HTML5 ⁴.

Avoiding Stupidity - Know Your Stuff

Honestly, knowing your stuff is something that you really need to do in the web design field. If you don't keep learning you will quickly become irrelevant... and if you pretend that you know what you're on about you will quickly be found out and ignored.

It's one of the things that I have found so remarkable as a student on the IMD course, is just how up to date things tend to be, especially with the DES modules, when compared to most other courses I have taken before. It's amazing to be taught up to date, forward thinking, design as opposed to learning more dated methods of implementing design which, whilst they work, suck.

Don't take my word for it. Whilst I may have delusions of grandeur, thinking that I'm fantastic at everything I do, I know it's not actually the case. So I threw the following question out there:

The answers I received (almost immediately) backed up the point that I'm trying to make, learning new things and knowing them is vital to designers, as otherwise you end up with an outdated, and therefore useless, skill set. Whilst I would normally put related images into a gallery I'm going to keep them separate this time, for emphasis:

I'm sure you can see the common theme binding all of these tweets together... Everyone agrees that constantly updating your skill set is vital to providing the highest quality of work to the people you work with as well as anyone you would like to work for.

Research (Experiment and play with new things)

This all comes together to highlight that it's important that you don't sit idle with the skills that you have. If you do your works becomes increasingly dated, so it's important to ensure that doesn't happen. But how? Personally I find that it boils down to the following:

1. Be passionate about what you do
2. Use personal projects as a reason to learn new things
3. Use the best tools for the job, even if that means learning new stuff

1. Be Passionate

Web Design can be difficult, and it can be frustrating. This is true even when you are just playing with it for a hobby, or working to meet university deadlines, something I am sure we can all appreciate as students. It is also, unsurprisingly, the case when you are being paid to do it. Money + Deadlines = Frustration. This is true regardless of your industry.

Dealing with this frustration becomes much easier when you actually care about the work you are doing. Thus it is important to be passionate about the work you do, otherwise it will overwhelm you. Being passionate about what you do will also help when it comes to learning new skills, because it gives you more things to learn.

This actually forms the basis of why I sometimes come off as knowledgeable regarding web design stuff. When I see shiny stuff, I play with shiny stuff. It's an addiction of mine, and one that really works out to be benefitial as I'm constantly learning, and playing with, new things to do with web design and development.

2. Personal Projects

Being passionate actually leads quite nicely into this second point. If you're passionate about something that you do, then you almost always have some kind of pet project that you'll work on when you're able to. These projects, with web design, serve as the perfect place to let you try experiment and play with new things.

The only problem with having personal projects can be finding the time to actually sit down and work on them. If anyone ever finds a way to manage this, don't hesitate to share with me.

3. Always use the Best Tools for the Job

It's always a good idea to ensure that you're using the right tools for the job especially when you're being paid for the work you're doing, be it freelance or otherwise. This can sometimes require a bit of learning in order to ensure that you're using the right tool for the job.

This was the case with a recent project I wrapped up towards the start of the year, producing a site for the Belfast Based PHOENIX FIRE site. There was one thing that they really wanted to make sure that the site did - it had to work on mobile devices as well as on computers, something that is becoming increasingly popular.

This resulted in two requirements that I needed to meet. The first is that the site needed to be easy to read on a mobile device, without zooming, with the second being that media needed to work regardless of device. This gave me an opportunity to learn how best to get HTML5 Video and Audio up and running on the site, something I'd played around with briefly last year but never really done anything with. The second thing that it let me do was spend some time getting to grips with CSS's @media queries.

The skills I learn through experimentation better enable me to provide better solutions to clients, and also help me when I need to learn something specifically for a client project... knowledge I can then use in future projects.

Summing Up

To pull everything together a little bit towards the end, as I've gotten things a little bit fragmented, it's really in our best interest, as designers and developers, to always push to learn new things... on our own as well as through lectures.

Take the opportunity to learn something new, create something fantastic and, if you're of a generous nature, share it with the internets.

This week, as I'm sure many of you are aware, was the week of #buildconf, a fantastic conference put on by Andy McMillan. I was one of several students able to attend and, I won't lie to you, it was pretty fantastic. One of the speakers, the famous Dan Cederholm, covered an amusing way to add more "pop" to a website, using some of the shiny new CSS3 gubbins. The video below demonstrates what he recommends.

I'm thinking I might fire that CSS live for April fools.

I've been working on all sorts of paper based sketching, tweaking various other projects and generally being very busy. I decided that whilst it can be good to be busy, juggling a dozen different things meant that I've been spending more time juggling things than I've been able to spend actually doing anything. So I decided that I'd dedicate as much of my Saturday as I could to working on something regarding my Major Project... in particular my brand.

Branding is Important

I'll say this up front... if your brand is crap... your project will be crap. If people can't connect your brand to your product then something isn't right. As Brian Hoff says:

A memorable logo is just the beginning—yet an extremely important beginning —that sets the overall tone for your new or existing brand.

Brian Hoff in an interview on http://lucidry.org/. ¹

This is something that you will find is pretty consistent across the board when it comes to branding... it's meant to tie in with what you're about, or what you do. The brand you have and the product you create should be tied together, with the logo or even colours ² helping to conjure up images of your company and it's products.

As such, when it comes to branding I want to do everything that I can to ensure that what I use fits with what the branding is for. If I fail to do that then I've done something wrong. This is also one of the reasons I tend to avoid branding related work myself. I can appreciate a strong brand... but that's easy. I have a much harder time of actually creating a strong brand.

I think that this is also a part of why I try to keep things simple as it cuts down on the amount of things that I can screw up. Of course the flip side of this is that if I do mess things up then it is infinitely more evident (which tends to result in things being corrected much quicker).

What should my Brand be?

I want to ensure that the brand that I have, and the all-encompassing branding that I make use of, fit together perfectly. This is a part of why I've spent so much time sketching out ideas and pulling things together in a general form before trying to create a brand... If I have a stylish brand for my project, but the branding is very minimal... that would create a clash and that'd suck.

As I covered in my blog post on Thursday I want to create a rich, book-esque, user interface for my major project, as it will provide me with an opportunity to break away from the more clinical styles of web design for referencing as well as giving me a break from my own more minimal designs. I want to push both my technical and graphical capabilities with my major project whilst providing a usable, useful, tool to users. Yes, I want it all. 'Cause I'm crazy like that.

Starting with my Brand

I'm a big fan of paper. Paper is great for letting me throw down ideas quickly without worrying too much about quality. I have whole books filled with sketches of web site layouts that I'll almost never user, and I've got a fair few branding ideas for myself sketched out over the years. Plus, it's really fun to be able to just create without thinking about what tool to use, or how I'll code it up.

Another influence with the brand I am working on for ReferenceIt is a fantastic font, that Simon Fraser stumbled across, called Scotch Roman. The moment I saw it I knew that it was the font that would perfectly fit for my branding, which quickly came together to look like the following:

I then took the ideas I'd pieced together to create the above, and opened up Illustrator. Why Illustrator? Vector Images make for a more easily scalable logo, which is useful if you need a different sized logo for different things, such as web site branding, business cards, billboards... and so on. After a little bit of playing around I quickly came up with a logo that I was happy with (as it's built using a really nice font to begin with) and I'd even seen how well it would hold up at various sizes. I also decided to see how it would look in both black and white, as these are the most common colours I would be using the logo. This was aided by my decision to try and only use a single colour for the logo, meaning it can be easily switched between the two:

I also knew that I wanted to produce a rich user interface for the site that I'm going to be working on. This met up with my recent trent of making sure that site's look nice on mobile devices, particularly iPhone, to the point of making an icon for users of mobile devices. The result can be seen below:

This leaves me with what I feel is a rather nice, if simple, logo for my Major Project. I might revisit it before I'm 100% pleased with it but at this point I'm quite happy.

Producing a site takes more than just a mass of images and code put together in a browser. There are processes that people use to get from an idea to a finished product. None of them are wrong, and I can guarantee you that almost everyone has their own approach to getting from A to B. Today I'm going to take a look at what I've come up with.

Idea Generation

A little while back I covered idea generation for my Major Project. Today I'm going to share some of the visual side of things that I've found/been sent relating to paper, referencing and some of the visual feel I might want to use in the site.

As I mentioned in that post I quite like the idea of paper and notes... the idea of producing a rich user interface really appeals to me. Unfortunately, due to time restraints I haven't been able to hunt down many photographs of the kind of imagery that relates to what I'm after. Fortunately, having friends is awesome and one of my friends in the US, Tami Olsen¹ indulged my madness and snapped a wealth of images from her collection of books:

On the whole this is a really nice little collection of books, but it's a bit older than what I'm really looking for in terms of a visual design for my site. There are some beautiful little pieces to take away from these books though, in terms of typography, cover design elements and layout of the text. Fortunately for me, Tami has all sorts of books in her collection, so she was able to snap shots of more recent books. Whilst I was waiting on her to snap the photos for me, I started to play around with some pens, pencils and a load of paper to get some of the visual ideas I was generating already onto paper.

As you can see I took some time to play around with a more generalised shapes and layouts on the larger page using markers, with additional images being produced on the A4 sheet using pencils. Some bits don't really feel right though and it wasn't until Tami sent me through some additional photos.

These images helped me get a better feel for how I wanted the visual of my site to feel. It is also helpful to get a feel of the kind of things that other people associate with the image I'm trying to convey, as opposed to relying on my on input entirely. I want to ensure that the site is both functional and elegant and, as was discovered at a recent workshop I attended, different people will turn up different imagery which can often times improve upon what one person could find alone.

The images also helped me identify the reason that things didn't feel right to me. The navigation hanging down from the top, on pieces of paper, doesn't really fit with the visual of little stickies sticking out from a book. This is something I'll need to address at a later date, when I get closer to producing visuals and when I have more time to sit down and work out the full details of how I want the site to look.

This week the Standardistas covered several aspects that are important when it comes to design in general, be it in print or the web. Those three aspects are:

• Careful usage of a grid
• Typography
• Colour Palette

Today I'm going to focus on the first of these three, looking at various grid systems that are available out there, and sharing some of the little things I've taken a look at and worked on myself.

Importance of a Grid

For a long time grids have been a staple of the printed media world and are increasingly making their way onto the web. Magazines make use of grids to help make the most of the space available on the page, whilst making the content as readable and appealing as possible:

As I've mentioned, grids have been making the transition from paper to the screen. Khoi Vinh is one of the examples of designers that make use of grids, and examples of this would include his own site, the New York Times Site Design, and his grid-based WordPress Template, Basic Maths.

Another example of grids on the web would be the work of Jason Santa Maria. Jason has a fantastic blogazine editorial style blog. What this means is that each and every article posted of the site is laid out uniquely in a fashion that relates to the topic at hand.

The above images demonstrate how using a grid can help the site layout and display content in beautiful ways even when the content has different styles. Some of these sites also help demonstrate other vital aspects of design, in particular that of good typography, which I will probably cover in another blog post (and which the wondrous Will McNeilly will almost undoubtedly cover in better detail than me).

CSS Frameworks with Grids

As you can see, there are numerous advantages to using a grid in design. If you haven't already found your own way of implementing grids, there are a wealth of resources out there for you to experiment with, including:

• Blueprint
• 960 Grid System
• YUI
• OOCSS
• 1Kb Grid

Each of these frameworks provides a grid that people can use. I'll be honest, I've always been a big fan of the 960 Grid Framework. I wrote a blog post about making use of this particular Grid System last year as part of my Learning Logs for the DES module.

Simon Fraser seems to quite like the Blueprint framework and covered it in a recent post on his blog. If you're wanting to see other opinions on grid systems he provides a bit more information about Blueprint than myself.

Expanding Beyond CSS

There's one frustrating issue with CSS Frameworks, you almost always end up with a lot of superfluous code that only serves to bloat your files - having code you don't use negatively affects your site loading times which isn't a good thing.

LESS CSS is one of many ways available to extend CSS with all sorts of nice little pieces of functionality. Two of these that prove to be highly useful in this particular instance are the ability to define variables and the ability to use mixins (essentially functions for css). We can use these to dynamically create our own grid with no excess code and without reliance on CSS classes. To provide an example the following is below:

@def_grid:12; // Defining a Variable
@width:960px; // Defining a Variable  

// Let's try out a function for a container shall we?
.container(){
  margin:0 auto;
  width:@width;
}

// And here we have a function for creating grid elements
// We also have to pass some specific numbers to this mixin
// with some additional, optional, variables that are pre-defined
.grid(@grid:@def_grid,@cols:'',@float:left,@display:inline){  
  display:@display;
  float:@float;
  margin:0 10px;
  width:(@width/@grid * @cols)-20;   
}
 

A little bit confused? If you've never encountered things like LESS, or SASS or COMPASS then that's understandable. Let's provide a little bit more of an example shall we? Here's a demonstration of how we can use this in our code.

@def_grid:12; // Defining a Variable
@width:960px; // Defining a Variable  

// Let's try out a function for a container shall we?
.container(){
  margin:0 auto;
  width:@width;
}

// And here we have a function for creating grid elements
// We also have to pass some specific numbers to this mixin
// with some additional, optional, variables that are pre-defined
.grid(@grid:@def_grid,@cols:'',@float:left,@display:inline){  
  display:@display;
  float:@float;
  margin:0 10px;
  width:(@width/@grid * @cols)-20;   
}

#container{
  .container();
}              
header, footer{
  .grid(16,16,none,block);
}                                     
#content{
  .grid(@def_grid,4,right);
}                          
aside{
  .grid(@def_grid,12);
}
  

Pretty Simple so far? We define a couple of mixins and then we use those in specific bits of CSS. The outputted code that we get looks like the following:

#container {
  margin: 0 auto;
  width: 960px;
}
header, footer {
  display: block;
  float: none;
  margin: 0 10px;
  width: 940px;
}
#content {
  display: inline;
  float: right;
  margin: 0 10px;
  width: 300px;
}
aside {
  display: inline;
  float: left;
  margin: 0 10px;
  width: 940px;
}
 

The really nice thing about this is that we can make use of lots of mixins and they won't make it through to the finished CSS code. Another nice little perk of this approach is that you are no longer limited to the pre-defined classes, or the predefined widths. This can be very useful, especially with the increasing popularity of Responsive Web Design.

If you are interested in using LESS to create your own CSS Grid I have already put together my own adaptation of the 960 Grid System on my GitHub Repository, which you can freely acquire. Of course this is just the tip of the iceberg when it comes to what LESS (and it's alternatives) are capable of. If what you've seen above has piqued your interest then you should definitely take a look at what else it's capable of.

Summing Up

There are plenty of different ways in which you can piece together your own grid system, and a vast selection of tools available to help you get there. Take a look at all the options available and figure out what works for you. When you do that then all that's left for you to do it go with it.

I'll be honest folks, I don't know where in the hell the last few weeks have gone. So many different projects to juggle, both in and out of IMD, keeping them all organised seems to be taking up so much time that it doesn't leave any time for actually doing anything.

Today that's changing. Today I'm going to be, briefly, covering my decision with regards to some of the more technical aspects of my Major Project, in particular looking at which PHP framework I'm going to be using.

Examining the Options

Coming from the foundation degree (and thus jumping from second to final year) I was advised, several times to get an idea sorted in my head as to what I wanted to do this year for my Major Project. As a result of this, and of my obsessive nature, I not only came up with a myriad of ideas, but I also started conducting experiments that related to what I would want to cover.

One of the areas I knew I wanted to look into was using a PHP framework as the basis of the project. I can use already existing solutions for projects, and I've coded my own solutions from scratch to solve problems. This year I want to take a look at using a starting point to create something as this will be a useful skill to have once I've completed this year and am unleashed on the world in a more official capacity.

There are a lot of PHP frameworks out there and, over the summer, I took some time to experiment with several of them. Most of them either confused or annoyed me but one or two stood out as pretty cool. The advantage of using a framework is that, regardless of which I develop with, the skills I learn using one PHP framework will largely transfer to any others I use. The complete list of frameworks I looked into would be:

• CakePHP
• Lithium
• CodeIgniter
• Yii
• Zend

One the whole all of the frameworks, except for CodeIgniter, confused the hell out of me. I think this is part ignorance on my part, as I knew nothing about using/understanding frameworks, and partly that I used CodeIgniter first, based on a recommendation by Andrew Ellison.

A couple of weeks ago, however, Rumblelabs, the people behind Onotate gave a fantastic talk about how they built their webapp... and all the things that they did that people shouldn't do. It was a pretty unique look at how to go about developing a webapp as, instead of going over the process of how people should do something, they were sharing information on what they had done wrong. They also made me decide to look at one of the other frameworks I'd experimented with, as opposed to going with CodeIgniter. Their project, eventually, was built up using the Yii Framework.

'Bout Yii (blatantly stolen heading from the Rumblelabs Talk)

Yii is, to be blunt, fast it was designed with the following questions in mind:

1. Is it fast?
2. Is it secure?
3. Is it professional?
4. Is it right for my next project?

The answer, and what their name is an abbreviation of, is "Yes It Is". Yii confused me at first because of the way their tutorials start, with a rather vast amount of command line prompts which I have limited to no experience with. Since my first experiences with Yii I've had a bit more experience with making magic happen with the command line. As such I've found things a bit easier to work with than in the past.

There's one other advantage of Yii, which I'm hoping to make use of later in my project, it's ability to serve up files quickly (especially when caching is turned on).

Is it right for my next project?

Yes it is. After having taken some time to sit down and get Yii actually working there aren't many differences between it and CodeIgniter in terms of how it works. As I've mentioned above learning how to use a framework is largely framework-agnostic, so the skills I've learnt using CodeIgniter should transfer pretty easily to Yii.

In my last post I was speaking (ranting maybe?) about how important idea generation is, and going over some of the tools that are available to people to help kick off the whole idea generation side of things. Given how important it is to sit down and think things through it's only reasonable that I sit down and take my own advice, and today's post is going to be following my progress with it.

What do I need ideas about?

Before I could sit down and get the ol' brain juice flowing I needed to work out what I wanted to generate ideas for. The obvious choice is, at this point, my Major Project. In particular I wanted to come up with ideas for design concepts. The actual content that I need to work into the site itself is well documented (as other sites that handle referencing have been around since the beginning of the internets), but I want the design, as well as the functionality, to be memorable to the users. There we go, topic sorted.

At this point I got out my trusty Eason's notebook so I could start scrawling down ideas as I came up with them. I also enlisted the help of Simon Fraser to help me come up with ideas, as two heads are better than one. I also returned the favour and helped him generate ideas for his own Major Project. Us students need to stick together, right? The end result of this can be viewed below:

Taking Ideas away from the Mind Map

The above covers quite the range of ideas. Some of them I was able to immediately write off as being to negative, or as being unrelated to the kind of thing I would not be interested in pursuing. Two of the areas I covered are things that really appeal to me. The idea of paper/notes kind of thing strikes me as being quite relevant.

The amount of times I've seen students carrying around books with stickies being used as makeshift bookmarks, or seen students writing down notes on scraps of paper for later reference. You can see this influence in the little sketch towards the bottom of my mind map. It also makes me think of the style I used on a friend's site, though it is very image heavy, something I try to avoid.

Moving Forward

For a few minutes of sitting down and throwing thoughts onto a piece of paper I have already been able to identify the general direction I would like to take the visual design of my project. This is something for me to explore further in the future but, in the immediate future, I think I will be looking more into the Information Architecture of the site, as there is little point to having a design if it doesn't work with the content that the site will have in it.

So much to do, so little time to actually do it in. Twelve weeks may look like a long time when you see it on a calendar but, when you're in the thick of it... not so much. I feel like I should be pushing forward with my project more than I have been to date. As a result that's exactly what I'm going to do, step up the pace with my Logs, and actually start adding content into the other modules.

Most of that is irrelevant to this post though. Today I'm here to talk about ideas and, more specifically, idea generation.

The Importance of Ideas

Ideas are important. Without them nothing is new or, perhaps more importantly in this day and age, nothing is unique. When it comes to a product or a project it's very rarely possible to create something new, but there is always some approach that can be taken to making something memorable.

Making something memorable is important for numerous reasons. Life is fleeting, and every moment you don't remember is a moment that you can't get back. In addition to this, those of us who seek to be designers also need to make the things we produce stand out, be unique and be memorable. The ultimate goal of a designer is to be able to live off of the skills he has developed and honed and, to do this, the work they produce needs to stand out and be memorable. If it isn't why would anyone even consider hiring them?

As such, it's important that we always strive to come up with great ideas, different ideas and try new things. It might not always work out, and not everything we think up will necessarily be useful in the long run but, if we don't, we run the risk of deciding what we produce is 'good enough' when we should always be pushing ourselves to be better.

Idea Generation

Always trying to generate ideas helps us do this. By refusing to look at something with a pre-existing viewpoint we are better able to create something that is really ours and not just going with the flow that everyone else follows. Not that doing so is necessarily a bad thing, so long as you have a reason to. Ultimately thinking forms an important part of the (or at least my) design process. As with everything else we work on or with, there are tools we can make use of to make things easier.

• Brain Storming & Mind Mapping
• Oblique Strategies
• Mood Boards

Brain Storming & Mind Mapping

Brain Storming & Mind Mapping are quite closely tied, as each involve something of a quick fire round of getting ideas. This can be useful as there will typically be some little pieces of gold nested in amongst the large quantity of useless ideas. Mind Mapping, as was demonstrated in our last lecture, allows us to create a wide range of ideas that can then be combined in ways we hadn't come up with, like combining lightning and chocolate to create shockolate ¹.

Oblique Strategies

Oblique Strategies are a new (to me) method of helping you approach a problem as it defines a role for you to use as an approach to the problem at hand. This helps cut out decisions that might otherwise slow you down and also provides you with a specific (and different) perspective to approach things from than your own. I've not had much of of an opportunity to play around with this approach but, as with most tools, it's always handy to have them on hand because you never know when you might need them.

Mood Boards

Mood Boards are another tool to help generate ideas. Rather than spark idea generation by writing down ideas as you have them, or by using a card for guidance, mood boards help generate ideas using visual input. You gather images related to the topic at hand, or various aspects of the topic at hand, and use the imagery gathered to help generate ideas for concepts you can use with the project.

Don't Limit Yourself

As designers we can quite easily get set in a path of making things a certain way, doing things in a certain order and, ultimately, looping through the same processes, same ideas, again and again. Whilst this is quite often enough to get by, it does nothing to help you stand out. The above are tools to help avoid that, but there are always other ways to generate ideas.

Don't limit yourself to a single process or a single way to get things done. There are certain tools that are best suited to certain jobs, something that is as true in a digital landscape as well as an analogue one. You might not always need to use the tools you collect, but it's always a good idea to have tools that you may need in the future.

Spent some time doing some research into domain names this week for my referencing WebApp. As you can imagine there are already quite a few domains already being taken.

Fortunately I, just this morning whilst waiting for Tim to work down his list of people, found a domain that wasn't taken. http://referenceit.co in particular was the domain that I stumbled upon and noted it down as something that I wanted to talk about with Tim.

So Tim and I got to talking about various things regarding my project, as well as some freelance work I recently completed. I'm putting it down to my name being near the bottom of pretty much every alphabetical list. Tim wasn't too sure that a .co domain would really be the best fit for the target audience for my project. Whilst designers, and increasingly Twitter users, are becoming accustomed to .co domains, many of the people that comprise my target audience may look at the same domain and assume that it's a typo, that the domain should be a .com.

As a result I ran a quick search on the site I was on to see what else there was on offer, using referenceit as the basis of the search. The end result of this is that I'm now the proud owner of the domain http://referenceit.org (which currently redirects users to my DES511 Learning Logs) along with some hosting from the fellows over at BigWetFish.

Looks like I'm getting the ball rolling on this Project already. Expect a few more posts over the coming days covering some of the other bits I've been cooking up regarding my project, including such exciting things as Brain Storming (aka Thought Showering), Mind Mapping and some more experimentation.

I mentioned in my last post that I had done conducted some research into already existing quoting/referencing tools out there. As a student I've used many and some of them are fantastic little tools (note that I'm not saying this because some are designed my IMD Students). Today's post is going to be taking a little look at some of the common elements of these places and what I think could be improved in my iteration of this field. I'll also be taking a look at some other sites that, whilst unrelated to my project, provide some interesting ideas that I feel could be implemented in my project to make it as effective as possible.

So what's the competition

Referencing is an important thing when it comes to academia and, as such, there are quite a few tools out there for referencing content both online and from more physical mediums. In no particular order here are a few tools I have found over my time as a student:

• Harvard Style Reference Generator from Neil's Toolbox
• Harvard Referencing Generator by Andrew Ellison
• RefWorks
• EasyBib
• BibMe
• Son of Citation Machine

Most of these have something in common, they're all used to create references in the a single, or in some cases collection, Referencing Style. The one other thing that they have in common is that they all require the user to copy and past the required data to make the reference. Andrew Ellison's offering is, in my own opinion, the best of these tools because he has implemented some controls to automate some aspects of reference generation (in particular with printed media).

BibMe is a tool that I was only just introduced to by one of my friends across the pond and is actually a rather impressive offering for referencing material, but only offers references in a single format and still requires data entry. It still serves a purpose but I feel that it could be made even more flexible.

Keeping things short (for a change)

Looking up at the above there's not really a lot that I've said about any of the different offerings currently available. I've always been a big fan of the work Andrew Ellison has put into his referencing site but I can't help but feel that things could be taken further if the time was available to him (I understand that as a full time student and as a student on placement this isn't always the case). If I were producing this as a piece of work outside of the IMD course I would love to work to help better the site he has instead of creating my own version from scratch.

Other sites bring interesting suggestions that I feel will be of use to a webapp that focuses on handling the content on other sites. One in particular is...

Forrst

Forrst is a website aimed at developers and designers, regardless of experience or knowledge, and provides a platform for users to show off work, code and receive feedback on the things they post. As such it provides a fantastic resource for people to learn and see new things, part of the reason I contacted the owner to enquire about getting invites for IMD Students (if you're interested, get in touch). Promotion aside there is one particular aspect of this site that I love and think will be of use in my Major Project:

The above is a popup that is opened by using a JavaScript bookmarklet. What it does, with this particular site, is pulls in the URL of the site that the user is viewing when they click the bookmarklet, and fills out this area of the form in the resulting popup. This has a few advantages:

• It's the valid URL
• It saves the user from having to copy/paste
  • It cuts a step out of the user's workload

One of the big advantages of this is that it means that the user doesn't have as much work to do, it's easier for them to hit a button on a page than open a new tab, go to the site, hit the New Post button and then having to copy and paste the URL from the other tab. Making things easy for the end user make the end user more willing to use what you offer them.

How does this help me?

One of the things I've said that I want my webapp to do is make it as easy for the user as possible to interact with the site. I don't want the user to need to open that second tab. I don't want them to need to copy and paste a load of different pieces of information... I've done that and it's frustrating. What I want is a webapp that can be used wherever the user is, that is only a matter of clicks away and that doesn't involve copy/paste at all if possible. Unfortunately there is some room for error in this but, with most sites, I will be able to gather the following information (as demonstrated previously in my logs):

• Page Title
• Page URL
• Date/Time of visit
• Selected text
• Author
  • This one is iffy and may cause false positives. Different sites mark the author up differently. I intend to look at the hAtom Microformat and will probably use it as the base of decisions for post authors, leaving the author field blank for user input.

Implementing something like this will, I hope, help provide a tool that will make it easier for students and researchers to collect, store and review the sites they have visited (and referenced) over time, as well as references made using other mediums as the project develops.

Major projects are rather a lot of work. Whilst I'm sure that everyone reading this is already well aware of the truth behind this statement. When it comes to dealing with a lot of work, there is one thing that stands out as being highly important. Having a plan. This post is going to outline the thoughts I've had regarding this and to help me organise my thoughts to come up with a plan of attack for my project.

Sorting things out

I already know what I'm going to do, but what does it all equate to? Without measurable goals and aims, how can I determine if I've been successful in what I am setting out to do? What do I want my project to do? The project I've settled on is one I've been thinking of using for a while now. The following is an expanded list of goals I am aiming to achieve by the end of the year:

• Wide scope of use
  • Website referencing initially, but aiming to expand into other areas as project develops
    • Starting with print, and going from there
• Easy to use
  • Cutting out the middleman, you don't need to go to the app, the app will come to you
    • JavaScript Bookmarklet (designed to work cross-browser)
    • Possible expansion into browser specific extensions (for better integration with browsers)
  • Records of references stored in an account, so your data is available to you wherever you go.
• Usable everywhere
  • Aim to support multiple reference methods
    • Starting with Harvard Referencing
    • Expanding into other methods (starting with APA)
• Make data accessible
  • Provide a clean, appealing, site that helps users get what they need
  • Focus on user data, helping them reference material quickly and easily
    • Make it easy to access this data later

As you can see, there's quite the list of, well, stuff there that I want to do with this site. Reading down the list I can already see that it's in no specific order with regards to how I'm going to approach implementation of the aspects of the project. This is evidenced by the repeated mentioning of "expanding" into other areas, so clearly this isn't anything even close to a plan of action. Let's see what we can do to help clear things up shall we?

To Do Lists

To do lists are great. They make it nice and easy to work out what it is you want to do. I know that what I want to do isn't going to fall into place overnight and that some things will take a higher priority over other aspects of the project. As a result I think that rather than have one big list, as above, it would be infinitely better to break the project into more manageable chunks or, to word it slightly more elegantly, Phases.

Phase #1 - Research

The first phase is more of a research stage, used to help me scope out what is already there because, quite simply, it would be foolish not to see what is out there. I'll also be using this as an opportunity to let me look at sites not related to referencing, as sometimes ideas can (and already have in my case) be found in sites completely unrelated to the area you're looking in. It also includes experimentation which, if you've been following my work of late, you'll have already encountered to some small extent. At this point this phase looks like:

• Identify pre-existing products
• Explore unrelated avenues for ideas
• Identify why my project is worthwhile

At this stage a lot of this kind of material has already been looked into and explored. I'm covering it here to provide an insight into the process I'm following with regards to my project. I should have a post up early next week covering the details of this phase.

Phase #2 - Identification

After having looked at what is already out there, phase #2 is dedicated to laying out the groundwork that will make up the following phases. Parts of this are common sense, breaking down the list up above into sequential, smaller, parts that make it easier to implement the different aspects of my project. After all there's no point in creating a reference submission form without having done your homework on what exactly is required for the whole thing to work. This means that phase #2 is broken down into the following three elements:

1. Identify User Requirements
2. Identify Project Requirements
3. Break Requirements down into manageable chunks
   • Includes ensuring that they are ordered in a fashion that actually makes sense and works.

This phase allows me to organise my thoughts and formulate a plan of action. This will allow me to work through the different elements of the project. It also provides a method to measure progress and helps ensure that I am never left wondering what needs to be done. In addition I will also be able to dedicate time only to the matters at hand, without worrying about missing out something important.

Phase #3 - Components (Agile Computing)

Phase #3 is a weird phase, as it's a recurring phase. This phase allows me to work my way through all of the areas identified in the previous stage, one at a time, to produce completed elements of my project. This is useful in terms of testing and development, as it is easier to both develop and test small parts of a solution as opposed to creating a big mess of code and being confused as to what is breaking and why.

Piecing together smaller elements of code also provides speedier completion as I can focus on single aspects that I can then complete both quickly and efficiently and test thoroughly before moving on to another aspect of the project. Each piece will also be ready to implement before the next piece is started. This, of course, leaves me with a series of pieces in a puzzle that need to be assembled. Which leads me nicely onto...

Phase #4 - Piecing it all together

This phase is similar to a game of Tetris or a jigsaw puzzle. At this point I will have a series of pieces that need to be slotted together in as efficient a manner as possible to create a complete product. I have had experience with this in the past, working for clients as well as working on my own CMS packages (one of which is still being developed and powers this blog). As such I anticipate this being a rather easy phase for me.

Phase #5 - Monitor, Review, Improve

Monitor

By this stage I will have a complete product. It should do what it does very well, being both quick and secure, but you can never rule out the ability of the user to break something you hadn't though of. This is why monitoring things is important, to ensure that things don't break and, if they do, to fix them and then ensure that the cause is identified and resolved. There's no point in fixing something if you don't prevent it from happening again.

Review

Reviewing is useful to ensure that you have made a product that matches up with what your users want to use. It could be that some users would prefer things to work differently and this might need to be implemented into the product.

Improve

Just because a product has met it's original goals doesn't mean that it cannot be improved or expanded on. You can see in my original list that there is a list of things to do and that it also includes things to do at a later date. The initial focus of my project is to provide an easy way to quote and reference online materials, but I want it to be capable of so much more. Once I have laid out a solid groundwork that I can use this will afford me an ideal platform to expand into referencing material from other mediums.

Last week I wrote a quick little post about having two options that I was going to experiment with, to see which of my two ideas would be a best fit for me. (Un)fortunately for me, this decision was made quite swiftly for me, as I was unable to get some required pieces of the puzzle that would make experimentation possible.

The image above, as you can hopefully make out, is an error that I receive when trying to run ffmpeg-php on my local web server. I've done everything I can try to get it working, and it's simply refusing. Given that I can't even get the basic functionality running on my own machine, I feel that developing a video conversion service may be a bit beyond my capabilities. If I can't get it running locally to test, I feel that things will only be downhill if I pursue this project.

Moving on

Fortunately I was in a position where I had two ideas that I was happy to work on, so this neatly places one in front of the other. I've already started playing around with this particular project, trying to work out some aspects of it (in particular how to get selected text from common browsers) which has been equally fun and frustrating to deal with. This comes down to browser implementations of some things. To break it down, there are two categories that browsers fall in to:

• Good Browsers, which support common methods of implementing things:
  • Firefox
  • Chrome
  • Safari
  • Opera
• Frustrating Browsers, which do things in their own random fashion, earning my eternal hatred:
  • Internet Explorer

As is often the norm with any kind of client-side code our beloved friend Internet Explorer (versions 6-8, I have hopes for IE9) play off in their own little corner of the standards playroom, refusing to use the same toys as the rest of the browsers out there, even to the point of requiring some really back-asswards implementations to make the most simple of things work. Fortunately, due to the age of these particular browsers, there are a great many resources made available on the internet for frustrated people, such as my self, to find solutions on.

The Decision is Made

So, courtesy of issues with my Mac refusing to play nice with the idea of ffmpeg-php, I have found myself unable to go down that avenue. This leaves me with my Referencing WebApp for students. I've been conducting some research into this and I have had some resources pointed out to me by Peter Nicholl that will prove to be of interest and will form a part of the research I'll be conducting over the coming weeks.

Do you want to know more?

To find out a little bit more about my final decision for my Major Project you can check out my first week article, "This could be EPIC", which covers the three ideas that I had for my Major Project.

On Friday I was chatting with Tim about the ideas I've had with regards to my Major Project. Of the three ideas I had we agreed that there are two that have the potential to make for good Major Projects. You can check out my post about my ideas here. The two ideas that we both thought had the potential to be turned into Major Projects were the first two, my online video conversion/hosting package and the idea for a WebApp for quoting and referencing things.

I've not yet decided which of the two I really want to pursue through to completion as both strike me as good ideas, and both have their upsides and downsides. So I'm planning on taking a week or two to experiment with various aspects of each to see which seems to fit with me better. Today has the first little piece of said experimentation, playing around with handling selected text on web pages, along with collecting some other little bits and pieces of information.

I don't really have a whole lot more to mention in this particular post, as it's just a quick update on what I'm doing. You can check out the quick demo I've thrown together here.

So it looks like I'm back for another year of hard work, drinking excess amounts of coffee, producing designs and developing code. This week's work is probably going to be a little bit sparse, as I'm still getting settled into the way of uni life, as well as working to finish off my last piece of client work before I dedicate myself more fully to producing high quality work. Watch this space folks, things will be picking up around here shortly.

This first week has dropped pretty much all of the final year students straight into the thick of things, both in this module and in others. So what are we looking at in terms of work for the 511 module? The ultimate goal for this year is to produce an awe inspiring Major Project. This week, we had to come up with possible ideas for our Major Project.

Disclaimer: Content is going to be a bit text heavy this week folks. I'll probably go back over it in the coming days and pretty it up but I wanted to get the content up so I can get some feedback on my ideas, rather than make sure I have a beautiful looking Log with nothing to get feedback on.

Major Project Prospects

I can't speak for everyone, but I've actually been quite looking forward to the idea of producing a solid piece of work under my own steam, without having to worry about the client requirements changing, or someone moving the goal posts. As a result I've thought quite a bit about the kind of things I'd like to do. This week we had to mail Chris a list of three ideas for a Major Project. For me, this was largely a case of choosing which of the ideas I've already come up with would make it into the mail.

Rather than bore people with the thought process I undertook in coming up with my ideas and deciding on the three that I chose to send (honestly, half of the ideas came about as spur of the moment ideas, or solutions to problems I've encountered) I think I'll just dive straight to the point this week, and cover the Major Project ideas I've come up with.

Video Conversion/Hosting Service

I've always been something of a developer as opposed to a designer. This prospect would provide a way for me to combine both my design and development skills to provide a useful service, with a visual appeal that would make it easy for users of the site to understand.

With HTML5 becoming increasingly popular more and more people will be looking for an easy to use/implement method of getting their videos online and using them in sites. You can see this happening to some extent with YouTube and Vimeo, both of which provide options to view video using HTML5 as opposed to their traditional Flash implementations.

Unfortunately both of these sites have issues with their implementation as I see it. YouTube and Vimeo both only use the H.264 codec for conversion of video, which is only supported in some browsers (Safari, Chrome and IE9), with browsers such as FireFox and Opera left in the dark. These other browsers lean towards more open video codecs, such as .ogg and .webm formats. Additionally there are limits with regards to the implementation of HTML5 video in web sites. YouTube flat out doesn't support it, and Vimeo only provides a solution based on iframes - something I wouldn't like to use myself as a designer.

What I would like to do is provide a visually appealing and easy to use method for users to upload video to be converted into the various formats needed for a true cross-browser experience (currently .m4a, .webm and .ogg), which will then be viewable both on the site itself as well as embeddable in sites using simple, understandable HTML tags, no need for iframes here. For older browsers that don't support the <video> tag, a flash fallback would also be used to ensure that the embedded video really is as cross browser friendly as possible.

Pros

• Is a topic in which I am greatly interested
• Provides a project in which I can make use of both my design and development skills
• Is a tool that could/should become increasingly popular as HTML5 usage increases

Cons

• Video Conversion/Hosting requires a lot of computer power and storage space
• The kind of server required to provide this service may prove prohibitively expensive
• Whilst I like development, I have no idea how to handle server side video conversion (though this may not be the case by the end of the semester based on FET Module Research)

Quoting/Referencing WebApp

As a student, both in University and of design in general, I often research various topics and materials for use in my written work as well as on my own blog. Keeping track of where I've visited, who I've quoted and when I quoted it can prove to be quite frustrating. Whilst there are various online resources available to help with proper quoting/referencing, such as Andrew Ellisons Harvard Generator these tools still require you to directly access them, something that can be easily forgotten about in the rush to meet deadlines. Additionally not every service provided will store the information you quote/reference which can be frustrating if you need to revisit content at a later date.

The solution I see for this would be to provide a webapp, with an additional bookmarklet, which allows you to either enter content manually, via the webapp, or to partially automate the process by using a bookmarklet. This bookmarklet would be able to automate some of the process, such as entering selected text, the URL of the site you're visiting (along with the Page Title) and the date/time of the visit. In addition it could attempt to gather information about the author if it is made readily available. As the reliability of some content would be questionable, certain fields (e.g. Author) would be editable to ensure that it is correct before being added to the user's collection of quotes and references.

The strength of this would be in it's flexibility, as users would be able to define how their references are laid out. They could make use of the Harvard Referencing System or the APA Referencing System, or any other system necessary and content could be outputted in a myriad of manners such as rich text, plain text, HTML or even Markdown.

Pros

• Clearly Defined Target Audience (Students and potentially bloggers)
• Easy to develop
• Easy to maintain
• Easy to expand upon (e.g. adding quotes/references from books based on ISBN Code with user entered data)

Cons

• Trying to provide a solution that fits all referencing systems may become problematic (how many referencing systems do people use?)
• Potential security risks with user entered data
• Finding an available domain name may be an issue
• Pre-existing solutions (a lot of similar solutions already exist)

URL Shortening Service

There are a lot of URL Shortening services already, which is why this particular idea is the last of my 3 that I am listing. The reason it beats out the other handful of ideas I have is that this service would be aimed directly at the design community, as opposed to a publicly available service. Why? To help avoid issues like these.

The problem with publicly available URL shortening services is that you have no idea what the link you're clicking on will take them to. It could be the latest and greatest in Web Design advancements, or it could be something that you really don't want to see. With a service dedicated to a specific community there is a reassurance that what you're clicking on will be what you expect it to be. This is one of the reasons many members of the design (and indeed other) community are opting to use their own shortening services, as it provides a level of assurance that public services don't always provide.

To provide an easy way to ensure that the site doesn't get overloaded by users, and to ensure that members are part of the design community, this service would be invite only. This would help ensure only designers would have access to the service but also helps in terms of scalability, and would help ensure that server/bandwidth issues are kept to a minimum.

Pros

• Provides assurances with regards to quality/relevance of links posted
• Accountability, as shortened links would be attache to your account, abuse the privileges you have and you could use them
• Invite Only helps ensure only designers are allowed to use the service
• Invite Only also helps ensure that the server can handle the current user base
• Potential for analytics based on clicks (to track popularity of your links)
• Potential for popular/recent links to be made available on the site's main page, helping spread design information in more areas
• Could help form a useful hub for design related information

Cons

• Primary use would be Twitter, which is rolling out it's own url shortening service
• Potential for user abuse
• Scalability could be an issue
• Getting users to use it could be an issue (as mentioned above, many users already have their own url shortening services)

Misc Ideas

In addition to the three I've listed above there are a few other ideas I've had, based on stuff I've seen but would like to take further or based on personal frustration. These ideas are:

• @font-face hosting - Like Google WebFonts but with a wider selection of fonts available.
• Online invoicing webapp - I liked the idea of this at the time, but I don't have enough of an interest it in to to pursue it.