News, web design articles, web design tips & tricks archive

So, Apple won. Samsung now have to pay $1bn (£664m) in damages for patent infringements. But why all the fuss? Well, it’s about design. Not really web design, more user interface design (which we do a lot of at kc web design Kent) and the way the whole iOS UI/UX works.

When you (and it’s what we do here at kc web design Kent) start a design process, whether it’s a website design project, a user interface design project or an iPhone UI design, you always start at the beginning by asking ‘WHAT’. What does the website need to achieve for the business, what goals are there for the user. Then you ask yourself ‘WHY’. Why does the user need to do it this way, why does the business need the data in that way? And then finally we get to ‘HOW’. How do we get the user to make contact or buy a product, how do we help the user navigate? During this web design process of WHAT/WHY/HOW we evolve and design a well thought out process of actions and interactions that creates and moulds the final product and influences every pixel on the screen. Without this process we would be randomly guessing what to do and how to present it.

Apple will have spent a lot of time and money working out that a dock bar at the bottom of the screen with 4 icons would work best and a grid system to display other apps that would scroll would probably be the best possible way to make the UI intuitive. Apple went through the WHAT/WHY/HOW process many, many times to create the perfect user interface for a mobile device. And looking at the sales figures for iPhones and iPads over the past 5 years you can pretty much assume they did get it right, well, almost right. So what gives Samsung, or any other company, the right to not bother with the thinking process, to miss out the WHAT/WHY/HOW questions that inform and mould all those decisions that make a great UI. Going through that process creates the value in the end product, without that process the end product will fail, unless you just copy what some else has already done. But we all (now) know what happens if you try that.

So, web designers or UI designers need to ask themselves this – WHAT/WHY/HOW?

If you have a web design or user interface project then please get in touch for a chat with kc web design Kent.

I normally wait before download the new OS from Apple, just to make sure there are no issues or problems with software that I use. Mountain Lion got the better of me early, not because it was a radical change or anything new and really exciting had been added, but because it was supposed to be quicker and smoother and integrated some iOS features that I use on the iPhone and iPad.

When using a Mac every day for web design projects at kc web design Kent it can be difficult to find the time to down tools and do an upgrade but, the chance arose so I decided to take the plunge. It took a few hours to download but only about 40 mins to install. Like all OSX upgrades it was a very smooth process with no issues along the way. The iMac’s at kc web design Kent are a few years old now but are fully stacked machines so would have no trouble running the Mountain Lion.

First impressions at kc web design Kent were good. The OS felt smoother, quicker and more responsive. I had been having problems with Lion not updating the file list very quickly in open file dialog windows but this seems to have been fixed in Mountain Lion. The new notification centre is coming in handy already and completes the circle of integration between the mobile and desktop which means a lot of 3rd party apps will now be less useful. Enhancements to Safari look good and the new iMessage is a lot better than the beta and iChat.

Overall I’m please with Mountain Lion and for only £13.99 it’s almost silly not to upgrade. Gone are the days when an OS would be hundreds of pounds, today its cheap and easy to keep up-to-date and for a web designer like me working on web design projects all day at kc web design Kent that can be very important.

Accessibility has been a big buzz word in web design over the past few years and has become a really important part of all web design projects. Making your website accessible to users with disabilities should be part of every web design build but there is another type of accessibility that often gets forgotten about – client accessibility.

When a web design project is finished and we hand over the website to the client, is it accessible? Does the client have access to everything they need to manage their own website? More often than not, clients are left with a fantastic website that doesn’t quite feel like it’s theirs. They have to go back to the web design agency that built the website to ask for changes or additions to content and this can leave the client feeling removed from the website they’ve just paid a lot of money for. At kc web design Kent we believe the websites we build should be accessible to our clients and that they should have full control over their own websites.

One of the many ways we achieve this at kc web design Kent is to build our websites on content management systems such as WordPress and Expression Engine. Building a website like this on a CMS enables us to hand over a finished product that empowers our clients and gives them back control of their website and content. Being able to adapt and change content and keep the website fresh and up-to-date is an important part of the life of the website and the business goals the website is trying to fulfil. Not having to go back to a web design agency every time a small update is needed means the website can evolve and change quickly and this is good for our clients and their customers.

If you have a website you don’t feel in control of then give kc web design kent a call. We can build you a new website on a CMS and give you back control.

In the last part of this series – kc web design Kent tools for web design – part 6 – we talked about local dev tools. In this article we’ll be looking at mobile testing tools for use with responsive web design builds and testing.

Responsive web design has rocketed to the forefront of the web design industry in the last 12 months and it’s a very important direction for web design to take. The market share of mobiles and tablets is now very large with some sites seeing nearly 50% of their browsers viewing on mobile devices. Most web design project now incorporate responsive design where applicable (not all websites have to be viewed on all devices) and this means theres a whole new set of devices we have to test on. In an ideal world you’d have a physical device to test on as you do with desktop but there are so many mobile phones and tablets on the market it’s almost impossible to have them all to hand for physical testing. So, what are the alternatives?

When creating responsive web designs at kc web design Kent we normally use media queries to specify certain browser size break-points for the design to change within so using these break-points we can test at different browsers sizes without being on the actual device. The easiest way to do this is to resize the browser window and you’ll see the design change as you hit those break-points. If you want to see these break-points as devices or see multiple views at the same time then there are a number of online services around such as www.responsive.is or responsinator.com or mattkersley.com/responsive/.

If you want to be a bit more device specific and view your responsive web design on the actual device then there’s Adobe Shadow or the very much under-rated and often forgotten iPhone Simulator that comes with Xcode which is one of our favourite was of testing on the iOS. For other non-Apple devices theres the Opera Mobile Emulator which is very handy for all those fiddly, in-bvetween screen sizes. Theres even a Mac app called Aptus that allows you to set you’re own break-points and then view websites so testing on your Mac while coding becomes very easy.

There are many, many solutions out there for responsive web design testing but it’s mostly about finding one that fits into your work-flow.

At kc web design Kent we build most of our websites on content management systems. It’s a great way to use existing technology to enhance a website design and build project and speeds up the build process. CMS’s enable complex websites to be built with ease and empower the client by giving them full control over their own websites to update and add new content.

We’ve worked with a few CMS’s over the years at kc web design Kent such as Typo3 – confusing and convoluted, Drupal – powerful with a large learning curve and not very intuitive as well as many other minor ones. Perch is a great small CMS for purely dealing with content and works well on smaller sites but we mostly use WordPress and Expression Engine.

WordPress is free and has a huge user community that can help with any problems. There’s also an endless supply of plugins that can do pretty much any job you need them to do. WordPress is also a very customisable system and can work as a CMS on many levels. I haven’t come across a web design project yet that we’ve undertaken at kc web design Kent that WordPress couldn’t deal with or be moulded to work successfully. For standard content based web design projects WordPress can’t be beaten and it’s very user friendly, even for designers!

Expression Engine is a paid for CMS that I find works very well for large corporate website design projects. The community is very good and there are lots of plugins but not on the scale of WordPress. It’s not quite as user friendly but it is very powerful and at kc web design Kent we’ve created some very large and powerful website designs with it.

It’s hard to choose between the two so we don’t, we use either depending on the type of project but I have to say that the majority of the time now we try and use WordPress first if at all possible.

If you have a website design project and would to talk to kc web design kent about content management systems then please get in touch for a chat.

I don’t normally write about products on the kc web design Kent website but I recently bought the TwelveSouth BookBook iPhone case and just had to do a little review. Being a web designer at kc web design Kent I use my iPhone a lot, it’s with me every minute of every day so a good case is essential. As a web designer I’m always making notes and reminders, adding to-dos and contacts and taking photos. The BookBook case looked perfect and it doubles as a wallet, something that I thought would be useful as I’m always taking my wallet out of my back pocket when I sit for long periods at kc web design Kent.

The thing is, the BookBook case looks great but theres one major problem I could see…no hole for the camera. To take a photo you have to push the camera up out of the case. Not a big deal but one that I though could be a bit annoying after a while. And spending £50 on a case that wouldn’t allow me to take photos instantly would be silly to say the least. And so Ebay comes to the rescue. I managed to pick up a second hand case on Ebay for not very much and I have to say I was very impressed with it. The look and feel of the case is very well made, it feels good in the hand and the wallet works well but…still no hole for the camera and boy does it get annoying trying to push the phone up to take a photo. It also makes it very easy to miss a quick shot. As I’d only paid a small amount for the case I decided to use my web designer special powers and my stanley knife and do some surgery on it. After a good hour of making templates and making sure everything lined up I hacked and slashed and bingo! One perfect camera lens size hole.

I now have a perfect iPhone case WITH a hole for the camera. If the BookBook case had this hole built in then it would be the perfect case but my home made version is far better. Hopefully the next version of the case will have the camera hole but until then I’m sticking with my kc web design home made version!

As a web designer at kc web design Kent using email all day I’m always interested in new ways of dealing with emails so it’s very exciting to see a new app in development called .Mail

A while ago we talked about what was happening in the world of email clients with the departure of Sparrow and Thunderbird and the theme of email clients is still running quite strong in the internets with the arrival of a new runner called .Mail (http://dotmailapp.com). Still in beta and born out of a concept and idea by UI designer Tobias van Schneider, it looks like it could be the beginning of the next generation of email clients.

2 years ago, here at kc web design Kent, we talked about branching out into other areas and one of those areas was OSX application design. We even got as far as mocking up some very basic ideas for a, yes, you guessed it…email client! Nothing as good as .Mail but using some of the same ideas to make email more manageable and usable as a tool that most of us use for 50% of our working day. So, all of us at kc web design Kent are going to be very excited to see what happens with .Mail of the next few months. The UI design looks fantastic – minimal and clean allowing you to simply deal with the emails in a uncluttered interface while making emails a pleasure to read – and the website design also carries on the same themes.

The key features that will make .Mail different are the way it deals with actioning emails and building those actions into a workable routine. All we can do in todays email clients is mark the email as read and then file it in a folder with perhaps a label colour. Actionsteps help take email to the next level by defining a way to respond to emails and link them in with existing GTD workflows. Notifications also sound very interest. All those emails you get from Facebook, Twitter, etc don’t need to stay in your inbox so .Mail pulls them out, knows what they are and just display a little Facebook or Twitter icon at the top with a small notification badge on it. No more cluttered inbox, just nice little notifications to look at when you have time. This seems like a great way of keeping important emails at the forefront of your inbox and relegating the non-important emails automatically.

As a web designer at kc web design Kent using email all day and with prior thoughts on the future of email clients I’m going to be very interested to get my hands on the beta of .Mail

In our last part of the tools for web design series – kc web design Kent tools for web design – part 5 – we spoke about a few other bits a bobs we use here at kc web design Kent when designing websites. In this article I’ll be speaking about local development tools we use.

When designing and building a website locally on a Mac there are a few essential tools needed to setup a server-like hosting environment that will allow you to run websites such as WordPress and Expression Engine locally on your Mac. To start with we need to make sure that any web design project that needs to run on PHP and MySQL can be worked on without having to run expensive servers in your office or constantly connecting to remote servers. It’s much easier sometimes to develop locally then upload to the hosting server once the website is almost finished. To get things working locally here at kc web design Kent we use a few key tools…

MAMP Pro

MAMP is a PHP/Apache/MySQL stack that allows local websites to run in a basic server setup. Installing MAMP is easy and its also easy to setup. There is a free version that allows you to work on one website at a time but the paid Pro version allows multiple sites and its well worth the small fee as it make working on multiple web design projects a lot easier. At kc web design Kent we have come up against a few issues with permissions before so it always good to check the website permissions in MAMP if you have any problems such as doing automatic upgrades of WordPress via FTP locally. You may also need to play around with host files on any PC emulators you’re using to be able to view you’re local websites on your test machines but there are plenty of articles around that explain how to do this.

Virtual Box

Testing your locally built website designs is also very important and at kc web design Kent we use VirtualBox. It’s free and in my opinion it out performs Parallels by a mile. We used to use Parallels but it was slow and buggy whereas VirtualBox is fast and easy to use. Its also very easy to download pre-configured machines to test out different server set-ups and easy to get copies of Linux for browser testing on.

Sequel Pro

We doing a lot of local web design work it essential to have a good MySQL GUI as you’ll end up doing a lot of fiddling. Sequel Pro is free and absolutely the best MySQL client there is out there. Get it now, there’s no need to use anything else, especially not a paid app!

At kc web design Kent we’ve built a few bespoke e-commerce systems over the years and part of looking after our clients means we do a few yearly product updates for these shops. One of the jobs we do as part of these updates is image processing. Some suppliers send you a nice folder of cropped images roughly at the correct proportions ready to be scaled to the right size which we do using the batch processing in Photoshop. All good. But, there are suppliers who send a nice folder of images of all sorts of different sizes and proportions which makes batch processing these images very difficult.

In the past at kc web design Kent we’ve used a combination of Photoshop and a neat little app called Downsize to do most of our web design image processing but there is sometimes the need for something a little more intelligent. I’ve looked around but never been able to find anything that does the job easily and quickly and when theres sometimes thousands of images to process I don’t want to be messing around too much. Yes, I could probably spend hours writing a very complicated applescript to deal with this but I’m a designer, I want a GUI that makes life easy.

By intelligent I mean something programable, something that can set a few options to deal with images of differing proportions. I want to be able to say “if the image is wider than it is tall then resize the width to x size and then crop the height to x size” or vice versa if its proportioned the other way. Nothing I’ve found does this (easily) so if anyone has used a nice OSX app that makes this a breeze then all of us at kc web design kent would be very interested. Or maybe we should create an app specifically for this! Are you an app developer that could help? Then get in touch!

As web designers here at kc web design Kent we use email all day, every day. Without it our daily jobs would be very difficult and its hard to imagine a time – only 15 years ago – when most businesses didn’t use it. It’s now such an integral part of business its hard to think of doing things another way. Thankfully its not the end of email but email clients for the Mac seem to be disappearing.

Web design Kent email clients

First Thunderbird and now Sparrow. Thunderbird has been stopped by Mozilla and Sparrow has been gobbled up by Google leaving lots of Sparrow users left with a good email client that will no longer be developed. The default Mac Mail client is good and lots of users stick with that. The one we use here at kc web design Kent is Postbox. Based on the core Thunderbird architecture its one of the best email clients out there. With a drop in price and lots of Sparrow users looking for an alternative Postbox might become the best email client option. But are there any other options out there? Well, not many good ones for power users that use email everyday for business. Maybe its time for some new kids on the block? Maybe the Sparrow team will unleash something new for Gmail soon or maybe it’ll all end up being web based.

As a web designer at kc web design Kent the importance of email communication cannot be underestimated but it’s getting old now. All other web technologies have moved on in the last 15 years but email is still pretty much as it was. Maybe it’s time for a new communication technology to replace email?

As you’ll probably have seen in a few previous posts, I had the good fortune to be one of the very few beta testers for Panic’s Coda 2. Coda 2 came out in May and we’ve all been using it here at kc web design Kent with pure joy, every day. I still find it one of THE best web design and development apps available for the Mac and version 2 of Coda has improved on that no end – apart from one thing…

One of my requested features way back at the beginning of the alpha testing phase was a way to click in the preview window, see a related CSS style and go to that style in the CSS file. I use Coda for everything but tend to use Espresso to do my heavy CSS work because its Xray feature is so good. Flipping between the 2 apps can be a pain and I much prefer using Coda to code than I do Espresso, I just find it more intuitive and feature rich for my style of coding and Espresso does seems to crash a lot for me and a few others at kc web design Kent.

Although Coda 2 has been out for a few months Panic and the rest of the beta testers are still hard at work pushing out updates and I was very pleased to see a new feature in the coming 2.0.2 update that makes a very good start on my CSS feature. In it’s current form its very simple but it works beautifully (like most Panic software!) and allows you to right-click on any element in the preview window, select a style from a drop down list and then once clicked be taken to that style in the corresponding CSS file. It’ll even open that CSS file if it’s not open already.

For me, and the rest of the team at kc web design kent, I can’t say enough how this small feature will make a huge difference in my workflow. Many users might not need it or even know its there but it will be a huge benefit to many people – and I won’t need to use Espresso so much!

We’ve done a few iPhone/iPad apps here at kc web design Kent this year and the more we do for clients the more we’re thinking about designing our own app.

Coming up with the next big idea can be an arduous task and one that may not be of huge benefit. Coming up with the next Instagram or Draw It might be everyones dream but the practical side of it is a massive undertaking. Creating a unique idea, turning that into an app and then turning that into a profitable business can take years of man power. Many more of this type of app fail than they do succeed, so the question we’ve been asking here at kc web design Kent is – do we wait until we have the next big idea?

At kc web design Kent the consensus seems to be – NO. There are plenty of app marketplaces with space for new apps that do things a bit differently. In the web design and web app work we do here at kc web design kent we don’t wait for the next big idea to happen before we get stuck in. We’ve created web apps before that do a job many others do, we just do them different and better. So can we do an iPhone app different and better? I believe we can.

I’m a bit of a sucker for weather watching. I use the Met Office weather app, not because its good but because the weather info is good. There are a lot of other weather apps and a whole category for them in the app store. I’ve downloaded and used a lot of them but none really hit the mark. They’re either designed well but too simple or have a lot of weather info but look like the dogs dinner. I haven’t found my perfect weather app yet so there may be a gap in the market we could fill. So, watch out later this year for what could be the best weather app you’ve ever used from kc web design Kent.

In the last part of this series – kc web design Kent tools for web design – iPhone app design – we spoke about tools for designing iPhone apps. In this article I’ll be looking at bookmarklet tools we use when designing websites here at kc web design Kent.

Bookmarklets are little javascript snippets that you can add to your browser toolbar that perform certain actions. They’re handy to have at hand for performing quick tasks when in the browser and at kc web design kent we use a few design related ones that make some regularly repeated tasks easier and a few that help with web design.

One of my favourite and most widely used bookmark lets of the moment is FOUNT. Once Fount is added to your bowser toolbar it allows you to check any text on any website and see exactly what font, size, etc any text on the page is. Just click the FOUNT bookmarklet and then click on any text on the page and it will show you all the font details. Its very simple yet very useful and comes in handy when you’re designing and need to see what a font is that’s already being used on a website design.

Another new favourite is MIN. This bookmarklet strips back all images and styles from a page leaving just the key elements. Perfect if you need to remove a background to copy a rounded button for a concept design or want to strip everything away to get a clearer picture on some element of a design you’re working on.

Not necessarily a web design bookmarklet but a very handy one is the  READ LATER one from Instapaper. At kc web design Kent we use Instapaper for collecting useful articles and information to read at a later date and the bookmarketlet makes it easy to add anything in your browser to Instapaper.

There are lots more great bookmarklets out there but these are the top few we use in web design every day. Have fun searching out some more gems!

In the last part of this series – kc web design Kent tools for web design – part 5 – we spoke about other tools we use here at kc web design Kent. In this article I’ll be looking at iPhone app development tools we’re currently researching for designing mobile applications in html/javascript here at kc web design Kent.

There are quite a few mobile frameworks on the market now and an equal number of wrapper apps that allow you to build a mobile app in native web code and then package it for deployment to the app store. The benefits of creating mobile apps this way are obvious – you don’t need a native C programmer, you can build the app in the web design code you know and use every day and then package that up in a nice iOS wrapper. The downsides of this seem to be speed although the main players in the wrapper market seem to be addressing this now.

On the wrapper front we have Phonegap (now owned by Adobe) and Appcelerator Titanium. I’ve played with Titanium a while ago and found it tricky because a lot of the code used is a custom version of javascript and so not as intuitive as using normal web code. Theres a bit of a learning curve and lots of new syntax and classes to learn.

Phonegap on the other hand looks interesting. It seems to plug in to Xcode and allow you to integrate html5/css3 frameworks such as Sencha Touch 2 and Jquery Mobile. This means creating an app is a lot easier using native web code but the packaging up in the wrapper looks a little more complicated. Now that kc web design Kent are on the new Adobe Creative Cloud we have access to Phonegap and the new Dreamweaver CS6 comes bundled with access to Phonegap and integration of Jquery Mobile. From a testing point of view this could be an ideal setup so the next stage for us at kc web design Kent is to crack open Dreamweaver and see how easy it is to create a simple mobile app using Phonegap and Jquery Mobile.

As soon as we have some results and better opinions we’ll post it here so.

In the last part of this series – kc web design Kent tools for web design – part 4 – we spoke about tools for CSS. In this article I’ll be looking at other tools we use when designing websites here at kc web design Kent.

Ferrryscript – This is a tool I’m finding invaluable at the moment while we work on an exciting new iPhone application. Outputting all the graphic assets from your designs for iOS app can be a very time-consuming process especially when you have to output everything at two resolutions. Ferryscript is a script for Photoshop that automates the process of exporting assets and it does a fantastic job. Just name your layers in a certain way, show the layers you want output, run the script and wait. Ferryscript outputs everything with the correct filenames and adds the @2x suffix so you end up with a nice folder of transparent PNG’s ready to send to your developer.

Gridset – At kc web design Kent we’ve never been huge fans of grids for design. I tend to prefer the natural designers eye when it comes to layout and grids seem very rigid and forced sometimes. But, with the advent of responsive web design and the need for flexible grids and different resolutions I’v found myself searching for an easy grid system that works with responsive designs. Gridset from Mark Boulton Design is THE grid tool I’ve been looking for. I’ve been very lucky to get on the beta group and the first look at Gridset has been a revalation. Designing grids for responsive design is a doodle and it will even output all the CSS you need for when you build the web design into your responsive layout. Perfect. It’s easy to use, logical and makes the complicated process of designing grids very, very easy.

At kc web design Kent we love using tools that make web design easier, quicker and a more pleasurable experience. There are a few more web design tools I’ll be talking about in the next part of this series and it may go on for a while as there seems to be new tools coming out every week at the moment!

In the last part of this series – kc web design Kent tools for web design – part 3 – we spoke about responsive web design tools. In this article I’ll be talking about web design tools for CSS coding that we use here at kc web design Kent.

Pretty much all the web design and development coding we do here at kc web design kent is done in Coda and I was personally lucky enough to be on the beta testing team for Coda 2 which was released in May. If there is one tool that does everything a web designer needs then its Coda but, I have to say that for the majority of hard-core CSS coding I do use Espresso, purely for its live designing preview and X-ray feature. This makes hand coding CSS for our web designs very easy and quick. I still can’t get used to using it as a pure web design dev tool like I do with Coda but for CSS its perfect.

LESS is something I’ve been dabbling with over the last few months and its does make CSS a bit more like coding but in a good way. It speeds up CSS writing and development and enables a far better global approach to writing CSS that lends itself to large projects. I don’t always use it on small web design projects but on large web design projects it works very well. I think the more I use the more I’ll want to use it and it will become a staple part of our web design and CSS flow soon.

There are many CSS online tools out there that can make life a bit easier but the ones that really stand out are the CSS frameworks like Twitter bootstrap, HTML5 Boilerplate and the Foundation framework. We used HTML5 Boilerplate so much here at kc web design Kent that we created a special theme for Expression Engine that utilises the H5BP and enables web designers to start a fresh install of EE with a bare bones theme using H5BP. You can download it here…HTML5 BoilerplatEE

At kc web design kent we’re used to designing for different devices. kc web design kent create responsive websites that work on all sorts of different platforms, devices and screen resolutions and we also design iPhone and iPad apps. Creating web design projects that look good on different devices is becoming more and more time consuming especially with the new retina screens on the iPhone and iPad which mean we need to create all web design graphic assets in multiple resolutions when we make iPhone/iPad apps. Even creating websites, especially if the main target market will be using iPad/iPhone for viewing the website, means we sometimes have to serve higher resolution images to make sure the website design looks great on the retina hi-res screens.

What does the Retina display mean for kc web design kent and other web designers?

Last night at the WWDC Apple announced a new Macbook Pro with a high resolution retina display. Most people rejoiced and got very excited. The Macbook Pro is the first laptop to ever have a high resolution display and it will make things look fantastic. Photos, movies, games will all look amazing if they support the new resolution but what does it mean for web designers. How will using Photoshop or other web design tools work on the new retina screens? We won’t be looking at a like for like pixel ratio if we design a website on a retina display so web designers will need a lower resolution screen handy to test those designs on. Mmmm, sounds tricky. And how will our existing website designs look on the new screen? Will they look slightly fuzzy, a bit lo-fi? Will it now mean we might need to serve another set of graphical assets for each web design project meaning more time spent creating web design assets for different screen resolutions? Don’t get me wrong, I think the retina displays are gorgeous, but I wonder how things will pan out and how it will effect the way we design web sites. Next time I’m near an Apple store I’ll need to have a look at the kc web design kent website on the new Macbook Pro.

In the last part of this series – kc web design Kent tools for web design – part 2 – we spoke about to-do tools. In this article I’ll be talking about web design tools for web designing such as responsive web design and CSS coding that we use here at kc web design Kent.

Web design tools for responsive web design

With responsive web design becoming THE asked for web design buzz word at the moment, every web designer should at least know what responsive web design is and how to build a responsive website. There are now a huge range of online tools that can help with your responsive web design build so I’ll only mention the ones we use here at kc web design Kent. Firstly though, the best way to test responsive web designs is to do it on the actual devices. I don’t know many web designers without an iPhone and iPad these days so its pretty easy to test on those devices. It’s the other million different versions of Android phones, Blackberry and the like that cause problems but there are a few tool to help. The Opera Mobile Emulator is a nifty app that allows you to test in all sorts of different devices and is our first go to app when testing responsive web design as we can quickly check on lots of different devices and screen sizes. If you have the actual devices themselves then Adobe Shadow is a great new tool that allows you to preview whats in your browser on multiple devices once you’ve installed the browser plugin and downloaded the app onto your device.

There are also a wealth of online tools now that allow you to view your responsive web design in the browser and the different breakpoints specified in your media queries. Some of the ones I use include Screenqueri.es | Pixel Perfect Responsive Design Testing Tool and http://responsive.is/

There is also a great article in .net mag about responsive web design tools here…50 fantastic tools for responsive web design | Feature | .net magazine

In the next part of this series in which I’ll be showcasing the tools we use here at kc web design Kent in a daily web design work we’ll be look a bit more at CSS.

In the previous article – kc web design Kent’s tools for web design – I talked about graphic apps for web design such as Photoshop and the coding apps we use here at kc web design kent such as Coda 2. In this article we’ll look at some of the other web design related apps and tools we use here at kc web design kent such as our to-do and GTD apps.

To-do apps for web designers

Everyone loves a good to-do or GTD app. As web designers at kc web design Kent we always have huge lists of things to remember, bits to do, etc and having a good list manager makes things a lot easier. With all this new technology that we use every day in our web design jobs I’m still a big fan of a notebook and pen. Great for making lists, jotting down ideas and scribbles and its quick easy and always on my desk. When you need something a little more digital but still just as simple them Teux Deux is the one I use most. Its week view in the browser, where I always end up first thing in the morning so always see my list, is so simple yet very effective and its easy to move to-do’s around and add new ones. They also have an iPhone app which keeps to-do’s in sync and again is very simple and elegant to use.

For something with a bit more functionality, to group lists into projects, add notes and timers and dates I tend to use The Hit List. It has a lovely interface and works very well as a bit list store. Alerts would be nice but if you’re checking it daily then its easy to see what to-do’s are coming next. The iPhone app and sync service does cost a lot which I think is a little bit cheeky but just using the desktop app for all your web design to-do’s is fine. If you don’t mind the extra payment then the iPhone app and sync does work very well.

Other ones to mention are Firetask which has a nicely calendar view which I find very useful for blocking out project times in advance so I can see blocks of time for each web design project. And Things, which I’ve never really got on that well with but is a very good app.

Next time we’ll talk about specific web design tools for responsive web design, CSS and daily coding help tools.

Here’s a quick run down of the tools we use here at kc web design Kent in our daily web design creation. We use all sorts of different tools but here are our favourite and most useful web design apps and online tools…

Graphics

I’ve tried all the alternative apps for web design out there, like the new Sketch 2 and Pixelmator, but I still keep coming back to the one app I’ve been using for last 15 years – Adobe Photoshop. It’s not a true web design app – there’s Fireworks thats supposedly for pure web design artwork but I just can’t get on with Fireworks, it feels like a bad old copy of Photoshop – it’s mainly for photographers but has become the app of choice for many web designers over the years. With the latest version (CS6) it feels more like a web design tool that works rather than having to hack and work around bad pixels as with previous versions and the new Creative Cloud pricing means it’s affordable for small web design studios. I keep trying other web design artwork tools but I just keep coming back to Photoshop and Illustrator. I feel at home with them which means I can work faster and more intuitively.

Coding

In the early days of my web design career, long before kc web design Kent, we used Dreamweaver. Dreamweaver made it easy (ish) to build with tables and did most of the coding for you but through each new version it became bloated with Flash and Spry and all sorts of other add ons. I tend to only use Dreamweaver now for large blocks of text formatting or throwing together quick wireframes or user testing sites. These days all the coding at kc web design kent is hand coded in Coda. Having used Coda 1 for many years I was very excited to be on the beta testing team at Panic for Coda 2 and over the last 5 months we’ve seen it go from a rough app to a glorious web design tool that is available in the app store today! You can read about my experience of beta testing Coda 2 here.

In the next part of this series I’ll look at responsive web design tools and to-do tools.

This is a post I’ve been wanting to write for the last 5 months but we all promised Cabel at Panic a vow of silence. What we were all working on was top secret – but no more – the announcement came from Panic last night that Coda 2 will be available to buy on 24th May 2012. Hooray! Now I can tell you how great it is!

There’s a wealth of information on the Panic website about all (over 100 of them!) the new features in Coda 2 and Andy Soell (one of the other beta testers) has written a great article too. I’m not going to go through every new feature, I’m going to tell you about the ones that changed the way I work, that changed my workflow and improved the way I build websites. But, the first thing I want to talk about a little is the experience of being a beta tester for Panic on a product I love and use everyday.

Beta testing Coda 2

I applied to become a beta tester for Coda 2 as soon as I saw the request on Twitter but I never thought in a million years I would get a reply, but I did, and it was very, VERY, exciting…and a little bit daunting. I’ve used Panic products ever since the early days of Transmit (way back in OS9) and Audion (I loved making my own skins for that!) and use Coda and Transmit now everyday web designing.Having the chance to make a difference to the new version of Coda was a very exciting moment and probably THE most geeky moment I’ll ever have. But enough geekness and onto Coda 2…

Coda 2 – The features that made a difference to me

Coda 2 has over 100 new features, some huge, some small some you may not use and others that will change the way you work and it’s these features I’m going to concentrate on. Going back to Coda 1 now feels a world away from the new version. It may take some people a while to get used to Coda 2 (I know it did for me initially) but when you’ve used it for a while and go back to Coda 1 you realise what a huge improvement there is and how much time has gone in to the new version.

Code Folding

It’s probably an obvious one but code folding is something that Coda 1 lacked and the addition of code folding in Coda 2 makes a big difference to the way I work. It’s cleaner, easy to concentrate on the job at hand and focus on blocks of code that are important. Its easy to skip around folded code with the keyboard shortcuts and with the improved auto-complete and better indenting it somehow feels quicker, slicker and more intuitive than it did before.

New tabs

I have to be honest here and say I wasn’t a big fan of the new tabs. I didn’t have a problem with the old tabs in Coda 1 and the new tabs just, well, didn’t feel right. I think a lot of beta testers felt the same and the guys at Panic tweaked and improved and changed them over the course of the beta period and actually, what they have in Coda 2 now is great. It might take a while to get used to, but the new tabs work really well now and the late addition of the text only tabs (just resize the tab bar as small as it will go) is a great feature. Be patient, use them lots and you will love them!

Airpreview and live preview for iPhone/iPad

I didn’t think I’d use Airpreview very much but more and more these days I’m testing on multiple devices while designing responsive websites. I already have 2 monitors but having the iPad setup in landscape orientation gives me an extra screen thats about the same as a standard small screen monitor so when designing corporate sites it acts as my standard 15/17″ monitor and deals with a site at a nice 1024 width. I’m finding more and more now that I have Airpreview running while designing responsive websites along with the new iPhone live preview mode. I think this is where the ‘all in one window’ approach of Coda starts to really work and when that expands out to a few monitors and Airpreview it really starts to work very well indeed.

Sites folders/groups

It might seem like an obvious one but grouping sites into folders is flippin great! I have a LOT of websites in Coda, sometimes 10 versions of the same site for big projects with different versions of the site such as live, staging, dev, etc so grouping these together makes it a lot easier to find the site I need quickly. Old sites can go away in their own folder to get rid of clutter and current sites I’m working on can also go in their own folder. Easy, clean and tidy…wish my office was the same.

Files – Transmit built in

Panic have completely re-worked the file browser and used the Transmit engine to power it all. Its quick and easy to use and just one click away in the new tab bar. Its so good though, I’m using Transmit less and less (Sorry Cabel!).

New MySQL

The new MySQL window is handy. It’s great for quick edits on the database or using as a reference to look at tables and run quick queries. I do find however that if I need to do anything more complicated then I tend to open up Sequel Pro. Having a MySQL window there in Coda for quick easy database management is very handy.

New sidebar

The new sidebar with the new improved clips is a great addition. You can drag and drop any of the sidebar icons to the top icon bar to get quick access to whatever you need. Maybe in the future plugin developers will be able to create plugins that will be added to the sidebar which will open up a wealth of interesting and useful additions. As I think Andy Soell mentions in his article, being able to split the sidebar into 2 or more panes would be a great addition and really allow you to make the most of the sidebar space and have the most used 2/3 panels always available. Maybe a future update will add this.

and much more…

I could go on about lots of other new features such as the new CSS pops or the gorgeous UI or the iCloud sync or the Git integration or the improved find and replace or the path bar or the quick file open or the new updated books but I won’t. If you use Coda 1 then get Coda 2 on the 24th May, you won’t be disappointed.

Did I mention Diet Coda, no, well maybe later…

Website design takes time. iPhone app design takes even longer. With so many assets to produce in so many formats and resolutions, creating a universal iPhone/iPad app can take many, many hours and a huge amount of attention to detail.

There are so many iPhone apps out there that look terrible, are illogical to use with no visual identity or anything to differentiate themselves in an ever growing market place. At kc web design kent we can’t stress enough how important it is to have your iPhone or iPad app professionally designed. It can turn a good idea in to a great app and make a massive difference to the success of your app!

At kc web design kent we take time to plan the app using sketches and drawings and then wireframes. Before we get to the design stage we know exactly what is going into the app and how it will work. Creating the design and look & feel from the wireframes becomes a lot easier when you know exactly what assets and content you have to try and fit onto that tiny screen space and make usable – and making it usable is the most important part of a good app.

Exporting out the graphic assets from your Photoshop files has always been a little tricky with all sorts of different methods being used from slices to copy merged duplicated windows. All of this can be very time consuming especially with multiple resolution displays. At kc web design Kent we recently games across this create little script for Photoshop called Ferry. Ferry is a script for exporting named layers and folders as correctly named png files in both retina and standard resolutions. On first look it seems great but I’ll be giving it a full test over the next few days on a big iPhone app project.

If you have an iPhone or iPad app project that you would like kc web design Kent to take a look at then please get in touch today. kc web design Kent have the design skills to make your app a success.

At kc web design Kent we got very excited using the beta version of Photoshop CS6. We got even more excited when the new pricing structure was announced along with the Creative Cloud. Now that Adobe Creative Cloud has finally arrived we decided to take the plunge and go for the monthly subscription service.

What is Adobe Creative Cloud for web designers?

Adobe Creative Cloud is great for web design studios, freelance web designers and anyone involved in web design, graphic design, video production, etc. At kc web design Kent we do mostly web design work but some print as well and Adobe Creative Cloud works perfectly for us. So, what is Adobe Creative Cloud?

Adobe Creative Cloud isn’t really a cloud software based system. The word ‘cloud’ is slightly misleading in this context but there is a cloud element in the online storage you get (20gb!). The software is downloaded and installed in a traditional way and you’re not accessing any of it in the cloud, its all on your computer. Adobe Creative Cloud gives you access to all, yes ALL, of Adobe’s software products for a monthly fee of £38 + VAT if you sign up to a 12 month contract. When you look at the software available its an incredible deal! For just Photoshop and Illustrator alone its worth the price but for all the apps you get, plus online storage, plus Typekit, plus some website hosting and all the new iOS apps…its a bargain no web design professional should miss!

At kc web design Kent we’ve been using it for a few days now and it is fantastic. We might have some print work coming up in the next few weeks which we can no just download and install inDesign for, no big purchase, no using outdated software, we just grab the latest version and get cracking. Genius!

Considering Adobe products are some of the most pirated software packages on the net I think Adobe have done the best thing they possible could – make their software affordable and easy to install. If have of the people out there using pirated Adobe products now switch to Adobe Creative Cloud then they’ll make a small fortune. Well done Adobe for some forward thinking…at last!

A few years ago, kc web design Kent built a website for a tradition solicitors in Manchester. Myers Lister Price has recently gone through a branding redesign so kc web design Kent were commissioned to bring the website up-to-date with the new modern vision and direction of the company. kc web design kent worked closely with the PR company to make sure the new brand was reflected in the new website and that all parts of the brand were executed in accordance with the guidelines.

The new website is responsive – it works on all devices and adapts to screen size to show the perfect layout for each device – and is again built on WordPress.

Visit Website

According to the BBC (full story), HTML5 is taking the internet by storm! Working as a web designer at kc web design kent this comes as no surprise. HTML5 has broken the boundaries of multiple markup languages, added great new features and brought HTML into the modern world to compete with – and out-do in some cases – other modern web languages such as Flash and Javascript.

With the growth of the mobile market and especially the iPhone/pad/pod market, web designers and website creators have become increasingly aware that websites using Flash are missing out on a huge user base as Flash will not work on iOS devices. What to do? In steps HTML5. It can pretty much do everything Flash can and with a bit of added Javascript can do a better, faster and leaner job of it than most other technologies. Its native browser code so renders fast, is more user friendly but only works in the very latest modern progressive browsers (Yes, IE is slowly catching up…).

…HTML5 is being received so enthusiastically by businesses in particular. The latest version can perform all kinds of dynamic tasks and visual tricks. The web is progressing faster now than it has in a long time.

New browsers are releasing updates very quickly these days to keep up with the new features being added to HTML5 but it is still in its infancy. According to the HTML5 governing body, a full release is not expected for another few years. But don’t let this stop you using it if you’re a web designer or forward thinking web design studio. There are lots of HTML5 features we can use today that will work in all browsers and there are ways of using polyfills to render HTML5 elements in older browsers (yes, IE again!) so don’t be afraid to get stuck in.

At kc web design Kent we’ve been using HTML5 on all our new projects for a while now and it is great. Web design needs HTML5, use it now!

At kc web design Kent we know the value gained from good wireframes when creating a website design, but with iPhone app design it’s even more important to get things perfect at the wireframe stage.

Planning and wire-framing an iPhone app design is one of the most important stages of the app design process. You don’t want to have to change something later on down the line that could mean redesigning whole screens so every element needs to be considered and thought out at this early stage. There is so little screen space to play with that just having to add an extra button could mean a complete redesign of a screen and this is best done at the wireframe stage rather than when the app has already been developed.

Making sure user flow, screen space and user interactions are consistent and in the right place and context is very important and easy to see once the iPhone app design has been planned out and wire-framed. I use Illustrator as its easy to move elements around and expand the art board as the wireframe grows. Having it all on one screen helps to see process flow and keep track of what screen comes next. Any standard elements like buttons, alerts, table views and user inputs can be laid out knowing that its easy to replay and move around any element. The iPhone app design we’re creating now went through many iterations and changes before the wireframes were signed off and changed significantly from the original design. Much better changing things at this stage than later on.

So, plan, wireframe, review, amend…wireframe, review, amend until you’re totally happy with how the app works. Then, it’s on to UI design and the app icon design.

kc web design kent are proud to be working with the amazing streetlife.com – the local social network – as their new web design partner. Exciting times ahead for streetlife.com and a huge amount for kc web design Kent to do on the design side but its all going to be fantastic fun and a lot of hard work.

As a slightly less enthusiastic user of Facebook, its great to see a new social network thats taping into something thats the essence of all social interaction in the real world – location and proximity. Having a 100 friends on Facebook from all over the world is all very nice and Facebook is great for that, but ultimately, we all still live in a house in a local community and sometimes its harder to connect with the people 3 doors down than it is to chat with our friends half way across the planet. Streetlife.com changes all this and turns the social network on its head by making it local, making it all about YOUR local community and surrounding area. Here’s what streetlife.com say…

Streetlife, the local social network, has a simple aim: to help people across Britain make the most of where they live by connecting with nearby residents, groups, organisations and businesses. streetlife.com provides an easy way for locals to share practical information, advice, opinions, skills and resources. People sign up using their postcode, and can start and join conversations with neighbours. Users can customise their settings so they control how much information they receive, the areas they’re interested in, and what they share about themselves.

kc web design Kent will be working with streetlife.com on all sorts of design related goodness from print and new media to working on new features and redesigning the user interface. We hope to take a great product and make it even better! Over the next 12 months user numbers should be increasing by a huge amount and the design of the website and UI will be updated and adapted with the user growth. Lots to do, pens and paper at the ready!

Over the next few months, as the website changes and we start designing in new UI elements and features I’ll be writing more about how kc web design kent are working on the UI for a large social network, the problems we come across and the solutions we come to. Very, very exciting times ahead…

At kc web design kent we mostly do website design, ecommerce web design, responsive web design and print & brand design. Designing an iPhone app is something many designers are aiming for and it’s a field of design that’s garnering a huge amount of interest of late. Designing an iPhone app seems like the ideal project. Designing the user interface on iPhone app seems like the best design job in the world and in a way it is but there’s a huge amount to learn, plan, read, and organise before you even get to the design stage.

Before you even put pen to paper the first thing you must do, without fail, is to read the Apple HIG (human interface guidelines). Without the knowledge from the HIG it would be impossible to design and wireframe an app and know the best way to achieve user goals and correct process flow. Apple knows, so listen and take note of what you can and can’t do with the iPhone UI. Your app may be refused from the apple store if you do not follow these guidelines.

Once you have a good understanding of what can and can’t be achieved with the platform and OS then you can move on to wire framing the app so you can see each screen and how they relate to each other. Find a template that you can use that will give you all the basic UI elements and quickly move them around to create a basic layout. I use illustrator for wire framing and thee are some good UI kits to download if you search on google. Use as many of the standard UI controls as you can – there no need to reinvent the wheel if its a simple app – and make sure the user can easily achieve their goals. A phone is a small space to work in and all those years designing websites, like we have done at kc web design kent, won’t offer much help at this stage.

Once the wireframes are done then it’s onto the design stage and creating the icon. I’ll talk about this in more detail in the next post.

If you have an iPhone app and need a UI designer then give kc web design kent a call.

At kc web design Kent we’ve been using the beta version of Adobe Photoshop CS6 for the last few months and we’re eagerly waiting for the launch date. While we wait, Adobe have announced the prices for the creative suite and the new creative cloud service.

If you’re a freelance web design or own a small web design studio then the new subscription based cloud service looks excellent. For only £17 per month you can pay for Photoshop CS6 on a monthly basis or sign up to a 12 months subscription plan. Paying for CS6 this way is perfect for a small web design studio like kc web design Kent and there will be many more web design companies out there that this will be a perfect fit for. With the very high price for Adobe software excluding a lot of small web design businesses the new monthly pricing plan sounds perfect. At kc web design Kent we mostly use photoshop and illustrator but sometimes need inDesign for print work. With the new subscription plan we can buy inDesign for just a month or two, as and when we need it. Buying web design software like this will make a huge difference to outgoing costs and not having to pay over £1000 for a bit of software in one lump sum will be a relief to many small web design studios like kc web design Kent.

The high price of Adobe web design software has had one good side effect – lots of smaller web design software makers have got in on the act and there are some very good independent software makers producing great photoshop and illustrator alternatives that in some cases may be doing a better job for web design than Adobes offerings. Stay tuned for the new Sketch 2 app from Bohemian – lots of web design gurus are getting very excited about this. And Pixelmator is a very good Photoshop alternative.

At kc web design Kent we’ll be diving straight for the debt card as soon as the new CS6 suite is released and going for the subscription plan.

Starting a web design project with a web designer can be a daunting task. At kc web design kent we make sure we communicate clearly with a new customer every step of the way so they know exactly what the web design project will entail and how the web design project will work, for both parties.

Web design projects – How to start

The first thing we do at kc web design Kent when initially talking to clients is to try and get a clear understanding of their we site design requirements. The best way to do this initially is to send a small list of questions. Here are some examples from our web design project questionnaire…

1. What is the primary business goal and nature of your business?
2. Give a brief summary of the project goals
3. What problems do we need to solve?
4. Is this a redesign of an existing website or  a new web design project?
5. What is THE most important goal for this project?
6. Who will be working on this project? Will any other partners or agencies be involved and how?
7. When does the web design project need to be finished? Are there any reasons for this such as meetings or shows?
8. What is your budget?
9. What is the selection process? Is there anything we can do to help with this process and make it easier for you?

These are only some of the questions we ask but they can help in making the client think about the web design project in a different way and give you the information you need to start putting a web design proposal together.

If you have a web design project and would like to talk to kc web design Kent about what we can offers then please give us a call. We might ask you the same web design questions you’ve read here but hopefully now you’ll have all the answers!