HSBC Plans to Redesign Its Bank Cards

New unified design proposed for HSBC's bank cards across its 30 countries

HSBC could be onto something with their latest announcement. The multinational retail banking giant are going to redesign their bank cards. Across the thirty countries it serves, the Hong Kong based bank aim to standardise the graphic design of its ATM, credit, and debit cards. Its main aim is consistency, a must if you have a global brand like Apple or McDonalds.



HSBC's 30 countries will benefit from their new look. They will be based on the lion which sits at the entrance of HSBCs headquarters in Hong Kong. Created by Hong Kong-based design consultancy, Shift, the lion forms the centrepiece of its future ATM, credit, and debit cards. Each colour represents the kind of card that is issued to the customer. A red lion on a matt silver background, for example, is used for debit cards.

Shift's aim is to “cut through the complexity” of its retail banking products. The company has also designed digital equivalents for Android Pay, Samsung Pay and Apple Pay. By the end of this year, HSBC's new look cards will have been issued to new customers and existing customers, whose cards will expire this year.

>Other facts about HSBC’s new cards:

• The first recipients of the new look cards are holders of Premier Mastercard and VISA Platinum credit cards;


• From June 2017, existing customers with VISA Debit cards will get the new design;


• In July 2017, holders of VISA Gold and Classic credit cards will follow suit;


• Stephen Stitt, the customer name on the card design is shared with HSBC’s two lions, which are seen at the entrance of their Shanghai headquarters;


• The two lion statues, Stephen and Stitt, were cast in bronze by Henry Poole in 1921. They are named after chief managers Alexander Stephen and Gordon Stitt.

Dreamkatcha, 28 April 2017.

HSBC and Canary Wharf image by Aaabbbccc (via Shutterstock).

Typography: Stuck for Suitable Typefaces?

How to choose suitable typography for web and print based projects

[caption id="attachment_8987" align="aligncenter" width="1080"] Image by Frazer (via Shutterstock).[/caption]

It takes a bit of nous to choose a different typeface to the first one you see. By default, we set our standard body text to Times New Roman, Calibri or (gulp!) Comic Sans MS. After a bit of soul searching, you find there’s a world of typographical options on your computer or cloud computing account: Arial, Helvetica, Georgia, Verdana, and so on. Sometimes you can never have enough typefaces. For typography options, you might need to look elsewhere.



On the internet, there are oodles of typography sources. Not only websites advertising free fonts, but also those of type foundries. Plus you’ve also got Google Fonts, which offers a wealth of open source typography options.

If you’re looking for free typefaces...

There may be some limitations. Some typefaces may be licensed for non-commercial use, which is fine for coursework, though not corporate brochures. In some cases, you might see ‘pirated’ versions of paid-for typefaces. Any typography could be suitable for web projects; with desktop publishing software, the transition from web fonts to print could be fussy and lost in translation.

If you’re on a strict budget and looking for a free typeface, go to the Google Fonts website. As well as being able to download each font family onto your PC, embedding Google Fonts into web based projects are straightforward.

If quality matters...

Go to the websites of well known font foundries such as ITC Linotype. MyFonts.com has a wide variety of paid-for typefaces. Depending on whether you download one typeface or the entire font family, you can use them on any project. The typeface is yours for keeps. For commercial projects, this by far is the best option. Moreover, they will work well on print projects as well as online.

If you wish to follow the trends...

Typography addicts should go to Typewolf. This website has several Top 10s of typographical leanings. It also features alternative typefaces to, for example, Helvetica, Arial, and Gotham. It is well worth a read for catching up on the latest font fashions.

Dreamkatcha, 26 April 2017.

DIY Web Design - A Costly Mistake | Dreamkatcha Web Design

What is a DIY Website?

We've all seen the adverts and the posts "Create your website here - it's FREE!". I'm referring to automated web design services where you pick a generic template and add you own text. Then choose from a limited number of boring, uninspiring images that just leave your website flat and boring. "We'll have you up and running in minutes" - a bold claim and absolutely false. The "website builder" is often offered to you as you purchase a new domain name, these are confusing and a poor choice in al respects. Costs seem low to begin with, but this all changes in time and we'll discuss this a little later.

What are my options?

As a start up business owner or if you are looking to redesign/revamp your existing  website, there are a few option to choose from...

1. DIY web design
   A very limited option with little room for expansion, with a very generic and lifeless feel to it.


2. Bespoke web design
   The most expensive option by far. Coded 100% from the ground up using raw code and various design languages. If you want your website to be all singing all dancing, with seriously complex functionality and programmed by an experienced web developer and then assembled by a professional web designer. This is largely unnecessary in today's world of CMS platforms and advanced frameworks such as Wordpress and Joomla, and carries an astronomical price compared to the below option.


3. Hybrid web design
   This option is by far the most common and value for money option. Over the last decade, CMS platforms such as Wordpress and Joomla have taken up the market share of all website designs currently online. With almost the exact same opportunity to expand and update as the bespoke option, many add-ons and plugins can achieve what you would usually pay hundreds (if not thousands) of pounds for. Templates can be selected if required, but this isn't required, or even benefitial most of the time.

At Dreamkatcha, we believe the Hybrid web design is the best option for 95% of all start up business. Why do we suggest this option...read on!

The limitations of DIY Websites

As a start up business, it is very tempting to scrimp and save as much as possible. Sometimes this is done in completely the wrong areas and this is simply down to inexperience and shooting from the hip, without proper research and planning. We see the same thing all the time - new businesses breezing over the importance of having a professional web designer construct their online presence. They feel that a DIY site builder is the best option for them in the beginning, but this decision soon comes with deep regret. A quick solution implemented at this stage immediately limits your future in more ways than realise. We will discuss these limitation below.

1. Confusion
   Many people assume that these DIY site builders are easy - they heard a friend of a friend has done it, so hard can it be? Confusing, if you aren't computer savvy and used to online computer interfaces. Many people try to save time and money with these online options, but soon realise that there is much more to it than just typing some text and selecting a few pictures. Often they abandon the race and come to their senses, other end up spending a horrendous amount of time before they eventually quit. Then there are some who refuse to let it beat them and post the site live for all to see. They then wonder why their business is crumbling before their eyes.
   

   98% of all DIY (Do-It-Yourselfers) fail to even complete their website design

   
   


2. Design
   All DIY websites come from a very limited range of templates. Most of which are unsightly and plain, but these make up the bulk of the "Thousands of templates to choose from" Leaving just a handful of designs that you would even dare to use as your online representation. Unfortunately, you are not the only one looking through these templates, so the best of the bunch will have been chosen by thousands of other customers. Leaving your website the same as everybody else's and just as uninspiring. You are massively limit as to what you can change - while many vendors offer expansion packs for money, they are still very basic compared to what is available with a CMS system. If your website is an important part of your business, I would look elsewhere just on this basis.


3. Mobile friendly
   The majority of DIY site builders do not display well at all on mobile devices such as tablets and phones. They are also not updated regularly, so as soon as a browser is updated, your site may now be unreadable..and unfixable!


4. Little, or no support
   What most people don't realise with web design, is that it takes many hours and lots of experience to render a website on multiple devices and browsers. When a new business owner signs up for a DIY website builder, they only expact the fun creative (although very limited) part and not the hours of trouble shooting to edit the code for each display. Most online solutions don't offer any support for these common issues and even if they do, it comes at a cost.


5. SEO
   If SEO if a vital ingredient to your website's success then a DIY site builder isn't they way forward. Many are built with Flash (a technology that isn't compatible with the majority of mobile devices) and is any empty page as far as search engines are concerned. As above, once a search engine changes its algorithm, the website may also drop dramatically in rankings.


6. Content Management
   Being able to update and add to your website is an integral part to owning a website in 2016. Many website builders are without options for blogs and limit the amount of pages you can add to your website. This will hinder and attempts to promote and expand your site further down the road. This may not seem like a big deal now, but Dreamkatcha (and most other web design companies) cant do anything with your website if it has been created but one of these online web builders. We will need to start from scratch every time.


7. Your own Domain
   Not having your own personal and unique domain name screams that you are not a serious business. This will instantly deter any prospective clients who are looking at your website. It could be enough for them to loose faith and simply move on tot he next company in the search results. Yet another opportunity (if you are lucky) for the software company to charge you more money for this privilege...it's all starting to add up isn't it.


8. Extending Functionality
   Adding extra features to your bog standard website is again a tough pill to swallow. Whereas CMS platforms such as Wordpress and Joomla have many thousands of plug-ins offering all kinds of updates and expansions little or no cost. With the "quick & easy" DIY site builder, you are now at the mercy of a specialist developer within th company, who will now charge you astronomical prices to create these modifications.


9. Advertising
   Most of these DIY websites won't let you use external advertising on your site - a viable option if you decide to promote with this feature. They will however place their own annoying adverts all over your website, in order to recoup some income from their free or low cost website option. Again this feature can sometimes be removed, but guess what...at a price. I assure you, it wont be long before you decide these ads are completely ruining your already boring and bog standard low cost website.


10. A sitting duck!
    Not only is the code unprocessable to any external developers or web designers, the site cant be transferred away from the company. So if you wanted to change hosting providers or change your domain name, you have no option but to start again from scratch. You are also not protected from an attack from a hacker, so once your site has been destroyed, you wont have the expertise on hand to rectify the situation.

The Cost of Saving Money

A recurring theme has been rearing it's ugly head right the way through this article...extra charges. What first seemed like a quick, painless and low cost option, is now becoming expensive and unrewarding at best. With the simple addition of a blog, a few extra pages and a personal domain name, his "free" website has now cost you £350 for the year, including hosting. Now lets look at the cost of this site, should you decide to keep it (your business will be well and truly burred buy now) for 5, maybe 10 years. You are now paying more than you would for a professionally designed hybrid website, with 10% of the adaptability and 1% of the class.

If you are serious about creating a website for your business and want it to be taken seriously, hire a professional and be proud of your online presence. Your time should be spent on much more important things, such as building stock, accounts, promotion...and your family or loved ones.

Graphics Tablets: This is How We Did It

In our nostalgic look, we take a trip back to a time before Wacom graphic tablets became the norm

[caption id="attachment_8965" align="aligncenter" width="640"]British Micros' Grafpad III, one of the earliest graphics tablets designed for home and business users. Image by 488405 Sespo (Creative Commons License: Share Alike-Attribution).[/caption]

Among the tools we take for granted in our studio is the trusty Wacom tablet. We find it a boom for illustration, especially for web design, brochures, and image manipulation. Being able to negotiate the tablet like a pen is second nature compared with a mouse. Graphics tablets have been in existence for the last forty years.



The most seminal creation was the Quantel Paintbox. Launched in 1981, it became the ‘must-have’ tool for television graphics. The system included a VDU, keyboard, a ‘digital paintbox’, and a giant graphics tablet. The original model had 160 MB of hard drive space. This was back when 10 MB was a big deal on the original IBM PC (a chunky 8086 processor-based machine released the very same year).

To say it revolutionised television graphics was an understatement as it led to the creation of similar, more advanced systems in its wake. Back in 1981, some of the smaller ITV franchises and independent production companies may have struggled to buy a Quantel Paintbox - let alone home users. In 1983, British Micro launched the Grafpad. This was a graphics tablet that plugged into the back of a Sinclair Spectrum computer, which came with a light pen and utility software.

One of the most successful graphics tablets of the 8 bit era of computing was KoalaPad. Originally released for the Commodore 64, it was hailed as one of the best graphics packages for the time. It came with a small touch sensitive pad with two buttons, a cordless pen, and utility software (Koala Painter). It didn’t only became a ‘must have’ tool for graphic designers with a C64: other machines like the Apple ][ and the Tandy TRS-80 were supported.

Without KoalaPad, we wouldn’t have got the venerable Wacom tablet. The Wacom uses similar design principles (wireless pen, small pad) but (most importantly), it doesn’t tie you to one utility package.

Today, the graphics tablets see a new threat: the Microsoft Surface Studio PCs could take their place. Microsoft’s cutting edge design sees the monitor turning into an electronic drawing board. Instead of a pen, a control dial is used to choose colours and other settings. This could be a game changer in design studios around the world.

Dreamkatcha, 04 April 2017.

Did Typographical Fails Ruin The Oscars?

Reddit post mulls over possibility that the Oscars fiasco was caused by typographical failings

It could have been worse, at least The Oscars nomination sheets didn’t use Comic Sans MS.  Here’s our reconstruction of how it would have looked if Comic Sans MS was the chosen typeface.

“The Winner for the Best Use of Typography in an Internationally Recognised Awards Ceremony...” oh, forget it.  Forget it!  This year’s Oscars was memorable for all the wrong reasons.  Memorable in the 1989 Brit Awards sense (don’t get us started on that one either).  Firstly for the La La Land cock-up.  Coming a close second was a failing in the typographical department.

In the original image (seen in this Reddit link), we see a few graphic design fails.  Firstly, The Oscars logo should be relegated to a bit part, possibly at the bottom right of the slip (as a product placement image).  The logo is positioned in the spot where the Best Picture category should be placed.  Instead, Best Picture is relegated to footer text in italicised Times New Roman form.

The rest of the text is in Futura Medium.  Capitalised no less (leave that bit to the keyboard warriors on social networking sites, please).  The choice of typeface isn’t too bad, but shouldn’t the film title be set to a heavier weight than that of the directors’ names?  If you did a City and Guilds NVQ in Desk Top Publishing, the difference between bold and normal type is next up from writing your name in terms of difficulty.

As our reconstruction shows, the stationery design for the Oscars could have been set to Comic Sans MS.  Even the Best Picture footer text stands out better with Comic Sans than the faint italicised Times New Roman.  Whilst we were in La La Land frothing at the mouth over this cock-up, the fellow who posted the screen grab had a point.  Some of the subsequent comments are pure gold.

Ten Web Design and Development Fails

Or: how not to attract customers to your website thanks to shoddy web design and development

Since Dreamkatcha was formed, our aim from the start was to raise standards in web design. We are strong advocates of accessibility, clear design, and aim to raise the bar a little higher each time. In our time, we have seen some websites that were acceptable in the 1990s and should have stayed there. This has inspired our latest posting on the ten deadly sins of web design and development.

10. Neglecting Cross Browser Compatibility

Most of our web browsing is done on mobile devices - iPhones, iPads, Android tablets and so on. More than ever, websites need to be designed for all browsers and all users, and this means using responsive web design techniques. From traditional PCs to the most modest of smartphones.

9. Automated Music

Just don’t bother. Having automated music on your website is a one-way ticket to higher bounce rates. The embedded audio file may be charming for 10 seconds but hearing the same muzak each time you load the site is irritating at the very least.

8. Ignoring White Space

A balance between content and whitespace is an essential ingredient of any website. The browser, irrespective of their device or PC does not want to be bombarded with an overkill of text, graphics, audio and video files. Potential customers may take their business elsewhere.

7. Too Many Stock Images

Sometimes you can tell from a great distance if the web designer has plumped for stock images. For example: the clichéd pictures of women with white teeth and call centre headsets. Go for original images featuring your own work. Hire a photographer or teach yourself, and invest in some high quality photographic equipment. A well focused original image with a DSLR or a film camera adds more value to your site than a stock image.

6. Images Of Text

Images of text are a major accessibility issue. If s/he is unable to view images on your website, imagine if textual content was saved as an image file? Furthermore, your website won’t be properly indexed by search engines if text is used in this way. Thanks to CSS techniques, this method is wholly obsolete.

5. Too Many Big Images

Big images can either take forever to load or be a pain to navigate on a mobile phone. If you’re designing for mobile devices as well as desktop PCs, ensuring the scalability of images is important. With loading time another issue, image sizes should strike a balance between clarity and file sizes.

4. No Clickable Logo

With responsive web design in its ascendency, the use of a clickable logo is more important than ever. Today’s web designers and visitors to your website associate the clickable logo as the back to Home link.

3. Confusing Navigation

In cyberspace, there is nothing worse than getting lost on a website due to arcane navigation systems. It is imperative that your website has the same navigation on all of its pages, with primary links given pride of place. Pull down menus from primary links could be used to direct users to secondary pages.

2. Inconsistent Style

What’s worse than inconsistent navigation? An inconsistent style throughout your website. This was why CSS (Cascading Style Sheets) was invented in the first place. It also allows for wasteful coding, slowing down your website and its ability to be seen by search engine directories. A consistent house style throughout your website allows for continuity from the Home page to the Sitemap.

1. Splash Pages

For our final web design peeve, we look at something that was acceptable for a while though truly awful in 2017. Ladies and gentlemen, we give you… the Splash Page. The idea of a splash page was to ‘greet’ visitors to the client’s website, usually with a self-indulgent Flash or Shockwave movie clip. But, in the dial-up era, they were slow and added little value to the site. Which is why they were - and still remain today - discredited as a web design technique. This form of ego massaging is also bad for rankings.

Finally…

We strongly advise refraining from using the ten techniques detailed above. Unless you’re the creative genius behind the Lings Cars website which breaks every design and style rule going. A poorly designed website is usually bad for business, but Ling Valentine bucks the trend. With the way it is designed, it actually satirises ‘90s websites in a fun way and pricks the pomposity of its rivals.

9 Tips for Working With Your Web Designer

 

SO you have managed to navigate the minefield of selecting rt good web designer (see previous blog) and now yo need to know how to work with them. In this article we will discuss how to make the most of your new business relationship and what to expect further down the road.

It's imperative that you start the project on the right foot, after all, first impressions last a lifetime. The complex venture with your web designer can be a rewarding and enriching experience, providing you put in some effort and time. Making sure you are both on the same page throughout your project will ensure compatibility and productivity.

Here are some of the major pointers to help you make the very most of your working experience together:

1. Do your homework

Don't simply click on the first web design company on google. Just because they are at the top of google, doesn't mean that they are the best, oreven the right one for your project. Web design companies often pay to be at the top of google, some don't even speak English as their first language and this can lead to an unmanageable breakdown in communication. You may also select a large design agency, charging astronomical amounts for designers, account handlers and other overheads. This is largely unnecessary as you will quickly find a smaller company with just as much experience and skills for less than a quarter of the price.

2. Don't assume that creating a website is an "easy job".

As a web designer I can tell you this raises a communication barrier from the outset. The process may seem simple in your eyes, but that may be down to the fact that your web designer has spared you the technicalities and endless troubleshooting in previous projects. Stating that "you would do it yourself but don't have time" or "it wont take long" are both very demeaning and are also not going to bring the price down. If I told you I could do your job as well as you without years of training and experience, how would you feel about that?

You may have had some experience with online site builders and DIY options (see this blog to explain why this is more than likely, the worst idea you ever had), but the fact that you are now hiring a website designer shows you that things aren't as simple as they seem. The amount of work that goes on behind the scenes on these builders is 90% of what you are paying a web designer to do, only they are doing it properly for you.
Leave it to your designer to explain the difficulty or how long the job will take, don't rush them into providing a less than perfect service. It should be clear from their online portfolio examples that they are capable of competing your project to an adequate standard.

What may seem like a simple change to your website could equal hours of troubleshooting and support tickets for your web designer.

3. Keep Your End of the Bargain

You will be required to supply the web designer with content for your website. Bear in mind that if the designer doesn't have what they need when they need it, your project will come to a halt. They will then move on to another project and yours will be shelved until you supply the information discussed in your original brief or meeting. To avoid any delays to your project's completion date, it would be best practice to supply everything your designer needs up front. This would include and text, images, co tact information and design options. If your pictures need to be purchased, this would also be completed at an early stage.

If your web designer has provided an initial web design project questionnaire (ours is linked here) then this will help to start the project n the right foot. This should inform the web designer as to everything that you have envisioned for the project. The more information you provide, them more scope the designer will have to full fill your expectations.

At Dreamkatcha we offer a project discount if you can provide everything required for the project upfront.

4. Be patient with your web designer

From a clients point of view, you will want your project completed yesterday. You wont be the first and you wont be the last. But putting the pressure on your designer to finish the website sooner than they are used to could result in a substandard project...and you will be they cause. If you really need your project completed in a short amount of time then get it under the nose of your designer as soon as you can. This will give them the best chance of completing on time. If you can get everything ready as soon as you decide to initiate the project, then you will help the process exponentially. Quality work doen't come overnight, it takes time to design, develop and test each section of your website.

5. Get involved from beginning to end.

Now let me be clear...I don't mean help design your website, I mean stay close to the project and respond to emails as soon as you can. Also provide your comments as an when they are required.

A good practice is to discuss each stage of the process so that you are both on the same page throughout the project. This will speed up productivity and also help you keep any deadlines discussed, on time. If one of you isn't regularly contacting the the other with feedback, the project can go off the rails and getting it back to where it should be will take extra time.
You will get out, what you put in when it comes to graphic and web design projects. After all it is a collaboration between you and the designer, you want to see something special at the end of the day.

6. Don’t Ask Family & Friends what they think of the designs if they have no reference

Throughout the project, your web designer should send you samples and examples if the work he is performing for you. From image selection to layouts, fonts and pretty much every design suggestion. It will be tempting to then show your friends, family and colleagues and get their opinions. After all, more views will always equal a better analysis right? Wrong! Unless the people you are showing the designs to is your specific target audience, or they have experience if fields such as marketing (or something relevant), then this can usually strain  your client-web designer relationship. There is often no objective criteria to support the opinions you receive from friends and family and can end up confusing not only your designer, but you as well!

7. Don’t Overcomplicate things

Don't become a web designer or graphic designer, thinking this will help the project. Remember you have employed a designer because you lack the skills or expertise to carry out the project yourself. Everybody want to see some of their suggestions in the final project, but make sure they are only suggestions. Your designer will decide if these suggestions are going to work or not, many factors may b at hand that yo don't understand. Only your designer will understand the entire implications of your suggestions and this is just down to  experience. Bear in mind that what you had in mind at the beginning of the project either may not work due to unknown contributing factors, or their is simply a better idea that your designer will know.

8. Don’t Micromanage Your Web Designer

To ensure a productive and enjoyable experience for both the web designer and the client, it is important that each of you stick to your respective roles.

As a new business owner or entrepreneur, it is your job to communicate your requirements clearly to your website designer. It's the job of the web designer to come up with a complete solution that satisfies your initial brief. An example where clients regularly overstep the mark would be where they think the colour pallet is too bland for their particular brand. This is actually a good and constructive contribution, however when they start to offer specific design modifications without the assistance f a trained eye, this can leave the entire design floored. The problem with this level of interaction leaves your designer in the dark as to what the bigger picture is and may interfere with the overall picture envisioned by the designer. Asking for a solution draws on their skill set and experience, where they will probably be able to suggest a better solution.

9. Be decisive

When you receive a set of designs to look over, be strict and decide upfront what you like and don't like. Being wishey-washey at this point can be costly and waste voluble time. What may seem like a simple cold change to you down the road could spell disaster for your web designer, taking hours or even days of unnecessary work. Don't keep asking for multiple designs as this will lead to a stained working relationship. After the first couple of designs you should be able to give your designer clear instructions where to go next so that any modifications after this will be minimal. Bear in mind I am referring to logo designs of info graphics, not websites! You should only expect one website design based on your brief, extending this process has been prven to be confusing and unnecessary.

Conclusion:

After you have decided on the right web designer, work hard to establish a good working relationship from the outset. Make sure you are clear and informative, provide all information in a timely manor and stey in touch at every stage of the project

You have picked this designer from a long list of others, o have faith that they can provide you with a first class service. You will have seen from their online portfolio that they are fully capable, so give them some space for creativity and don't rush them. Buy responding to emails and phone calls as soon as possible and providing feedback and any necessary files will go a long way to a successful process and achieving your deadline.