WebFramework

WebFramework Blog is dedicated to web design and web designers.

TIme anyone?

Andrew Larkin - Wednesday, March 11, 2009

Do you ever feel like all you do is work? Have you ever stopped to evaluate YOUR TIME in an effort to manage it better? Here are some tips on time management and the tools to help you!

In the past few weeks I have been recording the time I spend on various tasks (i.e. SEO, development, admin) in order find out where all the hours disappear to!  I have found I spent much more time on administrative tasks than I initially thought and was seriously neglecting time on generating new clients.

Now I intend to create a time budget (based on the ideal number of hours I work a day) which I can then split between various tasks.  This should help me plan my working week better and stop me cramming in too much development with very little prospecting.

Tools for the job

Now I already have a CRM system which takes care of all my invoicing so I was looking for a simple online application which would allow me (and anyone else) to log time spent on a task.  Nothing fancy...here is what I found:

 

trackmypeople

Track My People

Very easy to use simply add trackers and log time against them.  Still in it's infancy (I hope) because there are some fundamental bugs and UI issues...but it shows promise...an it's FREE!

 

toggl

Toggl

Bit too over complicated and busy looking for me.  It does the job but could be simpler.  Still it's FREE for up to 20 users.

 

timeiq

TimeIQ

Very simple and solid looking app and allows you to assign tasks to employees. Can host a team of up to 5 for only $15pm.

 

livetimer

Live Timer

Very easy and quick to get to grips with to use with its concept of a time ledger.  Costs $5 per user per month.  This is one I chose because it is designed to work with the iPhone and allows you to log time against a set of generic tasks.

 

Managing your time could not be easier.  So why not start today and find out exactly where all your precious time is going!!


Bookmark and Share

Agile Web Design - #2 Principles

Andrew Larkin - Sunday, February 15, 2009

The following principles are taken from the Agile Manifesto and applied to web design.  The similarities between software and website development are hardly surprising.  But to those with a graphic design background the concepts of Agile may seem quite foreign.

 

 

 

Software: Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.

Web design: Clients can struggle to visualise their website from sketches and graphics.  Delivering a working copy early on will help the client become more involved and increase the chances of final sign-off/approval.

 

Software: Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.

Web design: Update the working copy of the website regularly.  This allows the client to play with their website and understand what they have asked for, which in turn prompts more feedback and potential change.

 

Software: Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage.

Web design: Embrace feedback and change from the client.  Change is not costly if it is dealt with early and regularly.  You will never deliver the perfect website first time...it must be allowed to evolve.

 

Software: Simplicity--the art of maximizing the amount of work not done--is essential.

Web design: Do not waste time and money designing or developing something which is not required.  Start with a basic concept, which meets the relevant requirement, and let it evolve with the website.

 

Software: Working software is the primary measure of progress.

Web design: An effective website doesn't have to have all the bells and whistles.  Ensure you get the basics in place; then take it furhter if an when necessary.

 

Software: Continuous attention to technical excellence and good design enhances agility.

Web design: Web standards and best practices should be engrained in a website from day one.  Your working copy is your final copy!

 

Software: Business people and developers must work together daily throughout the project.

Web design: The client is the business expert and the website owner.  Only by working together can you ensure you meet their requirements.  Smaller projects may not require getting together daily but at least check in once a week.

 

Software: Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.

Web design: Make use of tools and resources and refine your processes to ensure you maintain momentum during website development.

 

Software: Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.

Web design: Make sure you use your team effectively.  Play to each other's strengths and make use of the right tools to get the job done.

 

Software: The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.

Web design: Team communication is vital.  Make sure you get together once in a while.

 

Software: The best architectures, requirements, and designs emerge from self-organizing teams.

Web design: The team knows when things aren't working so it should be up to the team to improve.

 

Software: At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behaviour accordingly.

Web design: Review team performance to highlight strengths and weaknesses.  Work on the weaknesses next time but remember to play to your strengths!

 


Bookmark and Share

First Impressions

Andrew Larkin - Wednesday, February 11, 2009

This article looks at how to ensure the first meeting with a new client lays the foundation for a good business relationship.

We all know the importance of first impressions and how they can make or break a relationship.  How you dress and how you talk play a major role in this but I would say the primary factor is how you listen.

Ask the right questions

Talking is about listening.  You don't have to be in a relationship with someone for very long to understand that!  But to do this you need to ask the right questions. 

The first meeting is all about the client, their business and how you and your website can help.  You need to ask questions which reinforce this, by focusing specifically on the client's business.  Engaging the client on a subject they are comfortable with increases their confidence and begins to build trust in the relationship.  It also makes sure you get all the information you need to deliver an effective website, tailored to the client's business.

Avoid the wrong questions

At some point you may need to find out certain technical stuff (i.e. number of users, emails, etc).  This does not mean you need to suddenly put on your geek-hat and undo all the good work.  It just means you need to rephrase the question to keep it at a business level. 

For example:  How many email addresses do you think you will need? -- becomes -- Do you have specific departments/employees to handle website enquiries?

The answer to the first question will almost definitely be, "I don't know".  By rephrasing it you find out how to incorporate website enquiries into the client's business, how these enquiries are expected to be handled and you can then decide how many email addresses are required to fulfill this expectation.

So here are my top tips for ensuring you get the most out of the first meeting:

  1. UNDERSTAND THE BUSINESS.  LISTEN to the client and don't make assumptions.
  2. ASK THE RIGHT QUESTIONS.  Leave techie-talk at the door.  Talk business!
  3. TAKE NOTES.  Don't worry about getting the client to repeat things.  You could even try recording the meeting!
  4. SUMMARISE IMPORTANT POINTS.  Ensure you and the client are both clear about the essentials.  Misunderstandings can cost more than just money!
  5. DON'T FORGET TIMESCALES.  Be clear about deadlines and always discuss contingency.
  6. ASK ABOUT PRICE.  Don't be afraid to ask about the clients price range.  Essential if you later have to bid for the work.
  7. FOLLOW UP.  Email a summary of the main points and next actions for both parties.

 

Recommended reading (and viewing)

How to think like a client - great in depth article on clients and their business

Educating clients to say yes - video presentation from FoWD


Bookmark and Share

Agile Web Design - #1 Introduction

Andrew Larkin - Sunday, February 08, 2009

The web industry is an ideal proving ground for Agile development yet there seems to be little practical advice on how it can be applied to web design!  So here goes...I am going to provide a series of articles which define how I apply Agile to web design.

Introduction

I am not going to spend too much time introducing Agile as there is plenty of material out there which does exactly this (see Agile Manifesto or Wikipedia).

For what it is worth though I view Agile as an iterative process where requirements are decomposed into small chunks of work (analysis, design, development, testing)  which can be estimated and prioritised into scheduled iterations usually lasting from 2-4 weeks.

Requirements start very simple and evolve with each iteration as discussions between teams and customers get down to detail.  Testing and customer feedback leads to change in the form of bugs or new requirements which are simply fed into the future iterations.

Agile is well suited to projects where it is advantageous to involve the customer early, deliver quickly and regularly and be open to change.  So I think this makes it ideal for web design!

Agile Design

Now some people say web design (or design in general) is not suited to Agile.  I disagree. I think all work can be decomposed into tasks which can be estimated and time boxed.  The design process is exactly what Agile was invented to support (or contain depending on your view).  Designers and developers are no longer locked away for months and left to conjure up magical, but unfit solutions.

In this series I will look in detail at how I approach web design from an Agile perspective.  I will also look at the approaches I have adopted to ensure quality, SEO and accessibility are ingrained in my websites.

Recommended reading


Bookmark and Share

Practical web design guide

Andrew Larkin - Wednesday, February 04, 2009

I found this book (courtesy of Boagworld) which can be downloaded for £12.

The book is

A Practical Guide to Designing for the Web

and the website says it aims to teach you techniques for designing your website using the principles of graphic design.

I have downloaded it and will post a review shortly. Quick look a the contents page and other reviews suggest it to be a great overall guide to applying core graphic design principals to the web. Sounds ideal!


Bookmark and Share

Beginning in Web Design - #2 Getting experience

Andrew Larkin - Sunday, February 01, 2009

This is the second in a series of articles about beginning in web design.  Last time we talked about how to decide which area of web design was for you, which skills you require and how to start your portfolio.

So you have your skills, you have your portfolio but maybe you have nothing in it yet.  Or you have a series of graphics from a course you attended, shots of fictional pages you invented or some fancy code demos.  Any of the above is a good start and nothing to get worried about.  The main thing is you have started to think about selling yourself and the next step is to prove you can do it! 

Getting some real experience

Skills like education provide a good foundation for you to build on but foundations can only take you so far.  You need some real life experience!!  I would suggest starting where you are comfortable and where you have the advantage.  Why not create a website for someone you know?  This greatly simplifies the sales process.  If this doesn't work then get in touch with the WebFramework...we are always looking for volunteers.

Do a website for your football/netball team, your Mum or Dad's business, the local church/charity, your school, university or college.  Even if you are concentrating on development skills you can simply provide the basic interface (or use a design template) and concentrate more on the back-end stuff.

This way you get experience in researching, designing, developing and delivering a website for a real customer.  You can charge as little or as much as you feel comfortable with but DO CHARGE for it.  This way you are guaranteed to get a more realistic experience overall.

Getting the most from the experience

You will most likely be managing the entire process yourself: preparation, analysis, design, development and testing.  How you manage these phases is a whole series of its own!  But there are some tips which can ensure you get the most out of every website you create:

  1. Remember...the website belongs to the customer!  It's easy to take control and think of the website as your own.  You might create the site, but the customer has to live with it.
  2. Do your homework about each customer.  If you fully understand the customer's business you are better placed to understand what they want. 
  3. Set expectations from the beginning.  Make it clear what you are going to do, how you are going to do it and what you expect from the customer.
  4. Define clear goals for each page as well as the website and verify them with the customer.  This way you can measure and prove the success of the website. It's not just about fancy designs you know ;)
  5. Gather and analyse feedback from as many users as possible - friends, family, customer's friends, family, etc.
  6. Gather and analyse feedback from each customer.  Find out what they thought of the whole process, from the initial meeting through to the final product.  Check back with them in two or three months.

Hi there, I'm a Website Designer

So now you have some websites under your belt.  Congratulations! You're a web designer!  You have a good understanding of what is involved in the web design process at its simplest level.  There will be some bits you enjoy and some bits you don't.  Maybe you have to rethink where you see yourself best placed in the process.  Maybe you realise web design is not for you after all.  Maybe you have taken to it so well you are simply going to increase your prices and go it alone. 

Whatever the outcome you now have some experience to help you on your way.  You now have a portfolio with some living, breathing websites in it.  Go forth and prosper!

 


Bookmark and Share

Beginning in Web Design - #1 Where to Start

Andrew Larkin - Saturday, January 24, 2009

This is the first in a series of articles designed to inform those who are starting or thinking of getting started in web design.

So you have your heart set on web design?  I am not going to dwell on whether or not you should consider web design because if you have the desire, I have no doubt you will succeed in whatever you set out to do.  But there are a couple of things you need to consider. 

Areas of web design

Within web design there are two main roles - designer and developer.  So you need to decide which is best suited to you and your skills.  Designers works with tools like graphics, concepts, styles, themes and trends whereas a developer works with code, data, functionality, frameworks and libraries.  No matter which area you choose, having knowledge of both areas can only be a good thing and will help you understand where both designers and developers are coming from.

Getting the right skills

There are certain fundamentals which all who work in the web should understand to some level: HTML, CSS, web standards, accessibility and SEO.  These provide the foundations required to design or develop effective websites.

If you are planning to design websites you will need an understanding of typography, graphic design, colour and usability.

If you are prefer development you will need to be fluent with HTML, CSS, JavaScript, databases and scripting languages such as PHP/ASP.NET.

Colleges and universities provide courses on web design and development, but this is not the only way to pick up these skills.  The web provides a wealth of tutorials, articles and practical examples which you can start using now!  Check out our WebFramework Resources page for places to start.

Selling yourself

Got the skills required to succeed in your area?  Now you need to be able to sell them and you.  This is vital if you are looking to do freelance work but it is also important when being interviewed for jobs.  The best way to begin to sell yourself is get your portfolio and/or CV sorted.  This gives you the chance to write about yourself, your skills and show people why they should be interested in you.  This is your sales pitch!

Tips to create an online CV/Portfolio

Simply start a free blog page (i.e. WordPress or blogspot), post some information about yourself and then put work up there and write about it.  Be sure to include:

  1. Opening paragraph - should be short, concise, playing to your strengths and passion for web design.  Be sure to mention any experience you have.
    • for example: I have been a keen follower of website design for over 2 years.  I am a dedicated, reliable and hard working with no commercial experience, but an eagerness to learn and feel I have the necessary skills and commitment for success.
  2. Skills summary - simple list of your skills showing what level of expertise you feel you have.
  3. Contact details - people need to be able to get in touch!
  4. Portfolio of your work - even if you have no experience you can still get creative and produce sample pages/code demos for fictional projects.

NOTE: BE HONEST! Don't be afraid to say you have no commercial experience or that your portfolio contains samples for fictional companies.  People respect honesty and respect goes a long way in life.

Once you have created some sample work, take screen shots, post them on your blog and write about them. When writing try to answer these questions:

  1. What purpose does it serve (i.e. what did you set out to achieve)?
  2. How did you arrive at the solution (i.e. how did you achieve it)?
  3. How could it be improved in the future (i.e. scope to add more/change what's there)?

What's next?

So now you have an idea of where you want to go and how to take the first steps in getting there. Next time we will look at how to sharpen those skills, building on your portfolio and gain the vital experience you'll need to become a web designer.

Check this out


Bookmark and Share

The Dark Knights

Andrew Larkin - Wednesday, January 14, 2009
Black is the new white and red will soon be the new black.  In the meantime lets take a look at how black can be used in design.

Here are 5 websites which make use of black in some way.

1. itsartist - itsartist.net

+ Very simple use of black on white gives a feeling of distinction and decorum.
++ Subtle black borders really make this complex grid layout work.
+++ Black typography really complement the overall look and feel.


2. Knassar - knassar.com


+ Subtle, light borders help separate the content nicely
++ The contrasting lime green gives the site a funky feeling.
+++ Gradients help bring light and draw attention to content.


3. Mixtape Wall - mixtapewall.com

+ Black wooden background texture reused throughout the site gives consistency.
++ Good use of the light blue headers and links to draw the eye.


4. Media Temple - mediatemple.net

+ Black header and dark background draws your attention to the slick graphics
++ Good balance of black and lighter greys makes the site quite light overall.
+++ They know their audience.  Men like things black, shiny and on fire!


5. Der Vigilant - der-vigilant.de

+ Nice one to finish the post with.  No mistaking the use of black here! 
   Lots of depth to what is a very dark site with a limited palette.

Bookmark and Share

Actions for 2009

Andrew Larkin - Sunday, January 11, 2009

.NET Magazine's February issue had a nice section on future trends for 2009. 

So I thought I would list their top ten tips for this year with some additional comments and actions so you can put them all into practice today!

 

 

#10 - BRING ABOUT CATHARSIS

Basically look to global organisations to align their prices and stop ripping people off!  In my opinion these companies should be named and shamed publicly and openly so if it does affect their sales they know why and don't simply up the price in the future.

Action: Check forums and offer your support.

 

#9 - MASTER JAVASCRIPT

According to Eric Meyer JavaScript performance and capabilities will be key.  Asynchronous JavaScript coupled with Canvas means we no longer have to rely on Flash for a richer UI experience.

Action:  Get stuck in!

 

#8 - THINK REFURB NOT RELAUNCH

Often a few cost effective tweaks can improve your client's website significantly and save them £££s compared to a full redesign.

Action:  Offer a mini-upgrade service to existing clients with dated designs.

 

#7 - DIVERSIFY YOUR CLIENT BASE

Appealing to a wider client base can only be a good thing in the current climate.  If you are reliant on a main client/sector then you may be setting yourself up for a fall.

Action: Analyse your client base and see if you need to diversify.  Highlight new sector(s) and tweak your services to appeal to those new clients.

 

#6 - CONTINUE INNOVATING

Reinvention enables designers to develop new opportunities and catch the attention of potential clients.

Action: Surround yourself in latest design concepts (blogs, websites, forums) and take 15 minutes each day to draw.  Check out our WebFramework Ideas for inspiration.

 

#5 - INVESTIGATE FRAMEWORKS

Frameworks for JavaScript and CSS offer ready made code which is tried and tested.  No point reinventing the wheel every time! 

Action: Check out JQuery and download Blueprint for starters!

 

#4 - FOCUS ON WHAT'S IMPORTANT

Content is still king!  But content together with standards, usability and design excellence is what will count in the long run.

Action: Subscribe to web standards news, blogs, forums and keep up to date.

 

#3 - PRACTICE GOOD TYPOGRAPHY

A fundamental part of design which is often overlooked.  A good CSS framework can help here and good typography provides the best starting point for a design. 

Action: Read this practical guide to web typography.

 

#2 - TEACH YOURSELF NEW SKILLS

Continue to adapt, grow and diversify your skills.  This will ensure survival during hard times. 

Action: Check out WebFramework's Resources and see if you can learn something new today!

 

#1 - UNDERSTAND THE SMALLER SCREEN

The iPhone is simply the beginning, and the current leader, of the mobile revolution.  So get to grips with the designing for the small screen because the silver screen and even the wide screen may soon be taking a back seat! 

Action: Check out the iPhone Dev Center now!


Bookmark and Share