Design

Weekly News Roundup – 25 January 2013

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at Responsive Web Design, Twitter Bootstrap, what comes first the idea or the design, as well as taking a trip down memory lane with the history of Apple.com

Creative Techniques for Single-Page Websites

Over the past few years there has been an emergence of new custom trends in website design. A very popular idea is placing all your major content onto a single page and using dynamic scrolling animations to locate bits of content. These single-page layouts are popular among landing pages and mobile apps which only need to display a small section of related information. In this article I would like to go over some interesting techniques you’ll find in single page websites.

fk-agency-website-dark-sliding-jquery

Quick Prototyping: Collection of Free HTML/CSS/JS UI Kits

The main idea of HTML/CSS/JS UI kits is to offer you a range of production-ready web elements with a consistent style, so that you quickly kick-start any new web project. Typically standard UI packs will include buttons of different sizes and types, form field elements, navigation & pagination systems, tabs, alerts and tags

 

webui_04

 

21 Fresh Examples of Responsive Web Design

Responsive design is something a lot of designers talk about. And considering the importance of responsiveness and all the buzz around it, it’s impressive the amount of websites that are still not responsive. By now, with the amazing growth of mobile usage, every single website should be responsive to be able to attend to every user’s “screen size needs.�

 

responsivedesigns05

 

Getting Started with Twitter Bootstrap

Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find difficulties in the process. Fortunately, a few Twitter developers and designers are aware of this situation and had launched a framework called Bootstrap to make life easier for web designers and developers.

 

twitter-bootstrap

Which Comes First: Web Site Design Or Content?

When you work on putting together your web site is it best to start with content or design? It’s a bit of a chicken or the egg conundrum. You really should not work on one entirely before the second. Here are two scenarios we’ve worked around and let me say, they are not ideal. 1. Working the design around a finished content document There have a been a couple of cases where a client hands me a finished Word doc to start a web site with and announces grandly: “I’ve got the content nearly finished for you.� On the one hand, it’s great that they’ve been thinking about the content of their web site.

 

6253_NpAdvHover

 

7 Newly Released Frameworks for Developers

A framework is basically software application which assists developers to quickly design and develop dynamic websites. With the advent of HTML5 and CSS3, development becomes easy for everyone. Here at SkyTechGeek we conducted a search and collected 7 newly released frameworks which will assist our audience to design and develop beautiful cross browser dynamic websites, and applications.

 

maxmertkit1

 

Flat design vs. skeuomorphism

It seems that there has been a line drawn in the sand. A few brave design pioneers have all but denounced skeuomorphic design as yesterday’s news and have voted it off of the proverbial island. Are we witnessing the turning point of design as we know it, or are these champions simply jumping an imaginary bandwagon? Let’s take a closer look at the two biggest styles in 2013…

 

featured29@wdd2x

 

 

15 Years Of Apple Website History

After Tim Cook addressed The Wall Street Journal’s bad reporting on Apple’s cut on component orders for the iPhone 5, the quarterly numbers for 2013 were announced. As everyone expected, they were mind bogglingly good. As we have reported here on Bit Rebels before, Apple is in no way struggling to make profit off of their own ingenuity. But how is it that they continue their success year after year? Maybe the answer can be found in Apple’s website history.

 

apple-15-year-website-history

 

20 Excellent jQuery Sliders for your Website

Making a website that is aesthetically pleasing is a process. It’s not generally going to happen overnight and it certainly won’t happen without a little intuition. It also requires the usage of a lot of different technologies to make the website look its very best.

120

30+ Creative and Inspiring Web Design Portfolio Websites

Many talented web designers like to show off their skills online and web design portfolio websites have become very popular. This is also a strong trend other creative niches and many graphic designers and photographers have creative portfolios as well.

Forefathers-Group_thumb

The post Weekly News Roundup – 25 January 2013 appeared first on Design Reviver.


6 Color Mistakes Made By Web Designers

Screen Shot 2013-01-23 at 1.16.26 PM

For designers color is perhaps one of the most important aspects of web design, some might find it a bit intimidating, some might simply go over the top with color while others just use a horrible mishmash of color that makes no sense. Check out this article for five of the most common mistakes web designers make when it comes to color choice.

Using Colors that don’t Enhance the Overall Message

When choosing a color scheme for a design, there are several questions that should be asked: What does this brand represent? What is the over all theme of this site? What is the target audience? Answers to these questions can help a designer choose colors that not only look good, but enhance the brand and make it easier for visitors to identify with the overall message.

Using Colors that are “Trendy”

I am a strong believer in looking at other designs for inspiration, but this shouldn’t be a primary method for choosing colors. If you frequent enough design galleries, you will definitely notice color trends. At the beginning of this decade, you may remember that it was difficult to find a site that wasn’t using blue and white. Then shortly after, we experienced the “web 2.0″ color palette. Be original with your color selection. Instead of extending the life of a trend, try to set the next one.

Forgetting that People Actually Need to Read the Text

Sometimes web designers can get so caught up in trying to make a site look cool, that they forget content is king. When designing for text, keep in mind that contrast is key. You don’t always have to use black text on white, but keep the contrast high and avoid using colored text on a colored background. Remember if visitors can’t even read your text then how are they supposed to understand your message.

Having a Crutch Color

Yes, choosing a good color scheme is tough, but when you hit that designer’s block, fight the urge to pull out “ole faithful”, that color that you used on your last three designs. Sure, it looks great, but chances are it doesn’t work for every product, service, or company. So, in order to avoid temptation, it may be a good idea to remove this color from your design repertoire all together.

Using too Many Different Colors

Yes color is a good idea, however too many colors will not make a website better. If a designer goes way overboard with color, this can cause a sensory overload, and the visitors are more unlikely to never return. Honestly there is no reason why you should use more than three to four, this is not only more oversee able, but it also shows that you have just some idea of where you are going with the design.

Targeting the Wrong Audience

One of the most important things to remember when designing is your target audience, if you are creating a website selling children’s toys then your color scheme should fit that, bold primary colors would be important for this project, however if you are selling furniture for retirement homes then you should pick colors are more laid back.

The post 6 Color Mistakes Made By Web Designers appeared first on Design Reviver.


10 Tips to Remember When Designing For Email

When it comes to online marketing one of the most used forms is Email marketing. The purpose behind email marketing is often to get a message across, whether this be to promote an offer, serve targeted advertisements or initiate deals. Email marketing is a great way to improve your brand image as well as knowledge of your services.

Often many designers make simple mistakes when creating an email, provided here are 10 tips to create better email designs.

Plain Text Version

This is without a doubt one of the most important things to remember when designing an email, always create a TEXT version of the email. Not all email clients handle HTML too well, some may not render email messages crafted in HTML. Furthermore including a plain text version makes your email more readable on mobile devices.

email3

Keep everything within 500-700px wide

The width of the email should be 500-700px and centered. This is just as important as the tip above, if not even more important. There is nothing worse than receiving an email where you need to scroll from side to side in order to read the whole message. Why? Simply we are creatures of habit, we don’t take the time to read every word in a text we scan it. Since our eyes tend to focus on whats straight ahead of us, the stuff on the sides will get blacked out and ignored by our brains.

howwide

Allow Easy Unsubscribing

There is no if/but/maybe about this, it is absolutely essential that your readers can unsubscribe from your email, don’t try to be smart about this by hiding the unsubscribe mail in some obscure place within the email. Unsubscribing should be a painless process that virtually anyone viewing the email should be able to figure out. Remember if the recipient doesn’t want your email they are not going to read it anyways. You might be sending 1,000 emails, but if only 50 are being read then your system is not very effective.

unsubscribe-button1

 

Plan for no images

While you might have just downloaded the perfect image from Shutterstock, please remember that many email clients block images in messages unless the user decides to see them, pretty much that means that often your beautiful images will never get seen. Another problem is if your message is embedded in an image, then the same rule applies most readers will never see your message because your images are blocked.

khols_noimages

Test it on-the-go

Just like you would test a website before launching it you should really test an email before sending it out to your final audience, remember that not only should you test these on the most popular clients such as Yahoo, Gmail, Outlook and others but also test to see how it looks on a smartphone or mobile device, If you don’t own a device then grab a friend who has one ask them if you can test your mail on their device!

Email-providers

 

View in Browser

There should be no reason why you would not allow people to view your email as a Web page. Face it, there are just some people who prefer to look at things in a browser, furthermore not all email clients render HTML as you expected and therefore making it possible for your readers to view your mail in a browser makes everyone happy.

View-email-in-a-browser

Relevant Subject line

I cannot even begin to state the importance of this, if your subject line screams “I am spam from spam company don’t bother reading” well then guess what your reader isn’t going to read it, furthermore if your subject line is “READ ME I AM FULL OF BS” all in capital letters then they will also move on, or how about the “Make $1,000 in a jiffy!!!!!!!!!!” if nothing else then all the exclamation marks will deter anyone from reading this email, and besides spam filters will most likely mean your readers will never even see these emails.

email-subject-lines

Call To Action

So you have the best/newest/fastest something and you want to add a CTA, or Call To Action in your email, then make sure it is clear exactly what this action is, if you want your reader to do something then don’t just add a ‘click here’ button instead add something like “click here to…” tell them what will happen when they click here.

31_cta_buttons_psdchest

Don’t use video

Yes over the past few years there seems to be a video for everything, with sites such as YouTube getting more and more popular there should be no reason why you would include an actual video in your email. If your reader is using a slow internet connection then it will take them forever to load your email. Furthermore more and more email clients are filtering out emails with large file sizes, in other words if you add a video you run the risk of ending up in the Spam folder.

Movie Icon: Email

Make it clear who’s sending the message

Lets face it, if you don’t know the sender of an email you are more likely to just hit the delete button. Just like in real life people are suspicious of strangers and the same goes for email. In other words make sure your sender ID states exactly who you are, furthermore make sure your logo is visible at the top of your email.

Email Envelope on White background

The post 10 Tips to Remember When Designing For Email appeared first on Design Reviver.


Weekly News Roundup – 18 January 2013

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at how you can implement Responsive Web Design, four things media companies must do in 2013, different design elements to optimize your blog, as well as how you can make sure your animations are triggering at the right time.

The Next Step in the Evolution of Responsive Web Design: Responsivity Analysis

Beyond any question, responsive web design has become the standard for anybody who wants to make a strong presence on the internet. With the passage of time, rules, best practices, layout standards and guidelines have been commonly created, implemented and accepted by most web designers and developers.

responsivity_01

50 JavaScript Libraries for Charts and Graphs

How are you visualizing data in JavaScript? What is your favorite library for creating charts and graphs with JavaScript?

I have been a long time fan of jqPlot for its open source approach, simplicity, examples, and great features. It performs well, it is used by many corporations, and it is built on top of jQuery

4339699941_62011a1f3a

 

4 Things Media Companies Must Do … or Die

Adaptive design. It’s one of the big buzzwords in digital media right now, but what does it mean? Nick Davison, director of web development for ad firm Digitaria, has come up with the quickest explanation we’ve ever seen, not only for adaptive design, but for static, liquid and responsive designs as well. Best of all, it’s almost completely visual.

4ThingsMediaCompanies

Use These 5 Design Elements to Create the Optimum Blog User Experience

One of the main unacknowledged problems with today’s websites is that many just follow the favorite design of the month. When Flash was born, we got bombarded by Flash-based sites that took forever to load. When sliding banners came along, almost everybody wanted to have one too.

uprinting

21 Fresh Examples of Websites Using HTML5

After all the buzz involving the HTML5 CSS3 duo, it is nice to check how websites are using all the good practices you can get from HTML5. When the buzz around the subject started, we could see a lot of websites totally animated. Now, after all the benefits of HTML5 settled, we can see websites taking advantage of it to create smooth transitions, nice image sliders and subtle animations. It is interesting to see the evolution of practices in this matter and that is why today we gathered some examples of websites using HTML5. Enjoy!html06

25 Neat CSS3/Javascript Plugins and Coding Techniques That Will Boost Your Productivity

Using CSS3 and Javascript, you not only are able to do some awesome stuff but also to do it more efficient and faster. If you don’t know how to work with cascading style sheets or with JavaScript, then the best way to learning it is by looking at some examples, tutorials and coding techniques.

1.-css-jquery-technique

12 Extremely Useful And Powerful Free CSS Tools

Don’t Forget to participate in a contest where you can win the world’s biggest UI elements pack “Impressionist User Interface Elements Pack” for 3 winners (1 developer license and 2 personal license) to design your project more creatively.

csstools31

11 Useful CSS Code Snippets for Responsive Web Design

Mobile responsive web designs have become extremely popular in the last 2 years, and with a very good reason. As such it’s common to see more code snippets published on the blogosphere, Github repositories, Codepen docs and more.

responsive-design3

Getting animations to trigger at the right time

When we redeveloped our new website, we decided to use CSS3 animations to provide an impressive and interactive site experience. However, we struggled to time the animations to trigger at the right time.

Image2

50 Useful Tutorials To Learn PSD To HTML Conversion

Once again we have gathered a very useful and helpful collection of detailed tutorial for PSD to HTML conversion. Today, every designers, web developers or blogger should know how to convert PSD files to HTML code. This technique is very important for them because with this technique they can easily convert their designs into active blogs or websites. And also this technique makes their work easy and save their valuable time too.

psd-to-html-conversion-01

The post Weekly News Roundup – 18 January 2013 appeared first on Design Reviver.


Killing Contracts: An Interview With Andy Clarke


  

Editor’s Note: Andy Clarke is known for his design work, books, conference presentations and contributions to the design community. Over the last 14 years, he has designed for amazing clients, written two books, and has given over 50 conference presentations and hosted workshops and training events for Web professionals all over the world.

Andy Clarke
Image by Geri Coady.

Do you remember those “10 Useful Legal Documents for Designers?� Well, it turns out that you, designers who read Smashing Magazine, liked one in particular: a plain-language, straightforward “Contract of Works for Web Design,� which is based heavily on Andy Clarke’s “Contract Killer�. Since Mr. Wong published that template ten months ago, more than 1,600 designers have downloaded it on Docracy alone.

Why is this legal template so popular? Does it really work better than other contracts? Can it help you close that job faster and protect you from getting stiffed? Could it become an industry standard, like grid systems and agile development? Could it help designers save money on legal fees? Who better than Mr. Andy Clarke himself to answer these questions!

Question: Hi, Andy. Your company is called Stuff and Nonsense. That’s how many people would define contracts. Why do you think contracts are often unreadable and puzzling, and what brought you to write your own model from scratch?

Andy: Being at best obscure or at worst intentionally misleading is precisely how many people view contracts. That’s likely because the contracts we are so often asked to sign have been written in language that’s unfamiliar to most of us. You might think that contracts must be written this way, but they don’t. Contracts can be written in any style you like, in language that’s as formal or as informal as you are. Use your contract to set the tone for the relationship with your clients. Of course, you’ll need to cover all the issues, but there’s no reason you can’t do that while still being you.

I appreciate plain speaking, and I try to be as direct as possible in the way that I talk with my clients. Over the years that I’ve run Stuff and Nonsense, I’ve seen a lot of contracts, and none of them either had my “voice� or covered the specific aspects of Web design or development that are important to my work. I was frustrated with what I found, so I sat down one day to write my own contract, the “Contract Killer,� and published it for anyone to use.

That was, amazingly, four years ago, and although some of the details of that original Contract Killer have changed, the fundamental principles have stayed the same. That’s because many of the issues that designers and developers and our clients face have also stayed the same. Still, in the latest version, Contract Killer 3, I’ve made some changes to reflect what many of us are doing now, particularly in relation to responsive and mobile design.

Battle of forms.
Conflicting terms of standard form contracts often result in legal disputes. Image by Steve Snodgrass.

Question: How do clients react when you send them the Contract Killer? Do you ever have to fight the “battle of the forms�?

Andy: The original reaction to Contract Killer was astonishing, and over the last four years the feedback I’ve received from designers and developers has been overwhelmingly positive. I know of some people who say that the contract has helped them get work. Many use Contract Killer out of the box, while others include their own payment terms and copyright assignment. Some have added whole new clauses — for example, about termination. I feel very, very happy that so many people have found Contract Killer useful.

Reaction from my own clients has been overwhelmingly positive, too. No one has ever refused to sign it, and no one has asked for it to be replaced with another contract. In fact, the simple straightforward language has encouraged my clients to sign and return it faster than any other contract I’ve ever used. I guess that’s because being clear means there’s less need to check with a lawyer.

Question: You’ve been using this contracts for years now. Has it held up? Did you find some edge cases that exposed certain weaknesses? And, if so, how did you fix the problem?

Andy: I’ve used Contract Killer with every client for the last five years. Occasionally I’ve made changes to specific clauses — often around copyright assignment — when clients have requested that. But you know what? That’s OK. A contract is just another point for us to communicate — in this case, negotiate — with our clients. Changing a few words doesn’t matter much. How we handle changing those words matters a lot.

I’m now much more explicit about the fact that browser testing is about ensuring that a person’s experience of a design should be appropriate to the capabilities of the browser or device they’re using and that websites will not look the same in browsers of different capabilities or on devices with different-sized screens. I’m also particular about the desktop and mobile browsers I test on, although I know this will vary between designers and developers.

Question: Do you have any tips on how to use a contract as a communication tool? For example, how do you handle a client who requests an overly broad license?

Andy: Many clients, too many in fact, know little about what’s expected or involved in a successful Web project. They may have had a poor prior experience, so even if they don’t come right out and say it, they’re looking to you to show them how it’s done. Your contract is a great place to start showing them how you do business. Handle this stage well, and your project will run much more smoothly. Let’s look at an example from Contract Killer 3, the copyright ownership clause:

We’ll own the unique combination of these elements that constitutes a complete design and we’ll license that you, exclusively and in perpetuity for this project only, unless we agree otherwise. We can provide a separate estimate for that.

It’s a fair clause that’s designed to prevent a client from using and reusing the work for other projects without agreement. This means that if you design an e-commerce store for them, they can’t launch a second site using the same design. This is a sticking point for many people, who wrongly expect that they will own the rights to everything they pay you to produce for them for any purpose.

When this happens, explain the good reasons why the clause exists and, if it’s appropriate, offer them a new price that includes complete ownership and that reflects its potential value to them in the future. Don’t be afraid to stick up for what you’re asking, and always, always remember, this is your contract that you’re asking them them to sign. Make it work for you.

Contract
Make your contract work for you. Image by Steve Snodgrass.

Question: In Contract Killer 3, you argue against fixed pricing, but you also promise flexibility. Can you explain how to negotiate a pricing scheme with a client who prefers fixed pricing or insists on a cap?

Andy: Fixed or project-based pricing has its roots firmly planted in the old-fashioned waterfall development process. But many people, including me, have moved to a more agile-based way of working. In an agile workflow, change is embraced, even encouraged. This means that fixed-price contracts quickly become irrelevant because if the requirements change, the price might change, too.

I organize my projects into week or two-week long sprints. Each sprint has a theme, a set of requirements that I’m going to finish during the period. It might be a sign-up process one week and a shopping cart the next. We’ll cover all the areas of a project across these sprints; and because the client knows the price in advance, he or she can budget. If a client has a great idea for something new or wants to change their mind, no problem. I roll up those requests into another sprint week, and the client can then make a business decision about spending money on those items.

Question: Have you ever faced a situation in which a client was asking for too many changes, one after another? How did you deal with that?

Andy: Several years ago I worked with an agency on a new site for a travel company. The agency had negotiated the price with its client, and I worked on a fixed price. Although the agency had drawn up the original brief and I followed that up with my own scoping meetings, things quickly went downhill as the client flip-flopped through ideas and change requests that were costly and complicated. I tolerated the situation as long as I could, but it became apparent I was making a loss on the project, and I withdrew.

This problem arose not because the client changed their minds — no, that shouldn’t ever be considered an issue; in fact, it should be encouraged — but because the agency and I were working to a fixed price. This left everybody with a bad taste in their mouth. Had we all worked in the agile way I just described, changes would never have been an issue, and it’s likely the project would have been a success, rather than a failure.

Question: What are the top three things a designer should keep in mind when preparing or reviewing a contract?

Andy: First, and possibly most importantly, you should ask your clients to sign a contract every time you work with them. It doesn’t matter whether they’re a first-timer or you’ve worked with them a dozen times: it’s vital that you agree on the scope and terms of the work. It took a while, and one or two unfortunate experiences, for me to learn that contracts are intended to set out what both parties should do.

Make the contract your own. It’s great that people like Contract Killer so much that they’ll use it out of the box, but your contract should be in your voice, not mine. Use the writing of a contract as an opportunity to put your personality into your paperwork. There’s no reason why a contract shouldn’t be funny and a joy to read. After all, you want someone to sign it.

Lastly, take the time to tailor a contract to a particular client and project, and make sure you’ve addressed everything you’re going to do for them. If you get a hint of any potential issue — for example, that they personally use an old browser or device — write about how you’ll handle that in your contract.

Stuff & Nonsense
Stuff & Nonsense – amazing design work for amazing people.

Question: Despite the saying, the client is not always right. How can you say that to them without being the a*shole?

Andy: No one, no matter who they are or what they think, is always right. (Well, except my wife. She’s always right about everything. Obviously.) One thing I’ve learned over the years is that clients love to feel involved in the design process. Sometimes, though, they make suggestions only so that they feel they have put their stamp on the project. There are simple ways that designers and developer can prevent this from happening. This is something I wrote about recently for Smashing Magazine:

  • Don’t email pictures of websites to your clients and then ask for their “thoughts.â€�
  • Don’t wait until after weeks of work to have a “big reveal.â€�
  • Set up the proper environment to receive structured feedback, and then ban all unstructured feedback you might receive by telephone or email.

Please remember: you are the designer. You are the person who has been hired to solve a problem that the client either can’t or doesn’t have the time to solve themselves. Your solution to that problem is worth a lot to their business, so never underestimate your role, skills and influence in the design process.

Question: I hear you are working on a “Killer NDA� (non-disclosure agreement). Sounds great.

Andy: Writing a Killer NDA has been on my mind for a while, as I’ve been asked to sign some horribly confusing examples over the years. I have no idea why NDAs have to be so complicated; after all, their intent is to make sure that everything that’s shared stays secret.

I’ve called this contract “Three Wise Monkeys� — see no evil, hear no evil, speak no evil. Three Wise Monkeys deals with just three things:

  • What’s confidential?
  • What can we say?
  • How long does the agreement last?

You can read it here. It’s licensed under Creative Commons 3.0, so if you want to personalize it, you can do so. It’s also on GitHub and Docracy.

Andy's Three Wise Monkeys contract.
Simple is good. Andy’s “Three Wise Monkeysâ€� contract deals with just three things. Image by Anderson Mancini.

Question: Last question: who are the “men with big dogs� referenced at the very end of your contracts?

Andy: I’m not afraid to say that on several occasions we’ve been forced to hire a debt collection agency to recover our money. On one occasion, we hired a debt collector from the client’s town, because we knew he would be ashamed if it became known locally that he was a bad payer. There’s no excuse for late or non-payment, and you should never be apologetic about wanting your money. Always remember, if you’ve done the work, you deserve to be paid. So, when all else fails, hire a professional. Preferably one with a big dog.

Have you used Contract Killer or a version of it? Share your experience in the comments!


© Veronica Picciafuoco for Smashing Magazine, 2013.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress