A good designer will look at a brief, digest it, challenge it, and ask questions in order to obtain a clear list of objectives. It’s then the job of the designer to come up with a solution or concept which not only fulfils the brief but (more importantly) meets the clients requirements.

Every client wants their design to look beautiful – that’s a given, but most clients need our experience to guide them through the project answering questions, such as:

How should it look?

Speak with your client and take on-board any pre-conceived ideas. Carry out some research into your clients industry and get a feel for the world they work in. Once you understand that you’ll have a better understanding of their competitors and also how their own clients think.

What pages or screens do we need?

Get out your sketchpad and draw a sitemap, consider every page and the users journey. This will give you a complete overview of the sites pages and how they interact with each other.

How do we create clear navigation for such a complex sitemap?

Once you have a sitemap in place you’ll have a good idea of the navigational structure. If there are a lot of pages you may need more than one layer of navigation, or alternatively you could condense your pages merging sections that relate to each other. Wireframing your screens will give you a clearer picture of what you are trying to achieve.

How can we get the user from A to B via C and back again?

Consistant and concise navigation is key. Make sure you can get to every page from anywhere on your site. If you’re using a sub menu on lower-level pages consider using a crumb-trial to guide your users back to where they’ve been. If it’s an app make sure you provide a way of getting ‘back’ at all times.

What is the most important call-to action?

Look at your objectives, if you’re working on an eCommerse site the primary goal is to sell products. Products should be accessible from every page of the site, don’t hide them behind pretty banners. Make prices visible and name call-to-actions and buttons appropriately – don’t say ‘Take A Look’ when you really mean ‘Buy It Now!’.

How can we make best use of social media?

Social media is everywhere, with more and more people spending large chunks of their lives on social sites it’s important that you make your content easy for people to share. Make use of tools such as AddThis and encourage conversation through Twitter and Facebook.

The list of objectives for a project can be long and complex but a well planned and intuitive user interface will make all of the above feel simple, and that’s all down to good design. A great designer is also someone who knows when they need help – involve your teams developers, marketeers, and SEO specialists who should all ideally have a part to play in the making of a site. Without input from any one of these at the right point could see a project fall flat. Knowing your objectives will help you make the right decisions and call upon the right people for the job.

Here’s a great example of a designer not thinking through their UI properly. In this article ‘A stunning concept of what Apple’s iOS 7 could (and perhaps should) be like‘ you’ll see a great looking design concept for the new IOS7 lock screen without any thought as to how it’s actually going to work.

Look at the above – pretty isn’t it? But anyone that’s used an iPhone will know that unlocking your phone at the top whilst using your thumb is not as easy as at the bottom of your screen. In this instance the designer has created a ‘pretty design’ but overlooked usability and has in some ways failed at the design process. Simple mistakes like this are easy to make if you’re not collaborating with others or testing your concepts.

With a bit of careful consideration this mistake could of easily been avoided, either by testing the design or simply asking others for feedback. When working in isolation sites like Dribbble, Forrst and Twitter allow designers to tap into their industry making it easy to seek out professional advice.

When we design and develop sites in-house we try to consider every element of a design – from the look and feel, to how it works and ultimately how it’s going to achieve the clients goals. We’re always learning though, but if you follow the basics you will have a better chance of producing something that’s great rather than average.

If you have a project in mind and fancy putting us to the test, then head over to our project planner and tell us all about it.

The post Design – Way More Than Pretty Pictures appeared first on FHOKE.

You might have noticed we’ve been a bit quiet of late but after the launch of our new site, we’ve been inundated with new work from across the globe so it really has been heads down and months of design and development work that continues to this day. While we have a breather we wanted to show off our latest launch Listverse.com.

Listverse is the original Top 10 list site serving over 20 million pages a month to more than 8 million readers. Based and run from New Zealand the site is hugely popular in the US and specialises in bizarre or lesser-known trivia, lists published to the site are designed to intrigue and educate the reader and has a huge fan base.

We worked very closely with the Listverse team to understand the requirements for the new site whilst maintaining the format that existing readers enjoy. The new site enables the team to publish to a wider platform with a fully responsive design that is both lightweight and intuitive for the reader to use whether they are viewing it on a desktop or a smartphone. Added functionality also gives the team a chance to bring older content that is newsworthy or relevant back up from the archives to the homepage, keeping the site’s content bang up to date.

The main focus of the redesign was (aside from attractiveness) speed. At up to 15 seconds for a page to load on the previous site users will have noticed a measurable improvement in that area. A lot of work also went into making their mail subscriptions better; they are not only more attractive and intelligent in article distribution, but users can also choose to subscribe to daily or weekly updates.

Whilst we can’t give too much away there are three further phases to the site that will be rolled out over the next year including an app. We can’t wait to work with the team at Listverse again.

The post We Launch a New Responsive Site for Listverse appeared first on FHOKE.

As web designers it’s always tempting to add more, we all know that ‘less is more’ but in practice it’s not always easy. This can be made harder when working for clients. On occasion it’s been known to hear the dreaded;

I could have designed that in Word.

and almost always when a site has been designed with a clean layout and beautiful typography, or a typographic logo with perfect kerning and proportions. Either way in the clients eyes it’s not been ‘designed’.

At that point it should be your job to try and educate the client to see things differently. Sometimes, no matter how hard you try it’s just not possible. It’s then your mission as ‘design’ mind readers to get into the mindset of that client and create a design they would of created, if they could. It might not be your choice of style, or something that you would have created had you been given complete freedom, but it does keep the client happy and money coming in.

Why It Occurs

Over thinking and over designing is human nature, we all urge to ‘make things better’ when in fact something that ‘does the job’ is all we need. A good example of this is highlighted in a couple weather apps that we’ve recently downloaded.

Solar is a beautiful app with a super simple interface and gesture based navigation. The background colour changes depending on the time of day or current weather (sunny – orange, cold – blue). We love the look of it, but never seem to use it.

The other is Weathercube – another great app with more detailed weather information than most. It also has clever gesture based navigation with beautiful animations making it very appealing. The problem is that neither of these are as simple as the standard Apple weather app.

The standard weather app sits on home screens and we expect more people want to replace it with another but just don’t. Open the app and it tells you all you need to know. It might not look as simple as the others but you don’t have to think about how you navigate or interact with it as all the information you need is on screen in one place. The icons look semi realistic unlike the more simplistic graphics of the other apps. You don’t need to think about what the icons mean or try and figure out how warm it is by looking at a colour, you just know because it says so in the simplest possible way.

The Solution

Sometimes the simplest designs get overlooked in the desire to ‘make things better’ and as a designer it’s easy to get swept up in a clients mindset. Next time you think a design ‘needs more’ take a different approach and strip it back, you’ll probably find that in taking away you’re actually adding more.

Keeping it simple is not as easy as it sounds, but once you’ve mastered it you may find yourself producing your best work so far. And next time a client says to you “I could have designed that in Word”, you can always add more to keep them happy. After all, they do pay the wages and it is key is to maintain a great relationship with the client, leaving them feeling satisfied at the end of a project but saving you the heartache, pain and tears that running a project can bring.

If you’re still struggling to deal with clients and losing the passion to design, then why not read our article on taking control and saving time when designing for clients. Then all your bases will be covered.

The post Keeping It Simple appeared first on FHOKE.

As web designers we’ve been through it all, from perfect site launches to ones that have turned into complete nightmares. Through our experiences we’ve compiled a list, in no particular order, of a process we go through before we launch a website. This won’t cover everything but should give you a quick overview of what you could be doing or adding to your own launch checklist.

To make your task even easier, webdesign.tuts+ created a number of versions of this checklist, including an HTML version, Markdown, PDF and Evernote. Download them all from the Tuts+ GitHub account.

Successful Site Launch

After having invested a lot of time in a project launch day will be in sight. Before you get there you’ll still have important issues that need addressing to achieve a successful site launch, get these right and both you and your client will be happy.

Remember, before you show anything to a client make sure the site matches the original spec, is pixel perfect to the designs you presented and fulfills their original brief.

Content

Get a small team together (it doesn’t just have to be web designers) and go over the content of the site with a fine tooth comb and make sure you get this right.

Good content works towards a great site.

Spelling - Check and check again. Run a spell check. Better still get others involved. You can never have enough people making sure copy is correct. Look out for any errors as well as checking for widows or orphaned words in important paragraphs.

Copy – Make sure real copy is in place and all placeholder text is removed. There is nothing worse than seeing lorem ipsum in a mission statement.

Contact Details - It seems obvious but make sure these are correct. Without them how do you expect people to get in touch? Check phone numbers, check email addresses and test that these are working, make a call or send an email and check they are received.

Copyright – If you plan on using a date in the copyright info make sure it is set to automatically refresh from the time stamp on the server, and that the copyright owner is correct.

Terms – If you are providing a service or are involved in promotions then you will need terms available for visitors to read. If you are unsure as to how these should be written then consult a lawyer for best advice. Remember make these as clear as possible. There is nothing worse than being baffled by legal jargon.

Privacy – If you use cookies, capture data, or distribute data, then you need a privacy policy. Keep these simple and be clear on what data you collect and provide details of how you can be contacted for further information.

Functionally

Does it work? This might seem obvious but above all else this is the most important part of a project.

You might have everything else in place but if the site doesn’t work correctly what’s the point in launching it.

Minor bugs may appear when visitors use the site for the first time but making sure it works at near 100% will ensure a successful site launch.

Compatibility – Check the site works across all browsers and platforms. As web designers you should be in the know about the latest browsers making the client aware at the beginning of a project what platforms you will build and test to. Use platforms such as Responsivator and Browser Stack to test sites quickly as well as on physical browsers and devices.

Favicon – Obvious but this can be missed. Look at creating on iOS home screen icon too.

Logo – Does the logo link to the index page?

404 Pages - Check you have these in place, make sure they signpost ways for a user to get back into the site or direct them to pages of interest with relevant links.

Redirects - If you are redirecting pages use suitable 301 re-directs over 302.

Forms – Make sure they aren’t sending to spam mail boxes, or returning an error once submitted and include a thank you state once a form is submitted so a visitor knows it is sent. Above all else make sure the clients email address is specified when the site goes live.

Links - Do internal page links work? Do all external links work and do they open in a new tab?

RSS Feeds – Website feeds can be useful. You don’t have to limit these to articles, you can have feeds for most pages for example new work or case studies added to a site.

Standards & Validation

These two things should be considered throughout the design and build to make every users experience on your site as good as it can be. Points to consider:

Contrast – Using the very latest monitors it’s easy to see subtle differences in colour, be sure to test your site on multiple devices and laptops to make sure the design has clarity and text can be read with ease.

Text Size – Make text clear and easy to read, adjust line spacing and allow plenty of white space. Bigger, can mean better, when it comes to text on the web.

Alt Tags – Make sure all images have clear descriptive ALT tags for the visually impaired. Not only that but without them they can’t be found in search engines.

Consistency – Make sure common elements across the site are consistent to avoid confusing your users. Make buttons look like buttons, links look like links, and titles and text should be the consistent in size and colour.

Device Compatibility – Consider how the website will be used across multiple devices, responsive or not your website should work for desktop and mobile web users.

Validation – Always aim for 100% validity. If your site fails to validate fully don’t get too upset, but be sure to understand any errors in order to to eliminate any unwanted issues.

JavaScript – Many people browsing the web have JavaScript turned off for security reasons. Make sure your site is fully functional and forms still perform server-side validation checks without it.

Flash – Yeah, we know, nobody uses Flash anymore right? If Flash has to be used, be sure to include an alternative backup image should Flash Player not be installed

Sitemaps

Make sure you include sitemaps. These help search engines correctly index your website during the crawling process.

HTML Sitemaps – Although not as common practice as they were this form of sitemap can have it’s benefits in helping visitors see a complete overview of the sites pages. Links for these are normally found in the footer of a site.

XML Sitemaps – These are only ever used by search engines such as Google, Bing and Yahoo. Create an XML Sitemap easily and submit it via Webmaster Tools. These will then be used to inform search engines about the pages you have published.

Performance

A faster site is a better ranking site. You’ll also lower bounce rates on pages if you can reduce load times, who wants to wait for pages to load?

Check Site Speed – You can use services such as Google Page Speed or Blame Stella to check the load times of your sites pages.

Image Sizes – Keep your images as small as possible, although speeds are better than ever no one wants to wait for a 10MB page to load. Compressing images will only improve page load times.

SEO

Great SEO will mean your web site will work harder and achieve greater success than a site that uses little or bad techniques.

Get your research right and the rest will fall into place.

This list is by no means extensive and if you want to learn more then we recommend reading more from articles such as Search Engine Optimization FAQ and A Web Designer’s SEO Checklist.

Keyword Research – Make sure you are targeting the right demographic and market. It’s important to get this right in order to attract relevant traffic to your site. Carry out some research with Google AdWords and see which keyword (or search term) has the highest traffic potential and the least amount of competition and balance these two factors.

Page Titles & Descriptions – Do all the templates have the necessary page titles and meta data based on your keyword research? When focusing on a particular keyword try and get these to the front of descriptions and look at using both singular and plural forms.

Image Alt-Tags – Do the main images of the site contain relevant and descriptive alt-tags? Using short descriptions will help. And remember try and choose a descriptive file name instead of random words and numbers for these images.

Keywords – Embed these in titles, descriptions and copy.

Content – If the content is good it will work to optimise and compliment the SEO. Good keyword density within the copy works well so use both singular and plural forms of keywords in your text. Don’t overload the content or over think this, make it natural and only add when and if it is relevant. Search engines also prefer longer pages of content so look at getting the content to +300 words but focus more on the quality than quantity.

URLs – Make sure the sites URL’s are clean. Using a descriptive URL instead of ones that are made up of random numbers or words will help with SEO and visitors finding a page they may want to return to, and look at getting a keyword into the URL if relevant.

Analytics

No matter how small a site is, having web analytics running will gather you valuable information on how to improve your website going forward.

Monitoring – With good SEO in place use tracking codes to measure this. Tools such as Google Analytics (free) or services such as Hubspot, GoSquared or KISSmetrics (paid) will give valuable feedback.

Security

You may have a lot of things you do not want the world to know about. For example user uploaded media or shoppers Credit Card details.

Protect Sensitive Pages – Protect any sensitive pages or folders from being indexed on search engines by putting in place robots.txt files and by excluding them from within Webmaster Tools. Also consider whether you need to use an htaccess file to disable folder view within directories.

Security Certificates – When developing an eCommrece website or a site that handles sensitive visitor information, the level of security will be paramount. Make sure to use protocols such as SSL encryption to protect against unwanted information theft. It has also been proven that displaying seals such as TRUSTe, can increase the credibility of a site.

Hosting & Backups

Finding a web hosting provider can be hard and knowing what you need can be even harder to understand. There are many options and pricing plans to choose from but make sure to choose a provider that meets your needs, not one that offers more than you need to pay for.

Types – Shared Hosting, Reseller Hosting, Cloud Hosting, VPS Hosting and Dedicated Servers. Not sure what these mean? Then read these quick tips.

Backups – Make sure you use a provider who can provide daily and weekly backups of your server and make sure to take local backups as well.

Monitoring – Setup services such as Pingdom or other server monitoring tools to monitor the health of your server.

Legal

Before you start any project a signed contract should be in place. The contract should clearly outline the project deliverables and processes so both parties are 100% clear on what will be achieved as an end result. As part of that contract make sure the following has been agreed to cover any unforeseen circumstances.

Image / Content Rights – Clearly state that any supplied content or imagery that is handled by you remains the clients responsibility. Make clear that you will not be held liable for publishing content and images that they do not have the rights to use. Also educate the client that they should be using images or content that are either paid for or they have the rights to use.

Payment Terms – Set fair and staged payment terms at clearly defined milestones of a project (at the end of the design phase – before any development starts for example), never move on to the next phase of a project until the agreed payment is in.

Timelines – Set reasonable timelines that are fair to your client as well as manageable for you and your team. Clearly state that you will not be held responsible for any loss or damages as a result of a delay in the schedule caused by the client. It is a good idea to use something like Basecamp to manage your projects so all work and conversations are recorded should you need them to fall back on in the future.

Intellectual Property Rights – This will be different depending on who you are, what you’re offering, or the project in question. Clearly state what is owned by you and the client once the project is complete and payment has been made in full. Consider the rights to any software or code written by you that you wouldn’t want sold on, or anything similar that you feel you need to retain the rights to.

Deliverables

In the project contract clearly explain what the client will physically receive once a project is complete. The following is what we’d recommend.

Live Website – This is the bare minimum. Make sure their website is up and live and fully functioning as intended.

Style Guide – A simple style guide is extremely beneficial for any website owner, points to consider include:

• Font Styles
• Image Sizes
• Tone of Voice
• Colours
• Imagery Style
• Colours

Assets & Icons – Any icons, illustrations, or infographics design and created for the website may be helpful to your client going forward. Supply them the files in different formats so they can use them in presentations or future design work.

Offline Copy – If requested by the client provide a copy of the site. Remember websites are a living document that should be continually updated and improved so unless the site is static you will have to be making regular offline backups for the client.

When to Launch?

Remember never hand over a project or files without sign off and any outstanding payments settled. You will have no come back at this point if you do without either of these.

Handing over a project without payment is the equivalent of a shop owner letting a customer walk out of a shop with a trolley full of goods on the promise that they will ‘pay you later’.

Now everything is in place you are ready to launch. But when should you? We try our very best to never launch a web site within 2 days of a weekend. Sometimes this practice has to go out the window on occasions but we always try and aim for a Monday to Wednesday launch slot. This will give you the opportunity to iron out any live bugs that surface during a working week. Trying to fix these during a weekend when either you or your web developers are not around will only cause you headaches when you have a client who needs their site to be fully functional. Trust us, you will only learn the hard way if you don’t adopt this approach.

Ongoing Maintenance

So you’ve launched the site it’s working great and the client is happy, now what? You need to make sure that it continues to run without a hitch. Things can go wrong or get missed, server security compromised, or it falls over. Make sure you’re ready for every eventuality.

Backups – Always, always, make sure backups are in place. Run at least two backups daily – one in the morning and one 12 hours later, limiting the amount of data that can go missing.

Version Control – Try running a project through Git, it’s a great version control system for teams of developers working in collaboration. Source code history is saved meaning that you can refer or revert back to previous versions if and when needed. For an introduction to Git read this in-depth article Easy Version Control with Git.

Analytics – In order to suggest improvements going forwards ask to be set up on the clients analytics, this way you can monitor traffic and site stats for the client and suggest improvements over the following month and year after launch.

Any More?

If you have any additional points you think should be added to the list, let’s hear them in the comments!

The post A Web Designers Launch Checklist appeared first on FHOKE.

At FHOKE we’ve managed hundreds of projects in many ways. With our team’s industry experience, running, or working within studios, we’ve seen it all; ways that have worked and others that have failed. Over the years we’ve refined our process and found a great staged approach that works well for all our clients. It saves us time and puts more control in the designers’ hands.

The key is to always maintain a great relationship with the client, leaving them feeling satisfied at the end of a project but saving you the heartache, pain and tears that running a project can bring. So if you’re struggling to deal with clients and losing the passion to design because of this then why not give our approach a go?

Brief and Spec The Work

Embrace a Clients Vision & Stop Feature Creeps

It might appear obvious, but all too often we hear of freelancers and even agencies jumping into a project without thinking of all scenarios first. Make sure you plan well, ask the right questions and educate your client on what they should expect to be delivered at the end of a project. Above all set reasonable payment stages and terms so that neither of you is left with nothing.

Creating an Effective Design Brief

If you’ve found your first round of visuals being rejected and you’re being questioned as to why you took a given approach, then maybe you haven’t taken the right brief (perhaps you shouldn’t even have taken one at all.)

An effective design brief is the single most critical factor in ensuring that a project starts successfully. It will provide the client with the right questions that as a designer, you need answered. Get the questions right and the first stage of the project has been a success.

If you don’t have a brief prepared, why not use one such as this to give to clients. Not all clients understand what a good design brief is and won’t always give you the answers you want – feel free to use our template as you please. By having this ready, it shows clients your professionalism and ultimately saves them (and you) a lot of time and money.

Remember: encourage them to have fun with this and get them to give you as much information as possible. If you still have questions don’t be afraid to ask for more.

Stop Feeling Snubbed

Now you have a great brief to hand you need to spec the work. This may be a detailed listing of the functionality or a simple list of pages and files the client should expect upon completion. Try and detail as much information as possible within the proposal, as this outlines exactly what the client will receive. It also forms a contract between yourself and the client and will prevent you feeling mistreated if a client starts to add in new features or elements that were never discussed.

Why not use these as headings in your spec:

• Project Overview
• Project Aim
• Project Team Members
• Your Process
• High Level Site Flow / Map
• Project Features and Functionality – Break these down into easy to follow chunks such as design, development and deployment
• Quotation – With your payment stages
• Signed Agreement – Client signature, dated
• Your Terms

One of the most important agreements for new projects is payment stages. Choose terms that work in your favor but are fair to the client. Remember never start or hand over a project without initial or final payment, you will have no leverage at this point. Make it clear, ensure clients know the terms up front and make sure they understand that the IP/Copyright for All/Part of the project (if you transfer it) is only theirs upon that payment. Don’t be afraid to stand your ground or, if questioned, come to a mutually beneficial agreement. For example, if you take 50% upfront and 50% on completion you might consider taking 35% upfront and 65% on completion.

It’s also not uncommon for an agreed midway payment that can be clearly defined e.g after planning, scoping, and design before the build starts. There are many ways to stage payments but make sure you decide terms that you are comfortable with.

There will always be some level of manoeuvrability at play once a project is underway, after all you will have built a relationship with the client by that point and will want to please them. However, learn when to say no, explain why a change will affect the project and refer back to the signed proposal. Being able to limit irritation on both sides will make for a more enjoyable project for you and the client.

Wireframing

Working on Usability, Layout and Navigation

We’ve worked on projects designing visuals straight from the brief to designing in the browser, but none of these approaches have worked as well when wireframing first.

Set Expectations

Wireframing sets a client’s expectations for the layout of the site before you’ve even considered introducing color, typography and graphics. It will ultimately save you time and prevent the dreaded pixel pushing process. It’s also a great way to strip back a site and focus on its usability, functionality and flow without distracting the client with design. Design first then the client will almost certainly focus on that and not on what a great layout you have presented. Making this mistake can lead to important features and decisions on the site’s usability being compromised.

Don’t be afraid to experiment when wireframing. It’s a great way to quickly create layouts and just as quick to amend. But don’t be experimental for experiments sake, it might look pretty but the site needs to be usable and meet the goals of the client.

Why not try Mockflow or Balsamiq for a cost effective solution to creating and sharing your wireframes.

Where To Start

Start by deciding on a grid system to use (look to CSS Grid or 978 gs). With the changes in resolution these can vary and will depend on the client, the audience and devices the site should work on. Make sure you have discussed the options with the client when speccing the site. This will save you time and prevent any requests to change resolutions later when the majority of the work has been done. Remember continue to communicate and educate the client in everything you do.

Because you have the functionality of the site in place from the spec and understand what the client likes and dislikes from their brief, this should be a relatively quick stage of the project. Your job starts now, so impress them and choose a well thought through layout, style of navigation and decide on the best way to make those functional areas of the site work well for the client and the user.

Be inspired by others and look around at what functions may benefit your client’s users. See what similar sites are doing, look at sites on web galleries and see if the features that they use are being put to good use.

As the professional you have the ability to create and use the latest techniques, but continue to ask yourself if it’s needed? Will it impact on your time and your costs? Does it enhance the user experience? Does it benefit the client? Does it make best use of the available space? And most of all, does it answer the brief? If the answer to all these questions is yes, then go ahead. If no, then what is the point?

Once your client is happy with the layout of the site, make sure they sign off either in writing or on email that they are satisfied with the work completed to date and are happy for you to move to the next stage of the project. This puts control back in your hands if they decide to dramatically change anything later in the project. Remain flexible to a certain level. Adjustments to the layout of the site do happen and you will almost certainly find that when you design the site certain areas may be better placed elsewhere. Communicate this clearly with the client.

Design

Injecting a Brand With Color, Textures and Typography

Having wireframes as a part of your process now, you will find that designing a site will be a much easier and a more enjoyable experience. The thinking has been done so it’s time to let the creative juices flow.

Prepare to Save Time

Preparing your files before designing will save you time later on, you’ll have everything in place and assets can be found easily. With a grid system decided start by creating a hidden layer of guides (you’ll find most of the grid sites have files ready for you) or use a plugin such as GuideGuide for Photoshop.

Prep your layers by creating a logical folder structure and continue to name each layer of your file as you design. It’s great etiquette especially if another designer or developer picks up your files. It will not only help them but help you find assets within that file quickly when you need them. Try to use Smart Objects or Shape Layers for Icons and Logos so these can be scaled later, especially when designing for retina displays.

Making Design Decisions

Where to start is down to each designer, but typically (because wireframes are in place) you will already have an idea from looking at best practices elsewhere and from the client’s brief as to the style you will be taking. Be inspired, but remember to make it your own. Over time you will find you will create your own style and clients will want to work with you because of it.

Style comes from the treatment of textures, the fonts you use and the small details such as buttons, icons, divides and interaction states. For fonts use repositories such as Google Fonts or TypeKit to get the latest typefaces that work online. For buttons play with ideas and styles; it’s very quick to switch a style up, changing the site’s whole appearance with a few layer effects. Take for example this flat button:

Created using the (Shape) ‘Rectangle Tool’ (U) to a size of 100 x 40 pixels the layer has had several layer effects applied to it. First with a flat, deep red color, using the ‘Color Overlay’ set-up with a ‘Normal’ Blend Mode at 100%. Then applied with a ‘Stroke’ using a darker red at 100% with a 2 pixel inside stroke. This creates a very flat, generic, yet stylish button that would compliment many sites.

It’s just as quick to swap the layer effects to create a site with more depth, using soft gradients and shadows to build depth. Simply changing from a ‘Color Overlay’ to a ‘Gradient Overlay’ will give you the ability to add a soft gradient to the color of the button. Adding a ‘Drop Shadow’ with a low opacity will give you a soft shadow and instantly change the button’s appearance.

Find both these buttons here.

What About Branding?

If it’s a part of your project and you struggle to make a logo or site fit the other, then why not brand and design them in parallel? With many companies based online it makes perfect sense. We took this approach four years ago and haven’t looked back since. It’s not always possible, but it has always helped our clients build a vision of the whole brand (which includes a site) rather than asking them to trust you and hope they envisage how a logo works across all media.

It will dramatically reduce your time trying to make one fit the other when possibly the style of the site hasn’t been considered at the point of designing a logo. Of course, still sketch your ideas out and use a similar process to what you use now but playing with the two ideas at the same time really does work. It’s also far quicker and easier to pull a brand offline than to make an offline brand work online.

Handover

Don’t Leave Your Developer in the Dark

Remember never hand over a project or files without final payment and a sign off from the client, you will have no come back at this point if you do without either of these.

If you aren’t developing the site yourself then don’t leave your developer or client guessing.

If you’ve taken time to layer your files correctly you won’t have a backlash of a disgruntled developer or client. It’s professional courtesy to hand over well prepared files and will not only keep your client or developer happy it will save you time with very little questioning on the set-up of the files.

Make sure to package up fonts and any assets or documentation that is requested. Keeping all the files in one place such as Dropbox will allow access for everyone involved in the project.

Conclusion

Enjoy Your Role as a Designer

We aren’t suggesting this is the way everyone should work, rather it comes from our experience of the industry.

Design is very subjective and if you can streamline a process there will be less pixel pushing and painting by numbers as dictated by a client. The more control you have over a design the more you will feel inspired to better each project.

And remember, learning to say no at the right time can save you and your company time, effort and a lot of pain. Said at the wrong time and it’ll bring you all of those and more. So consider your responses to changes the client asks, always give good reason and be clear as to why you think their idea might not work. Lastly, be prepared to take a step back; sometimes clients’ ideas can ignite a better one.

The post Take Control and Save Time When Designing for Clients appeared first on FHOKE.

Taking an exclusive look at the people behind the scenes this video is a great watch for all those that have been both surprised and in awe of the beautiful designs coming from the small team of designers at Google.

Once a brand that sometimes felt awkward and disjointed the new look Google is more consistent and comfortable to use, there is a sense of familiarity even jumping across platforms and service offerings that Google owns.

The linear, clean approach to design is certainly something a lot of brands and sites are starting to emulate. At one time everyone wanted an “Apple” look and feel. Not so now. That shine, those deep gradients are being replaced with flat, bold yet pastel colours with subtle gradients. Certainly a trend that will probably stand the test of time and something we’ll probably be hearing from clients in the months to come.

“I want a site and app that looks like Google’s”.

To read the full, in depth and interesting article take a trip over to The Verge.

The post How Larry Page is Redesigning Google appeared first on FHOKE.

We are always asked the question “where does your work come from?”, and honestly most of our work comes from word-of-mouth, there’s no selling involved, and we’re very fortunate to be in that position. We also get work from local search, social networking and referrals from sites that we’ve built – but more and more we find people coming to us because they’ve found us (or our work) through galleries showcasing web design.

Get Your Site Featured

We aim to get any site we launch featured in a number of galleries, it not only boosts the clients profile it boosts ours too and it’s great for new business as well. As you’ll probably know, we re-vamped our website before Christmas. We promoted it, submitted it to a number of well known galleries and it’s gone down better than we could of imagined. What we hadn’t envisaged was just how much new business it would bring.

Since the launch we’ve connected with people from across the globe and signed contracts with clients from New Zealand, America, Australia, Spain and closer to home. And it’s easy to see why, take The Best Designs for example; they rank highly for terms like ‘best web designs’ and ‘best design awards’. Getting featured on this gallery and others instantly generates 1000′s of click throughs. In one day alone we saw 887 referrals from The Best Designs and 3 weeks on we’re still attracting around 400 – 500 visits a day from that site alone.

Potential clients are getting more savvy then ever, they no longer just search locally on Google, they use the entire web as their shop window. Either through these gallery websites or through other social sites such as Facebook or Twitter. Only yesterday we had an enquirer who saw our work on Pinterest, and it’s great to say that we’ve signed off on a project with them too.

Get Your SEO In Order

Of course relying on these alone is not a long term sustainable solution. Good, solid SEO and writing practices help a lot. It’s never a perfect science, our two previous sites have only ever focused on local traffic. It’s worked well for us, to a point, but looking forward this strategy won’t take us to where we want to be. There is always time and room for improvement in this area of a site and over the next few months a big overhaul of our own SEO practices will kick in focusing on a broader demographic and range of search terms.

Stick To The Basics

Next time you’re sat at you’re desk with your head down powering through your work, remember, take time to think about where your work comes from. It’s never been more important than now to increase and maintain a global reach for your brand. By using all the available channels your chances of working with a wide variety of exciting clients from across the globe have never been greater. After that, the basics still stand – do a great job for a fair price and build relationships to encourage repeat business in order to stay in the game.

We’d love to hear how you find your work and how you sustain it so share your thoughts with us below.

The post Raising Your Online Profile appeared first on FHOKE.

Why Responsive?

Since the beginning of 2012 we’ve offered our clients sites that work across a wide range of devices and screen sizes so this was a must from the start. Sometimes we work from mobile to desktop resolutions but in this instance we went from the top down. Inevitably on smaller resolutions certain features and detail needed to give way to the information the site offers but we didn’t want to loose the aesthetics of the site so it was important we kept that in mind during the design phase. For example, the mobile contact page simply displays contact information and a form. Go check it out across resolutions on your mobile, tablet and desktop.

Updates

It’s been a while since we updated our work but we get a chance now to show off our work bigger and better than before. Check out some of our new case studies that we’ve not had the capacity to show before.

We’ve given the project planner more focus so the right questions are asked and we can offer a more complete service as a result.

Here’s To 2013

To those that had a hand in creating the site we look forward to working with you all again in 2013. Till then and to all our followers enjoy the Christmas break and see you next year.

The post Today We Unveil The New FHOKE.com appeared first on FHOKE.

We’ll be closed from Friday 21st at 3pm. Returning 8am Thursday 3rd January.

Of course we know not everyone stops so your project manager will always be on hand through email if there are any emergencies or requests that just can’t wait. But until then we wish everyone a Merry Christmas and New Year!

See you when we get back.

The post A Wonderful Year appeared first on FHOKE.

From now till the 11th of November we are offering three great offers to new and existing clients.

If your on the lookout for a NEW project or want to enhance your existing one we’ll give you an Amazon Kindle Fire* on any order worth more than £600.00 + VAT. Or spend over £5000 + VAT on a project and we’ll give you an Apple iPad 3**.

Recommend us to a friend, colleague or business and that comes in as a signed project worth over £600.00 + VAT they’ll not only get an Amazon Kindle Fire you’ll also get £25 Amazon Vouchers as a way of thanks.

Amazon Kindle Fire

With a Vibrant 7″ colour touchscreen for browsing, watching, playing, and reading the new Amazon Kindle Fire will be a hit at home and at work. With over 22 million movies, TV shows, songs, books, and magazines, plus tens of thousands of popular apps and games you’ll never want to put the Kindle down.

Take A Look

Apple iPad 3

The third-generation iPad is one of the best, if not the best, tablet on the market today. With the new retina display featuring a 2048×1536 resolution, and an astounding 3.1 million pixels, all within a 9.7-inch display your photos, emails, browsing, games and more have never looked better.

Take A Look

This offer is running till the 11th of November so email the team hello@fhoke.com or get in touch by calling the office on +44 (0)1264 782 711.

*The Amazon Kindle Fire at time of writing is £129 inclusive of VAT and will not be available until its release in the UK on 25th October 2012. We cannot guarantee that this product will be available immediately if there is high demand at launch. Delivery of your product may be delayed. This offer is only available on new projects not already on our books for direct clients (not sub-contracted work) in conjunction with the Amazon Kindle Fire model at £129 inclusive of VAT. You will not receive your Amazon Kindle Fire until the whole invoice has been paid and is cleared in our bank account. We offer no support for this product.

**The Apple iPad (3rd Generation) at time of writing is £399 inclusive of VAT in either black or white. This offer is only available on new projects not already on our books for direct clients (not sub-contracted work) in conjunction with the 16GB black or white model at £399 inclusive of VAT. You will not receive your Apple iPad (3rd Generation) until the whole invoice has been paid and is cleared in our bank account. We offer no support for this product.

The post Like Rewards or Offers? appeared first on FHOKE.