19th
May 2010
Read More
OK, OK, you don’t have to read them. But it is recommended. We feel that perusing these blogs we give you, the web-worker a daily dose of what’s new online. You don’t want to receive an email referencing an obscure meme or new start up and be utterly confused do you? Course not! Checking these blogs every day should keep you well abreast of what’s happening…
1. BoingBoing
A groupblog of epic proportions. BoingBoing is like Reuters for geeks. A daily check on BoingBoing will usually involve new steampunk nik-naks, homemade robots, memes, reports on the latest fights against draconian copyright laws and awesome looking artwork. It’s a treasure trove of awesome stuff. They also have their finger on the pulse of popular internet culture, so if you see an upsurge in posts about whatever the latest pirate/ninja/Chuck Norris figure of fun and awesome, rest assured that it will be hitting the popular consciousness very soon.
2. TechCrunch
The best source of what’s happening within the Tech scene. If it’s a startup, it’s there, if a company has been bought, it’s there, if a company goes under, it’s there. For many people TechCrunch asts as a helpful guide to interesting new web services – not everyone has a vested interest in who the new CEO of a dot com giant is. But when staying ahead of the curve on what the next Twitter or even Google is is an issue – TechCrunch is hard to beat.
The web design blog. If it’s not on Smashing Magazine, then it’s on the equally excellent Smashing Network – a group of like minded blogs delivering even more excellent web design content. It’s often a wonder to me how web designers get any work done when there is such a wealth of content to read. And for non-web designers, there is still plenty of inspiration on offer that can be applied to any project.
4. LifeHacker
Want to do something? Check Lifehacker first. They’ll show you how. Want to do something better? Check Lifehacker. They’ll show you how. Don’t really want to do anything, but want to marvel at how people do thing efficiently? Check Lifehacker. They’ll show you how. Pretty much everything tech-y you’ve ever wanted to do explained.
5. Gizmodo
You work on the web. So it’s almost a certainty that you’ll be interested in the next shiny piece of technology to hit the market. Gizmodo is the place to find out about them and see if they’re worth splashing any cash on. Written with the exact amount of snark and humour to temper the undistilled nerdiness on display when discussing the various merits of differing cable types, Gizmodo rules the gadget-web.
Only five here, there are sure to be more ‘must reads’ – what blogs are on your feed reader? Hit the comments!
22nd
April 2010
Read More
Last week I was asked to start the initial user interface design of a fairly large web application. I took out my sketch pad to start plotting and planning, I wasn’t drawing buttons or thinking of colour schemes – I was wireframing. It got me thinking about how when I very first got started in design, I was so keen and eager to start designing the graphical elements of the site that I completely overlooked the process and underestimated the importance wireframing. As a result I often found that my designs weren’t as good as they could have been and that I wasted a lot of time “moving things around” further into the project.
What is Wireframing?
Wireframing is the process of organising the visual hierarchy of elements within an interface. It is essentially a blueprint of your Web Interface. After building a sitemap and planning how users will navigate your website, the process of wireframing is the next key stage in any design project.
Wireframes allow you to plan and organise content within your design, elements such as:
the header, the navigation, the footer, the text content, any graphical elements, interactive elements etc.
The Wireframing Process
Before even touching my computer I like the plan out a few different layouts on paper. This allows you to quickly experiment with layouts and get your ideas out on paper. It doesn’t have to be neat and tidy; you can scribble away until your heart’s content. You can quickly get multiple concepts planned out without spending too much time worrying about things being neat or the exact size of an element, making sure they are accurately aligned etc.
It’s also less “painful” to dismiss your own layout ideas whilst they are still on paper. Once you have committed a layout or design digitally and taken a lot of time ensuring every element is accurately positioned, it becomes a lot more difficult to dismiss it as an idea that won’t work because of the time you have already put into it.
You don’t need to design wireframes for every page of a website, just the pages that are inherently different from other pages. For example if you were designing a fairly large E-Commerce site that had 100+ product information pages, you would only need to design one wireframe that shows how these pages would work.
Once I have sketched out a few layouts on paper and I have a good idea of how the site should be organised, I then get out the laptop and begin to translate and evolve my sketches on screen.
There are a number of applications or tools that you can use – see a great list of wireframing resources over on Smashing Magazine.
Personally I like to use Photoshop for wireframing. Everyone has their own preference, but Photoshop works for me because:
- There is no learning curve – I know how to use Photoshop, I like Photoshop.
- Layers – I can group key elements and organise them, this comes in very useful when wireframing pages with web forms or wireframes that need to organise more than your standard “header – content – footer” layouts.
- I can use a grid template to help me create wireframes at-size, i.e. the same width and height as my final design. You can download PSD grid templates from http://960.gs/ .
- When wireframing pages with a similar layout I can simply re-save my file under a different name and delete the layers I no longer need for the next wireframe.
- I can save my final wireframes in multiple formats; PSD, PDF, JPEG, GIF, etc.
Wireframes Finished – what now?
Once you are happy with your wireframes you have two choices – show them to your client or begin the process of making them more visually appealing. This choice depends entirely on your client. A technical client will (or should) understand the importance of wireframes and will be able to discuss the structure and layout with you in some detail, either giving approval or useful feedback meaning you have a clear understanding of any revisions that need to be made. A non-technical client may look at your wireframes and say nothing more than “looks good” or “come back when you have something useful to show me”.
For a non-technical client I like to start fleshing out the wireframes into a full PSD mock-up based on the initial design brief. Yes it takes more time should I need to make changes to the layout or structure of the design, but I think an important part of being a designer is communication and if I need to spend more time in communicating my idea with a specific client by providing a full visual mock-up instead of wireframes then I’ll do it. It’s not ideal but sometimes it just has to be done. This doesn’t mean that you should skip the wireframing process completely; it just means that you are merging two stages of the design process before sharing your ideas with your client.
Failing to Plan really is Planning to Fail
There are many who fail to see the benefits of wireframing, many who see it as an unnecessary stage in the design process and ultimately a waste of time. Personally I see wireframing as one of the most important stages of the entire design process. It saves me a massive amount of time further into the project, it gives me a clear idea of how my final design should be structured, it allows me to understand very early on how users will interact with my site and to design the visual aesthetics on this understanding. Wireframing is a key stage in any web design project, from small websites with a just a few pages to larger websites with many many pages.
This post was written by Lee Harding of Lee Harding Web Design – creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!
18th
November 2009
Read More
It’s a historic day at BaseKit HQ as we begin the first phase of our marketing assault. We know that the Internet is a vast space and we cannot reach our potential users through simple word of mouth – electronic or otherwise.
To that end we have launched our first advertising campaign by announcing the death of PSD slicing. Because, well, that’s what BaseKit does – it eliminates the need to slice up Photoshop designs into code. PSD to site without the pesky plaintext middleman. The above advert is running on the very excellent web design and development blog Smashing Magazine – a wonderful hub of potential BaseKitters.
We’re looking forward to seeing Smashing Mag’s readers take on BaseKit – we hope they find it as useful as we think it can be, and fully expect a flood of feedback. (We are in beta – we LIVE on feedback!)
