Design Killing Your Creativity

When we talk about web design in 2017, we’re really talking about responsive web design. In just over six years, the term ‘responsive’ has become an all pervasive industry standard.

Responsive web design is the process of designing a site, or a web app, so that its content adjusts appropriately according to the device it’s viewed on. A few years ago I saw an excellent conference talk by Ethan Marcotte—who coined the term ‘responsive web design’—in which he likened responsive sites to Utah’s Pando tree; a single organism with a connected root structure, that emerges from the ground in different places, different contexts, at different sizes, but all bearing the same base genetics.
It’s arguably the adoption of responsive design that has enabled the growth of the mobile web; without it the cost of developing a mobile site in parallel with a desktop version would have meant many companies sticking with the latter.

relationships designed for mobile are frequently transposed onto much larger viewports
But responsive design is not without its problems. By definition, responsive designs ‘respond’ to viewport size, not content. Container-based variations on CSS media queries have been mooted as a solution, but so far are just a post-it on someone’s whiteboard.
Design is broadly about relationships between elements, and those relationships are restricted on a small screen. Furthermore because our markup is semantically structured, relationships designed for mobile are frequently transposed onto much larger viewports.

One of the most commonly criticised UI decisions of the past year has been the increasing number of hamburger menus being used on desktop. However, little attention has been paid to mobile layouts—horizontal bands of content divided into a 12 column grid—being scaled up to desktop.
The question of whether responsive web design is killing creativity is probably unfair; it assumes that diversity and innovation are the lifeblood of a design process. It also lays blame on a concept, if there is blame to apportion, it surely lies with implementation. In fact, design often flourishes under the tightest of restrictions—I know a designer who adds his own constraints to client briefs, because he feels his work is stronger when he is challenged.
if there is blame to apportion, it surely lies with implementation

Responsive design works incredibly well with branding, but it’s less than ideal for layout. It may be that the best way to implement responsive design is to create distinct designs for different classes of viewport, and rely on responsive techniques only for similar screens. We may not know the exact dimensions of every screen, but we know a phone has to fit in a pocket, we know a notebook can’t be narrower than its keyboard.

Responsive design may simply be an idea that’s further ahead of its time that we realise, and once tools like CSS variables, and container-queries are implemented, design on the web will become diverse once again.

Should You Know When Planning A Website Redesign

Like any good investment, your website needs to be proactively managed. It’s not just about keeping the content up to date, but it is also about bringing the technology and design up to date to meet the needs of your business and your customers.
When is a website redesign needed? In general most companies redesign their website every 2 years, and rebuild their website every 5 years.

KEY DRIVERS FOR A WEBSITE REDESIGN:
The website looks old and dated
It doesn’t reflect the business direction
It looks terrible on mobile devices
It doesn’t convert any sales or leads
It is hard to navigate and find information quickly
It takes too long to load
It is not easy to update the content
It is not user friendly
Check your Google Analytics data for signs that your website needs help. If you have low repeat visits, high bounce rates and low average time of site – then something isn’t working. Check the technology data to see how your website is performing on different browsers and mobile types. It is also advisable to ask a professional to perform a website analysis and propose recommendations on how to make your website work better for you.

PROS OF WEBSITE REDESIGNS
A fresh design gives the impression that your business is dynamic and growing
You move with the times, and your website is attractive and easy to use on mobile devices
Your website works harder for you with new functionality such as social media integration, a blog, forums, e-commerce, contact forms and more
Your users are happier when they can find what they want quickly and easily
You save money, because you can easily maintain and update the website content yourself
Your website will be more search engine friendly
You can gain a competitive advantage over your competitors by captivating the online market

NEGATIVES OF WEBSITE REDESIGNS & HOW TO OVERCOME THEM
Regular users of your website will be see a different looking site, and may take a while to get used to it. To overcome this, it is important to consider the user experience in the design – what information do they need? What action do they need to take? Make it easy for people to find what they want in 3 clicks or less. You can also work with your designer to find a new design that is implemented over time so as not to confuse your users so much.

When you redesign a website, your website page URL’s will often change, and this will have an impact on your SEO power. To combat this, a SEO expert can inform the search engines where your old URLs have moved to, and minimise loss in ranking and traffic by preserving your highest performing pages. Make it easy for search engines to find your new pages by submitting a site map to the major search engines.

Website rebuilds will require resources such as time and money. It is important to factor in website maintenance and redesigns every 2 – 5 years and treat your website as a growing part of your business. To keep costs feasible, it’s important to choose the right developer that understands your business vision and has the skills and expertise to make the website redesign happen without unforeseen costs and delays.

Overall, keeping on top of how your website design is performing is an important part of making sure it meets your business goals online. There are powerful advantages to be gained in terms happier customers, better functionality, and a competitive advantage over your competitors. There are some major areas to look out for, but with proper planning and the right web design team in place, these negatives can be turned into positives.

More Information About User Empathy In Web Design

THE BASICS
So why is it important? ED is about understanding your users, as well as the problems they may face – not just their goals. To truly understand this, some good old-fashioned research must come into play.

Research your users’ underlying needs, what do they really want from you and your service? What do they really want from your website? What need does your product or service fill and does your website communicate this? Step into their shoes and see your site from their perspective as best as you can. Explore your users’ stories and personal experiences. What are the underlying themes or questions here? How can the design and experience of your website meet these?

USER EXPERIENCE + USER EMPATHY
Is your site designed to truly connect with your users? Is it providing the best user experience? If your users are feeling detached from your brand online, it’s likely that your website isn’t taking a user focused approach. Think about how you can implement user experience and the practise of user empathy (UX and UE).

Focus on your users’ needs, feelings, experiences, and the outcomes they expect from visiting your website. UX and UE aren’t just pop-psychology, they are being used globally, in large organisations, to solve real-world business and innovation challenges.

DESIGN, DECISION, PROCESS
User’s come first, this is the position you need to take when embarking on the design process. It’s good to keep this at the forefront of your mind when you’re discussing your requirements with your creative team – use your research to guide your decision-making processes.

Even a seemingly well-functioning site, can take advantage of an empathetic approach. It’s important to a) do your research about what your audience needs, and b) step into your potential clients’ shoes, ask the hard questions, look at the themes and messages underneath all the marketing

Let the user’s needs guide your decision-making processes.

USER EMPATHY: THEY KEY INFLUENCERS
Technologies that know no boundaries and speak to all audiences.

For example: people from different cultures, and situational constraints, age and ability. If you are communicating with a broad or even a specific audience you must be mindful of this and incorporate this into your website’s functionality.

User testing: through research and site testing, you can gain a true understanding of how people behave, feel, and solve problems using your website or app.

Ultimately, successful User Empathy in web design is about human-focused design where empathy is considered at the very top of the design process hierarchy.

Special Tips For Brand Building With Web Design

First of all, what is a brand? A brand is a symbol. Symbols are designs which represent something else, and a brand is meant to package all of the associations, experiences and characteristics into an abstract construct.
This construct can be evoked using consistent imagery, sounds, phrases and logos with which people come into contact.

Brands are very important as they help you win customers and they also help you to keep them.
They do this by awakening the associations and experiences you previously had with the brand, or have seen through advertising, when you come into contact with the brand at key stages. For example, when deciding what product to purchase out of a selection of similar items.
Here are 9 tips to help you to build a brand with web design.

Brands set expectations, and when faced with uncertainty people tend to pick the safer option. People know what to expect from a brand they know.
Branding is a complex process that is performed across all types of media, from product packaging, TV commercials and magazine ads to interior store decoration and logotype design. Of course branding also applies to web design.
It doesn’t matter if you’re building a website for a multi-million dollar brand or a personal blog, branding still matters for the reasons outlined above. In the case of a personal blog, branding will help set you apart and make your site memorable.

1. COLOR
The choice of a good color palette is very important in branding. Color isn’t just aesthetics — it stimulates various emotions and carries with it subconscious associations to various things and characteristics.
For example, the color red may actually increase blood pressure, pulse and respiration. It’s a color that symbolizes passion, energy, power and excitement. Because of this, it’s usually a good color choice for brands in the entertainment industry.
Other colors carry different associations and effects. Green symbolizes nature, environment, profit, money and health. It’s also a calming color, which is why hospitals usually paint their walls pale green.
When picking a color for your brand, research its effects and associations to see if it is an appropriate fit for the type of things your brand represents. Also note that different cultures may associate the same colors with different things, so it’s a good idea to check that your colors mean what you think they do in the markets you operate in.

2. CHARACTER
Does your brand have character? Infusing your brand with a little personality can help you define what it stands for.
Is the brand all about stability and safety so that your customers can be sure to rely on you? Is the brand fun and down to earth?
Many people in commercialized societies use products and brands to define themselves, so shape your brand’s character towards something which your audience will like to associate themselves with.
Anthropomorphism is the attribution of human qualities and characteristics to other things, like animals or objects. Infusing your brand with anthropomorphic elements is a good way to give it character.

Think about the icon for the “Finder” application on Mac OS X. It’s a blue square with a distinctive smiling face drawn with a few black lines.
The program it represents is a file browser, but by giving it human characteristics the designers give it a soul.
Another great example is the Outlaw Design blog which sticks to a strong Wild West theme throughout the design with a unique mix of wooden textures and flat illustrations, branding itself very effectively:
Outlaw Design Blog

3. EMOTION
Emotion is another factor to consider when building your brand. What feelings and emotions do you want people to experience when they visit your site? What sort of things do you want them to associate with your brand?
Crafting the aesthetics of your site shouldn’t be about following the latest design trends, it should be about deciding on the emotions and ideas that you want your brand to project, and then working on a design that will do just that.

4. CONSISTENCY
To build a successful brand you need to make it memorable. What do you do to make people remember things? You repeat them.
Consistency throughout your web design will build on the choices you’ve made earlier regarding selecting the right personality for the brand and evoking the appropriate emotions. Keep consistent colors, visuals and typography throughout to ensure your website projects a uniform image.

5. REUSING CODE AND VISUALS
Consistent visuals and layout allows you to reuse more of your content, be it stylesheets or images. This means that your site will load faster as the user’s browser doesn’t need to download as many things — old images and CSS are already stored in its cache.

6. SIZE AND POSITION OF THE LOGO
The accepted norm when positioning your site’s logo is to put it in the upper left area of the page.
That’s the area where most people will look at to see what site they’re on. Additionally, it’s best practice to link the logo image to the site’s home page. But position is only one element — size is also important. Ensure your logo is big enough to be the second or third thing that people will notice when they arrive on your site.

7. VALUE PROPOSITION
When a visitor arrives on your site for the first time they take the first few seconds to orient themselves. Is this the right site? Does this look interesting? What is this all about? To answer these questions you should provide a clear and concise value proposition to your visitor.
This value proposition should be a short statement in a prominent location on your page. It should preferably be located next to the site’s logo so that when a new visitor reads the title of the site or business they’ll follow on to the value proposition.
In a few words explain exactly what benefit your site provides to the visitor, so that they’ll know not only what your site is about, but why they should keep using it.
Rob Sartain’s Prime Cut Design has a great value proposition in the header of their site. It’s highly visible, concise, and clear; and it covers both, the ‘what’ and the ‘why’:
Prime Cut Design

8. TONE OF VOICE
The language you use on your website needs to reinforce your brand’s character and personality. If your brand is a friendly and down to earth, and your audience are young, tech savvy people, then informal and fun tone of voice may work well for you.
On the other hand, if you’re making a website for an investment bank, the tone of voice should reflect that by being much more formal.
It’s not just about what you say — it’s about how you say it. You can say the same thing in different voices and get the same meaning across, but the personality that this voice emanates will be different; so choose a tone of voice that suits your brand’s character and audience.
Matt, a simple web app that helps you use multiple Twitter accounts, features hand drawn illustrations and a friendly tone of voice, ideal for the young, tech savvy audience:
Matt

9. UNIQUENESS
Getting all of the above elements will only get you so far though, because there is another very important thing to consider when building your brand: uniqueness.
If your website looks just like the competition, then is it really memorable? How would potential customers differentiate between the two? By putting in that extra effort to create a unique image you’ll not only stand out from your competitors, you’ll be more memorable, and that means a better chance that your visitors will come back for more.

WordPress Recomendation For Web Designs

WordPress has truly grown to be a powerful software program suited to practically any website application – from brochure style websites to portfolio sites, ecommerce websites, news sites and professional business websites. WordPress is not just for small business and bloggers anymore – here are the industry heavy weights that use WordPress as the force behind their websites:

News websites – CNN, New York Observer, Times, Forbes
Fortune 500 companies – UPS, eBay, Sony
Technology – Samsung, TED Talks, Mashable, Tech Crunch
Entertainment – Katy Perry, Jay Z, Justin Bieber, People Magazine
Fashion – InStyle, Style Watch, Modelina
Shortie Designs has been designing and developing with WordPress since we opened our doors in 2009, and we are continually impressed with the power and flexibility of the WordPress platform. Every website is able to be customised to our client’s requirements and each design is beautifully unique so that no two websites are the same. As design professionals, we like to keep an eye out on what others are producing on WordPress. Below are our top picks of WordPress website designs that are inspiring us right now.

ECOMMERCE WORDPRESS WEBSITE
Ca c’est Gang is a eCommerce website for a French street wear fashion brand. The minimalist design really allows the products to be the heroes in the design (which makes great sense when you are selling products online!). The website design is very intuitive, and it is easy to navigate, even if you don’t speak French. It also has one of the best looking cart and checkout pages we have seen, which gives your visitors a great user experience and helps convert visitors to customers.

WORDPRESS WEB DESIGN FOR A PROFESSIONAL WEBSITE
This website for a US building company is big, bold and interactive. Although it is a professional website, the design is far from boring. In fact, we find this website very engaging. The full width design makes great use of space, and the interactive elements beckon us to click through deeper into the website. The hover over effects on the Projects page are also very cool, and each page has a big red call to action which directs visitors to contact Arc. http://www.arkdevelopment.com/projects/.

BLOG WEBSITE USING WORDPRESS
WordPress has always excelled as a blogging platform, but this blog website (http://www.loftenberg.com/) has taken blog sites to a whole new level with a magazine style layout which really capitalises on the saying “images speak louder than words”. It also integrates with Amazon affiliate marketing, so that the website and blog content can be monetised.

WORDPRESS WEB DESIGN – ARTIST WEBSITE
Less is more is the only way to describe this beautiful artist’s website – http://phillipbutah.com/. It gives you the sense that you are looking at the work in a gallery; it is fuss free, there is lots of white space, and the artwork speaks volumes. This style of website can really work across industries and especially well for architects websites, property websites, designer websites, and personal blog websites.

WORDPRESS WEB DESIGN – USER GENERATED CONTENT WEBSITE
Teespiration is a wordpress website with user generated content. The public is able to submit their favourite t-shirt designs, you can vote for your favourite designs, and when available, a link is provided to where the item can be purchased. The website is a visual smorgasbord for anyone who loves graffiti art and street wear, and also serves as a resource for designers, graphic artits, illustrators, and photographers – http://teespiration.co.uk/.

INTERIOR DESIGNERS WEBSITE USING WORDPRESS
http://www.gardenerandmarks.com.au/ is a WordPress powered website by a pair of interior decorators. The website design showcases their distinctive decorating aesthetic, which can be described as eclectic, vintage and cultivated. We love how much attention to detail has gone into the design of this website, the theme has been carried through every element including the font and content holders.

TOURISM WEBSITE DESIGNED WITH WORDPRESS
This feature packed website is a great showcase of how WordPress can be integrated with social media. It has a Flikr photo feed, embedded YouTube videos, a Facebook plugin, and links to their active Twitter page. We also like how the branding permeates the entire site design, so that even the Facebook plugin looks like it belongs – http://www.buinzoo.cl

USING WORDPRESS FOR LOCAL BUSINESS WEBSITE
Billy’s Downtown Diner is more than just a local business website. This example showcases the scalability of WordPress and how it can grow with a business. This local diner is promoting all its extended business activities including a radio segment, events, YouTube channel, a blog and a book. Check it out at http://www.billysdiner.com/.

PORTFOLIO WEBSITE WITH WORDPRESS
This Pinterest style homepage is a designers dream. It displays a constant feed of design inspiration/ blog posts/ portfolio like a giant pin board. Each item clicks through to a page with more detail, and the content is cleverly organised in tabs, and displayed like a beautiful brochure. The fluid grid layout is responsive which means that the website content re-organises itself to suit the screen size, and the website will look great no matter what device you are using to browse the internet – http://www.strack.nl/

USING WORDPRESS FOR INFOGRAPHIC WEBSITE
This website is designed in a Infographic style which means it displays content visually in graphs and diagrams. This type of design has been very popular with businesses that want to make information more easily digestible and sharable (and hence it is more likely to go viral). This design is great as either a campaign landing page, or a way to release survey results, statistics and research findings back to the public. http://www.thisafterthat.com/

WordPress Powered Website_Mike Kennedy
All in all, we are continually impressed with the power and flexibility of WordPress, and it will continue to be Shortie Design’s preferred platform for developing websites. Visit our portfolio page if you are interested in checking out some of our WordPress websites. Or, get in contact with us to discuss your website project.