We have recently been lucky enough to work with the very talented Kashmira Jhaverim: the brilliant graphic designer at antdesign. Kashmira designs cards, calenders and corporate graphics based on her unique style - a fusion of Asian images and healthy living.
Kashmira came to us because – in her own words “I have a design that I have created for a website but I do not know how to code it”.
The requirement was a small 7 page website with integrated blog and scrolling home page banner – all done on a strict budget. To be fair coding it was a challenge even for our developers – with 10 years experience a piece!
Converting flat graphic designs into fully functional websites are always a bit of an undertaking. We had to give Kashmira a bit of a crash course in website design (and use a bit of creative thinking ourselves!) in order to adapt the vision into a fully functional website with as little compromise to either design or functionality as possible.
The main differences between print design and web design are as follows
- Colours. Whilst colours can be coded into a website, the actual colour on screen will depend on the visitors screen. Their monitor settings and may be a bit more red, more blue etc – the end result is that the shade you specify will not be the same shade that is displayed on screen. As for matching print colours to websites – forget it!
- Fonts. Although it is looking optimistic for the future, we are currently stuck with a limited number fonts that we can use reliably on the web. Websites can only use fonts that are installed on the visitor’s machine (yes really!) and there are only a small selection that are reliably safe to use. In many cases an image may be used instead of a font but these cannot be read by search engines.
- Font sizes. The visitor ultimately has control over the font sizes. As you can imagine changing the size means that the entire website needs to grow/shrink accordingly. It’s possible to cripple the font changing functionality but this is really poor practise.
- CMS. Every content management system has its limits. The antdesign website has been built using our very own SMART CMS. Using any CMS means that the website needs to be coded to allow for change and variety of content (different sizes of text and images).
- Design port. Porting a design to a CMS in pixel perfect precision is very time consuming. I like to use the phrase “approximation” – which essentially means that we will reuse as much of the existing design as possible. In many cases a pixel perfect port is possible but the additional time required to pindown the last 5% can be significant. Opting for an approximation can really help to keep the budget down.
- Text formatting. Having been so used to print, Kashmira was really keen to have the text line up and include breaks in very specific places. In print this can work but the reality of a website (particularly one with a CMS) is that it will need to grow and shrink. Web designers take a much more organic approach to seeing their website looking different on varying screens/browsers & devices.
- There are many other significant differences also (pixels and not cms, SEO, accessibility, writing copy for web, image optimisation, download speeds, user experience…)
Back to ant design… One of the features that we are particular pleased with is the image gallery. SMART already supports a number of gallery formats and creating Kashmira’s vision almost perfectly was simple with a bit of CSS know-how from the developers at B Websites!
The thumbnail gallery allows user to see all the images on the screen and to select the image that they would like to see bigger.
We absolutely love Kashmira’s work and are chuffed to bits that we were able to do such a great job on translating the website design from print – to web. What do you think?
