Skill Set #1: Design

First things first – You need a good design. The attractiveness of a webpage can affect the users perception of credibility, the read rate and of cause, overall bounce rate. Here Photoshop is your greatest ally, quickly (a relative term at best!) mocking up several designs at (again relatively) little cost.

This skill set is as much about prior experience as it is intuitive design ideas – although the two do generally go hand in hand. Knowing what your audience likes is, perhaps, a skill of it’s own – ‘Monitoring’. Being able to take ideas from thought to paper (or canvas, in the case of Photoshop) is another paramount feature of designing.

Skill Set #2: Development

Phase two – The area that most ‘Website Developers’ are associated with. And with good reason. This code orientated skill set is based on taking the designs (from oneself, in a self sufficient methodology) and converting them to a functional structure. This often includes the knowledge of HTML, with DIV’s being the favored method for website structure.

CSS, a styling method, is also a must know language for development. The method in which a self sufficient developer does this is up to the individual; either opting for the quicker inline technique, or the more structured style sheet approach.

Skill Set #3: Content

This is the area that many, including myself, find most challenging. When done well it seems effortless and can definitely be the difference between a successful website and a struggling domain. But creating content for a page is a lot harder than it may seem from an outsiders perspective. Text is the key to most websites, and can change rapidly with altering trends. It does seem, for now at least, that the whole ‘Web 2.0′ friendly and personal approach is here and in full swing.

Text is only the start of it: There is images to contend with too!

Skill Set #4: Marketing

Often overlooked, this is probably the most important factor to producing a successful website (along with content, which is king, of cause). AdWords, Search Engine Optimization and all those other online marketing tools are essential for getting the word out to your potential readers / customers.

Managing your search engine result position (SERPs) with your chosen keywords is a fun and ongoing battle. SEO isn’t a one-time action: It takes constant maintenance (within reason) to ensure your audience keeps on flowing to your site (and converting, if that’s how you roll!).

Skill Set #5: Analyzing

The final piece to the self sufficient puzzle, analyzing those visits to the site is important in order to identify your strongest areas, possible pages of improvement and generally keep track of how you’re performing on the web.

You can track your performance against others, too. Competitors, friends or similar websites. Analyzing a developed website doesn’t mean that you’re finished: A good (proactive) self sufficient web developer will continuously use these individual skill sets in parallel to get the best results.

Now, I’m not saying that I write the perfect content – Far from it – But I like to think I put a degree of effort into my articles and have a style of writing which people can at least relate to. Now, talking about ‘computer things’ (as my mom would put it) doesn’t require a specifically sophisticated level of vocabulary. Technical, yes. But not sophisticated.

On the other hand talking about some subjects (namely food and film) are two which are generally associated with understandable, well constructed English.

Why the rant, you may be asking yourself?
Well, because recently one of my house-mates has decided to take it upon himself to ‘review’ (and I use that term loosely) both aforementioned topics. His self-confessed “not good at English” approach makes reading anything hard, and is particularly annoying when coupled with a lack of basic knowledge to base his ‘reviews’ upon. I’m talking more about food than film, as he does visit the cinema quite regularly.

But food!? It’s something I have a genuine passion about. I buy British, in season top quality foods. Comparatively, said house-mate buys cheap, fake, processed battered ‘food’ from god-knows-where. Is this OK? Can his food articles be justified with any sort of background knowledge? Sure, go ahead and review KFC, but not the best sandwich shop in the city!?

So, yes I’m laying into one particular a little bit – But it’s really quite frustrating when I spend so much time trying to get an article, blog and general website looking/reading well, only to have some badly worded, unjustified, poorly designed excuse of a blog knocked up in 10 minutes.

Again, I don’t know why its bothered me so much; bloggers pride, perhaps?

So, what elements should one strive to patch into a website to get the most out of their efforts? Well, it’s just that which makes a good blog; Effort. If you put a lot of effort into your blogs, being thoughtful in what you do (or sometimes don’t) say, provoking the reader to fire up a conversation via comments, then mission accomplished.

There are no magic rules for creating a good blog, but personally I like to read from a page which has a professional looking interface; Not specifically corporate, but looks like it’s been done by someone who gives a damn. If the aim is to look amateur with a sense of cartography, make it look that way, but lets see a degree of effort in the design to make it look like that!

Effort shouldn’t stop with design though. Each article should be clear and as mentioned, provoke a response from the reader. The style here doesn’t matter that much, but how it’s wrote does! No body will read something that’s been hashed together in 5 minutes with little thought, bad grammar, spelling mistakes and general lack of attention to detail. Adding images (fit for the style of the blog) can do wonders too; breaking up text blocks and adding a thousand words!

Of cause, it’s just my opinion, but if your reading this odds on you read the whole article, so I must be on the right lines, aren’t I?

But now I’m back, and have lots to talk about! In fact, as a signal of my return to the world of blogging, Iv’e bashed out three short articles on the work iv’e been concentrating on as part of my final year; Advanced Analysis and Design, Software Engineering, Business Analysis, Real-Time Analysis & Design and Project Management.

Iv’e tried to catagorise similar modules, using my own personal grouping criteria;

Advanced Analysis & Design and Software Engineering [The 'geeky' ones]
Business Analysis and Project Management [The 'business' ones]
Human Computer Interaction and RealTime Analysis & Design [The 'other' ones]

Of cause, there is also my Final Year Dissertation which I’ve been working on at points, which you can keep up to date with HERE.

Software Engineering was a console application developed to take in Algebra Expressions with sets as values and produce a structure tree, finally outputting a set of results. This was wrote in C++ and was supported by a 12 page explanation document. It was by far the hardest module I have had to complete over the entire four year course and isn’t a specialist area I wish to develop much above degree level. However it was an insightful lesson and made me quickly brush up on some coding practises which I had put to the back of my head.

Human Computer Interaction was all about the front end user interface and required students to design a direct manipulation training system (an interface which allows dragging, dropping, manipulating elements etc much like the Windows desktop). I opted to produce a cottage pie, and the interface (designed in flash) worked well with this concept. The user had the option and freedom to chop the ingredients as they liked, and simple steps ensured there was no serious error when replicating in a real kitchen.

This was a hard module to get to grips on, as I had no previous experience in Flash. I worked on this for the majority of the christmas holidays (including Christmas day!) but it was definitely worth it as I scored 78%, a solid 1st, which was the highest in the year! Proof that hard work pays off!

This post isn’t like the usual post you’ll find on this site – It’s actually a blog about… ME! Final year work has really brought home the frankly geekyness behind the degree which I’m doing. It’s software Engineering (Computer Science basically) which is pretty well as deep as any course will go into computing. Now, I’m not saying its a bad degree, after all some people love this kind of thing (100101011010) but its just not me! (If you don’t get the joke in the previous brackets it’s not you, either!).

The whole thing just seems like computing for computing’s sake. After a year in industry I really have had my eyes opened to the bigger picture. The marketing, the collaboration and the use of computers to accomplish goals, rather than accomplishing goals for computers. I guess what I’m trying to say is that although the course I’m on is fine, and I’ve learned lots of really interesting stuff over the first two years, the placement I undertook was much more inspirational and was definitely the kind of work I’d like to be doing in 12 months, rather than the work I’m doing now!

As a quick example, I’ll talk a little about some of my modules. I think you’ll get the picture. My favourite module would definitely have to be a toss up between ‘Business Analysis’ and ‘Human Computer Interaction’. Although there is almost no emphasis on computers at all in BA, the HCI module is really the softer side of computer science – The principles behind good design and how design is interpreted.

The least favourite modules would certainly be either Advanced Analysis & Design or Advanced Software Engineering. These two (both Advanced versions of the second year modules) are very computer specific and aim at developing mainly coding practise and designing the code (rather than the user interface like in HCI). They are much more ‘Computer Science’ than the first two, targeting much more in depth content (in depth to computing, that is).

I guess I’ll wait and see what happens by this time next year. One thing I am very happy with is my Final Year Dissertation, which incorporates a healthy balance of graphical design (HCI), marketing / business (Business Analysis) and coding (Soft Eng). I think it’s safe to say though that Iv’e developed considerably since year 2 at university and am certainly more focused on where I want to be in 12 – 18 months time!

For the design stage, I will create a flow diagram style image of the iPhone during various user interactions. For this, I will require a template to work with. (NOTE: the screen resolution of the old iPhone is 320 x 480 pixels. The iPhone 4 is 960 x 640 pixels. For the creation, I will produce a large image and scale down the for older versions.)

To make the flow diagram look as realistic as possible, I am going to use an iPhone 4 Graphical User Interface (GUI) Photoshop template, which you can download here. This is an awesome file which has almost all the individual pieces you need to create a great looking design! You can even download the high resolution “Retina display” version of the file from here. Beware though, this file is big (20+Mb), and takes a lot of processing power (It’s 4074×2986 in dimension!), so bare than in mind before opening up and editing!

Another great designer tool is ‘MockApp‘, which is put to particularly good use in PowerPoint presentations. This template is less resourceful than the last, and also allows you to interact with the design. For example, a product manager could, when presented with an iPhone image on a projector, click the app icon to open up the splash screen, and then the home page of the app. This gives a realism to the design which the flow diagram misses, and is a real good seller to stakeholders who are 50/50 about the idea of an app. But MockApp doesn’t stop there! Not by a long shot. You can present the PowerPoint slides on the iPhone itself, for added bumph! This is a real gem, and gives a good insight to developers and managers alike as to what the finished app will be like.

So, to conclude, the first resource any iPhone designer should use is a good high quality PSD Template, as mentioned above. Design the overall screens, and make it look fantastic! The other step is to use the lower resolution images from MockApp to design an interactive version, following the flow diagram where possible, to create an overall package which will blow whoever you present it to away!

So, that’s the design stage began. Check back soon in the Final Year Dissertation category for more blogs about my progress!

A little birdy told me Twitter is changing. Re-designing. Evolving. It’s been speculated for some time, but last night (September 14th, 2010) Twitter began rolling out it’s brand new user interface to some of it’s users. The 141 strong employee team have been busy, producing not only a lovely looking interface but also an impressive video to demonstrate the new features. Check it out.

The re-design strategy, much like Facebook did in 2006, 2008 and 2010, is a smart move, keeping the top-dogs of the internet fresh and up-to-date. It’s a principle which I like to follow quite closely, re-designing this site quite often! (Could be less as my final year approaches!). Sure, some people will dislike the change, but such is life. You don’t see anyone moaning about Facebook’s latest interface like you did back when they rolled it out in February 2010!

Twitter’s new layout is very interactive. One could say it’s almost trying to resemble a certain mobile device application look and feel? Not that there is anything wrong with this (Just look at the success of the official Twitter App for iPhone!). The smooth glides and efficient persona exuded by the new website succeeds in giving users the concept of a well-oiled machine. A lovely development from the Twitter team.

But what does a logo really say about a business? And how much thought should be put into logo design? Let’s view our first example, the FedEx logo. Take a look at it. Seems like quite a lazy logo at first glance. Simple bold text, obvious colours and not much thought. Think again. Can you spot any obvious looking shapes between the letters? Perhaps an arrow, in between the ‘E’ and the ‘X’. That’s something Derren Brown would have come up with!

My second example is the Amazon Logo. Now everyone and anyone is almost guaranteed to have seen this logo at one time or another. It, like the previous example, is a relatively simple idea, with a good looking yellow curve underneath the text. Until, that is, you look closely and see the mustard line pointing form the ‘A’ to the ‘Z’ of the Amazon. With Amazon initially targeting the book market, this would presumably resemble the A-Z nature of book organisation. Nowadays, with Amazon selling everything, the A-Z idea still fits perfectly. You’ll never look at the logo the same again. I wont, at least.

There are tons more examples of discreet logo design (try and spot the bear in the toblerone logo!). This just goes to show the thought and design practise that goes into some of the top brands logo creation around the world. It’s like one of those images that’s a woman smiling and a trumpet player merged into one. When you have seen the little secrets you’ll never see it the same again.

To conclude, a good brand and logo in particular can get a business off the ground. It is, after all, the first thing most customers will see. And we all know the expression, first impressions are everything. Not to mention a picture is worth a thousand words!