Category Archives: Web Design
User experience (UX) is a standout amongst the most vital parts of a site’s plan and structure. It decides how guests cooperate with the site, how they feel while utilizing it, and their general experience.
In the event that the experience is important and charming, you have done your occupation. If not, you have to change until you locate the sweet spot. Is client encounter that straightforward? Scarcely. How about we investigate a couple of more subtle elements.
As per the specialists, a stellar client encounter starts the second a man arrives on a site…
# The First Impression
As web designers, your craft is one of the most important on the web because businesses seeking to increase their profits and expand must have a well-designed, usable website. A company’s customers and clients will consider the website as the face of the brand and their first impression can either bring in more business or turn it away.
When a user lands on a website, they will formulate a first impression within the first few seconds. These few seconds can be worth thousands and millions of dollars to a business if they produce positive results.
Users will immediately scan the elements. If they do not see something that makes them feel connected to the site, they will leave. Every element must speak to a visitor, from colors, layout, headings, navigation and content.
Here are some of the questions users ask upon first glance of a website:
Can I trust this business?
Are they credible?
How reputable are they?
Are they experienced?
Are they professional?
Will they take my credit card information and run?
Are they an established business?
Can they meet my needs?
All of these questions occur in seconds as users scan each element looking for something that will give them a “yes” answer.
Why do users only give a website a few seconds to assess whether they want to stay or leave?
For one, reading a computer screen differs from a book or newspaper and it is much slower. Second, the internet is a rapid-moving industry with millions of websites vying for the user’s attention. Website visitors will arrive to your website rushed and impatient to start, and anything that causes them to wait will be a waste of time. Third, most people are stressed and approach internet surfing in a hectic state. The last thing they want to do is sift through an entire website to find out what a business does. If they don’t find the answers they need or feel a lack of trust, they will move on.
# The Experience
Creating a great user experience must involve knowing what will make your audience happy and coming back for more…
Once users connect with your website, they look for an experience. Businesses define a successful user experience in different ways. Some think about the goal of user experience as converting every visitor into a customer first and then forming a connection. Others consider connecting with the visitor first (target audience), and delivering the right content to elicit a response.
What are some of the main goals of UX design?
According to Jesse James Garret, author of the book, The Elements of User Experience, engagement is the main goal of UX design. He believes engagement is only achieved through the basic senses along with a body and mind connection.
What is engagement? We hear a lot about this term since it is touted as the driving force that leads to a great user experience. But if you talk to some UX designers, they will tell you engagement usually occurs as a result of a great user experience, not vice-versa. A designer’s job is to make the experience as pleasurable and easy as possible, thereby facilitating an easier path to engagement.
According to UX experts, here is what engagement isn’t. It is not simply the “technology” of an experience or the way a website “functions.” Some businesses fall into the trap of designing strictly from a left-brained perspective, disregarding how a user feels, thinks, acts or responds emotionally. A great user experience will result in a range of positive emotions and they will be meaningful experiences.
A positive, engaging experience will be one where the user is highly involved, which results in future visits and increased engagement over a period of time. Generally, a positive experience will compel a user to want to relive it once again.
# User Experience Tips
According to Upside Learning, from an adaptation of Susan Weinschenk’s article in UX Magazine, here are 9 UX design tips:
- It’s better to show people a little bit of information and let them choose if they want more details.
- Instead of just describing things, show an example.
- If something is clickable, make sure it looks like it is clickable.
- If a task is error-prone, break it up into smaller chunks.
- Don’t make people remember things. People can only remember 3-4 items at a time.
- People need feedback – The computer doesn’t need to tell the human. The human needs to know what is going on.
- If pages are cluttered, people can’t find information. Use grouping to help focus where the eye should look.
- Things that are close together are believed to “go” together.
- The hardest colors to look at together are red and blue.
# How can you measure a positive user experience?
Ultimately, the user will determine whether they are happy with their experience and unfortunately this is not always easy to measure. Why? Because you cannot get inside a user’s head to experience their emotions. And their opinions are subjective.
Imagine a user had a stressful day and they arrive to the computer mad and ready to bash anything they see. Their experience may not be pleasurable simply because NO experience would be pleasurable in their current state.
You can, however, ask them feedback hoping they will offer honest answers and opinions. Your goal is to assess whether the user felt the experience was satisfying, valuable, and easy, among other pleasurable emotions. Were they happy, burdened, impatient, pleased, etc.? You cannot quantify emotions, so according to many UX designers, user feedback is usually the best way to assess success.
Google published a document identifying how it measures the effectiveness of user experience for many of their products. They discuss what they call the H.E.A.R.T. approach.
Happiness – Happiness, according to Google, describes metrics that are measured based on a user’s attitude. They are subjective in nature and describe satisfaction, visual appeal, the likelihood to share or recommend a site and the ease of use. The best way to track these metrics is to survey users and chronicle the feedback as changes are made.
Engagement – Engagement, according to Google, is the measurement of the user’s involvement. Google measures engagement by assessing a user’s frequency or intensity, and metrics such as the number of visits a week or photo uploads per day. It is recommended to measure engagement per user, not as a total, for an increase in the total number could be the result of more users, not the individual actions of current users.
Adoption and Retention – These metrics identify not only the number of new users, but also how many users remain in a similar time period. How you identify adoption and retention will differ based on your unique user experience. These metrics are useful for new products or those that are in a re-design phase.
Task Success – Task success measures efficiency, effectiveness and error rate. Essentially, you are measuring how long it takes a user to complete a task, how much was completed, and the errors.
The entry of cell phones, iPads and touch screens has impacted web plan in the last couple of years.
We see a multiplication of new plans and methods that started from versatile application outline. This marvel has been alluded to as the “Appification” of web. In the only us, individuals invest more energy in applications than on a site.
In the most recent decade we have perceived how web plan has moved far from overwhelming content based sites to intuitive, picture rich, video sharing applications. These applications connect with the viewer more than electronic substance.
The notoriety impact of Pintrest, Instagram, Viddy and others has had a main part on site design. Indeed, even the more seasoned informal organizations, for example, Facebook have needed to upgrade their plans.
In app design, performance is a key factor in a medium that imposes significant challenges on designers. In order to perform well and be user-friendly, they have had to change or adjust many design elements.
Many changes in app design originated from the limitations and constraints that smartphones and tablets have in their platform. Now, even though web site layouts do not have these same limitations, the same pattern and approach has been followed.
Some factors, such as finger tapping instead of using a mouse and time and space limitations forced app designers make different decisions for how to use their space well. Lately these decisions have become a standard base for web and mobile design.
In this article I want to review some of the impacts that mobile and app design has had on websites.
Below, I separated the effects into some samples. However, you will find a combination of the factors named below in all or many of the given samples.
UI and UX supports the brand differentiation
In the past brand recognition was achieved only by presenting well-crafted content. Now, every app should “Wow” users in their first approach in design, along with prefect performance and error free interactivity.
That is why we see the attention to web esthetic and interaction plays an even greater role on web and mobile development than ever before.
Using bigger fonts and buttons
Applications use bigger fonts and buttons due to the touch-based interface they utilize. This trend has slowly expanded into website design over time. In the following samples you see this effect.
Using fewer features but keeping everything focused
On apps there are limited features, which has resulted in a streamlined and focused experience. Because of the inherent space limitations of the platform, app designers display only the most important information.
Currently in the web designing community, the minimalist use of elements is getting more popular.
Using hidden features and drop-downs
Mobile apps use hidden drop down menus under a tab or a button to hide information when it is not needed. Some examples are search refinements, product options and navigation. These functions are accessed by taping a button in a collapsible panel or pop up when a finger is swiped across them. We see that approach in websites too.
In the above sample, notice how horizontal tab options and drop downs (lunches, breakfasts, etc.) tuck all the information they want to present in the most concise and compact format.
For example in the “Tour of America” you will see all of the available options with images in the drop down without leaving the home page.
Using less Flash and more Java scripts, Html5 and CSS3 for animations
Steve Jobs’ decision to not support Flash on IOS had a far-reaching impact on the web and apps. We see how web designers have moved away from Flash-based design and have embraced more device-friendly formats such as HtML5 and CSS3. Even Adobe, the makers of Flash, recently introduced Adobe Edge to create animation using HTML5.
Excessive use of graphics (photo and illustration)
Open any app on a smart phone and compare the number of images to the text used. This approach is branching out into website design as well.
In the following samples note that most of the home pages are mainly images without much text.
Using a large photo as a background
This is a nice trend in new website designs that has its roots in mobile app design.
These large images are attention grabbing and guide users to the story or concept they are trying to portray.
Before the rise of applications, the icons used in websites were used in limited areas like email, phone, and contact information. After apps started using icons for the purpose of conveying the main message, we see how web site designers are getting an advantage out of using icons on the website for more subjects.
We see how sliding navigations are getting more popular on the web. Many websites prefer to mimic the iPad paging technique in their website rather than the same old scrolling or navigation bars.
One page website
The one page website is another byproduct of Appification.
Image based navigations
Instead of just text we see an image or icon representing the navigation bar.
Magazine style website
This style is not just for blogging or online magazines.
It has become more popular due to having access to many options (tabs, videos, and menus) in one location.
Call to action on the home page
A few years ago a call to action button in the middle of a homepage without any introduction would have been very odd.
Now this is very common. Without going to any other pages a company can invite viewers to download, fill out a form or provide their email address. This is due to the mobile users behavior patterns to make decisions quickly.
In last few years we have seen how website design has borrowed heavily from mobile interfaces, tablets and apps. As viewers rely more heavily on these experiences, what will trends be in the next few years? What other effects will we be expecting to see in web and mobile design?
Making and flaunting a portfolio is such a crucial part of a fashioner’s life, few individuals ever address its adequacy. Be that as it may, the truth of the matter is, there are better approaches to offer your administrations – and one of those courses is by utilizing contextual analyses.
Why? Since contextual investigations, not at all like portfolios, tell your customers what happens in the background. They demonstrate your specialized ability, as well as your identity and attributes – two components ostensibly more critical than your “gifts”.
Contextual analyses are additionally what I jump at the chance to call “under the radar” deals device – individuals don’t have their business hindrance up when perusing a contextual investigation. They expect these archives are educational in nature. However in the meantime, contextual investigations position you to be more than only a creator – they position you as a specialist.
But crafting an awesome case study that turns prospects into customers requires a little more work than a putting together a simple portfolio.
The good news, however, is that this article will teach you how to go from zero to case study hero in just 5 steps:
# Define Your Ideal Reader
If you want to produce a persuasive case study, start by defining who your target readers are. If you skip this step, any case study you produce will deliver much less impact than it could have – it simply wouldn’t resonate.
For example, a corporate executive won’t be much impressed if your case studies are about helping small businesses. They’ll assume you won’t be able to handle the complexity of a large project.
On the other hand, small business owners aren’t likely to convert if your case studies are about helping corporate clients. They’ll assume you’re too expensive to afford – or that you can’t manage a small budget.
If you have no idea who to target, here are a few suggestions on how to segment your readers:
- Corporate vs small business owners
- By country
- By expertise (Professionals such as design directors or Amateurs such as mommy bloggers)
- By industry
- By specific problem (generating web sales vs going viral, for example)
# Define the Problem
Once you’ve defined who will be your readers, you’ll begin to sift through your experience to find a suitable experience you can turn into a case study.
At this point in time, most people simply begin writing the case study. But there’s one more thing you should do before you jump straight in: define what the problem you really solved.
You see, what your client came to you for is rarely the real problem they want to solve. For example, they might ask you to design a “cutting-edge” WordPress site. Why did they want that? Perhaps it was because they hope to increase conversions and solidify their branding.
Why did they want to increase conversions and solidify their branding? Because they were being outbid in pay-per-click (PPC) advertising and Google is placing increasing importance on brand searches in search engine optimization (SEO).
So now the problem evolves from: “help client design a cutting-edge website” to “help client increase PPC profitability and boost SEO results through better design”. The latter being a benefit-driven headline you can use for your case study.
To take it up another notch (and you should always do this), is to define the problem in numbers.
For example, “their PPC landing page was converting at 2.37% but it dropped to 1.2% in 6 months ago – and according to their research, it was due to increasing competition. In 3 months after the new design went live, conversion rate went from 1.2% to 2.68%.”
Last but not least, make sure all numbers you cite have a context. If you said that your design achieved a 2.68% conversion rate – is that good or bad? How does it compare to the original number? How does it compare to the goal?
# Tell Your Approach
Once you’ve defined the problem, now it’s time to reveal everything that went on behind the scenes. Some designers are reluctant to do this because they are afraid people will “steal” their best ideas.
What those designers didn’t think about is that educating others positions you as an authority. Plus, the fact that your potential clients know what goes on in your mind doesn’t mean they’ll spend the weeks you did to pull off the project successfully.
In telling your approach, make sure you include things like:
- How did you approach the problem? Do you have model you use (eg: AIDA)?
- What unexpected roadblocks did you face? Did the CEO budge his head in? Did the problem evolve as you point out certain details the client missed? Were there any team members who were difficult to work with?
- Did the cost of the project blow out of budget? What did you do to handle it?
- How did you coordinate with the team as an overseas freelancer working on such a complex project?
Be very specific about what you did to solve the problem. For example, “I designed a beautiful site” doesn’t mean anything to most businesses. Try, “I changed the colour of the call-to-action button to make it stand out from the rest of the page – and that resulted in a 15% increase in conversions”.
# What Was the Results
At the end of the day, this is what all prospective clients are interested in. What did you do for your past clients? In this section, make sure you:
- Quantify all claims. Don’t talk about how you changed the typography. How did that change translated to numbers?
- Do you have screenshots of analytics? If not, can you visualize the data to show the results?
- And what was the insight(s) your client gained from the experience they had with you? An insight is a fundamental shift in mindset that changed the direction your client pursues in the future. And how does that shift in mindset benefit them in numbers?
This is a great example of insights I once used, “Today, Client X made sure usability is always a priority in their site redesign. And assuming that increase in conversion rate remained for the next 6 months (conservative estimate), they would have made $50,000 more in revenue.”
Remember how we talked about all numbers need to have context? The crucial context you need to provide here is ROI (return on investment). In other words, how much better off did your client end up by hiring you?
# Call to Action
Now that the prospective client is all excited about your services, don’t leave them hanging. Give them a compelling reason to act now at the end of your case studies.
Here are a few examples I have seen in various industries:
- Offer a free consultation
- Stress your tight schedule
- Give your case study readers a discount or other freebies – and highlight the exclusivity
- Link to more case studies if you have any
To really take it up a notch, make sure that people who clicked on the link in the case studies go to a special landing page designed specifically for them. From there, get them to fill out a form so you can follow up with a phone call.
After working with more than a dozen freelancers over the past half-decade, I’ve found trying to convert a client online – especially for projects that cost thousands of dollars – is a futile attempt.
# More Tips and a Conclusion
If this will be your first time creating a case study, start with these basic tips.
- If you hate writing, get a decent freelance writer to do it for you. A short case study shouldn’t cost more than $200 (about 1500 words).
- Always let your past clients shine in the case study. Positioning them as a snoot will not help you win prospective clients – if anything, they’ll suspect you’ll do the same to them.
- Use lots of quotes from your clients. Interview them and use their exact words. And if you can get him/her to agree, feature a portrait of them. This increases the credibility of your case study (who knows you didn’t make it all up?)
- Always use compelling headline and sub-headlines. For example, don’t go with“The Problem”. Try “How Can Design Help PPC?”
- Break down your posts with multiple sub-headlines and make sure you keep your paragraphs short. This is crucial. Nothing turns readers away more effectively than large blocks of text.
- Try a different format. Video case studies are almost guaranteed to get more views than would a written one, but it will cost more in time and money – and it can’t be updated as easily.
So there, 5 steps and 6 basic tips to create compelling case studies that sell. It’s a lot of work, isn’t it?
But if you want to stand out from the crowd, you need to do what others won’t. And this is one of the best opportunities to do that.
Are you worried about people stealing your designs after you publish them on the web?
Web designers are faced with a “catch 22” situation. To attract new clients, they must showcase their work and put it on display on the internet. Yet, by doing so, they aremore vulnerable to thievery. The possibility of people taking their work and re-publishing it or using it for their own gain without giving the author attribution is a grim reality.
It’s all too easy for internet users to click and save a graphic and insert it into a blog or website without the creator even knowing it is happening.
Inspiration vs. Stealing
Have you ever been told your work “inspired” someone when you know they stole it?
There is a fine line between inspiration and stealing. On one hand, your design can inspire someone to create a completely unique piece. Yet, in other cases, a fellow web designer may borrow elements of your design and “change it up” into a different graphic. The offender may cite inspiration as the main reason and defend the fact that it is different from the original. Regardless of what the person says, you will know the truth.
This is a common occurrence with designers who are not skilled enough to complete a job. They swipe elements from existing designs hoping the client won’t notice.
You know this is stealing even though it can be misconstrued as inspiration.
With so many loopholes it is difficult to keep track of your designs and keep them protected.
Many people who re-post graphics are not aware of the illegal nature of their actions. People think that the internet and its images are available to anyone who wants them.
I have witnessed many people who run high-performing blogs take images from a random Google search and use them on their websites. Many were not even aware it was a legal issue.
In other cases, people will “steal” designs that don’t have any copyright information stated. They do not realize that an image is copyrighted material once it is published, regardless of the lack of statements surrounding it.
As a web/graphic designer, it can be disheartening and frustrating to see your work published without ever receiving the notoriety from it. Those images and designs are your babies and they deserve proper respect and attribution, not to mention stealing them is a direct violation of copyright law.
What do you do when you notice someone stealing your work?
Fighting copyright issues can turn into a huge mess. Thankfully, simple communication can thwart a potential battle, especially if the offender was unaware of copyright laws. However, in other more serious cases, designers will simply throw in the towel due to a lack of money and resources to fight.
Protect Your Work
Do you have a team of legal experts ready to prosecute people who steal your work? Unless you have the budget of Amazon.com, this is not a likely scenario. Most freelance web designers do not have thousands of dollars to spend on legal assistance should anyone steal their content, so they must devise ways to protect their work and prevent it from misuse.
There are many actions you can take to protect your work online. While not all will be 100% successful, they will definitely tip the scales in your favor.
Copyright disclaimers – Consider posting a notice of copyright or “all rights reserved” on your website where visitors can see it along with a statement describing the illegal nature of stealing your work. It may not stop every perpetrator, but it will notify those who are unaware of copyright laws about stealing content and also scare others into submission. It’s similar to posting an alarm sign in front of your house to deter thieves from entering. Even if you don’t have an actual alarm system, the thought of possibly getting caught is enough to deter them.
Watermarks – Watermarks are a good deterrent and can prevent people from stealing your images. Designers typically do not like changing the look of their designs with watermarks, but many feel they are the best deterrent to theft. Some resort to a small signature and website logo on the bottom of the design as well.
Copyscape – Use Copyscape to search for duplicate content online. I use the service regularly to assess whether my writers’ content is unique, and also to check the duplication of my personal content.
Take Charge With Licensing
When you post your creative work online, copyright laws help to prevent the copying of your work and control its distribution.
If an individual steals your design and uses it for an ad, it is a direct violation of copyright law. The action is also in question if the individual incorporates the copyrighted work to create a derivative without your permission.
Even though these actions are against the law, people continue to steal, and creative professionals find it taxing to run after thieves whenever they suspect foul play. So, instead of hiding their creative designs, they solve this problem by allowing the public to use their work under the terms they set forth. This is what we refer to as licensing.
Licensing makes your creative work available to the public so you can control its distribution. Licensing also deters copyright infringement and sends thieves off to steal other images not protected by a license.
As the copyright holder, you can control the use of your design work. Certain licenses allow widespread use as long as the person credits the author. Other licenses exert tighter controls on copying and derivative works.
Creative Commons is one of the most popular open source licenses for creative professionals. It offers three layers of licenses that anyone using the internet can understand.
When you use licenses to protect your work, you still own all the copyrights, but you allow people to use your work as you deem acceptable.
Attribution is the most lenient of the licenses. It allows others to use and distribute your work and create derivatives as long as they give you credit.
2. Attribution NonCommercial
Under this license, people can use and tweak your work and copy it only for non-commercial use provided they give you credit.
This license is similar to the open source software license in that any new work created from your original work must be licensed in the same manner. People who use or revamp your work for commercial purposes must credit you and all derivatives will carry the identical license. Wikipedia uses this license.
When you opt for the “no derivatives” license, you permit people to redistribute your work as long as they do not change it or modify it in any way. The graphics and images must remain unchanged and the publisher must give you credit.
This license is similar to the Attribution-ShareAlike; however; it prohibits the use of your work for commercial purposes.
For those web designers seeking the most restrictive license, this one is ideal for you. It prohibits the use of your work for commercial purposes. People can download and share your images if they credit you, but they cannot alter them.
The Licensing Decision
Before you decide which license to use, you must answer two questions…
1. Do you want to allow people to use your work for commercial purposes?
The definitions for commercial vs. non-commercial are still somewhat confusing. The technical term for “commercial” involves using images for the purpose of selling or to gain profit. Non-commercial refers to using images for personal use and not to gain profit.
The definition becomes ambiguous when a publisher wants to use an image for his blog that includes advertisements. Is the image used to draw in revenue? Some would say “yes” since it is part of the blog and the blog contains advertisements, which relates to commercial usage. Others would argue that the image isn’t directly involved in any for-profit activity and is therefore non-commercial usage. The jury is still out on this one and Creative Commons is actively taking surveys on the subject to further define the terms.
If you do not want your images used by companies seeking to gain profit from them, stick to the non-commercial licenses.
2. Do you want to allow people to create derivative works?
The United States Copyright Act defines “derivative work” as:
A “derivative work” is a work based upon one or more pre-existing works, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, art reproduction, abridgment, condensation, or any other form in which a work may be recast, transformed, or adapted. A work consisting of editorial revisions, annotations, elaborations, or other modifications which, as a whole, represent an original work of authorship, is a “derivative work”.
The derivative work is a piece created from the original. If you want to maintain your original graphic and keep the image unchanged as it is copied, choose the NoDerivs licenses.
Creative Commons has this helpful License Chooser which will also supply you with code to put on your website. Here are some tips you should know before licensing your work.
Mobile Patterns or Mobile Templates are, as the name clearly states, layouts to use for facilitating our work when outlining a site for convenient gadgets. As portable web plan implies increasingly these days, creators frequently have issues achieving due dates in light of a high workload.
In web outline we have network frameworks we expand on with a specific end goal to help us keep up a clean visual example, additionally to help us manufacture a website page speedier. Large portions of us even purchase WordPress subjects and modify them to our utilization. What’s more, it merits specifying that 10 years back HTML layouts were generally utilized as a part of the business.
Truly architects dependably hoped to facilitate their work and proceed onward to the following venture, thusly versatile examples are something the specialists begin to investigate increasingly.
Mobile patterns are structured, organized and well researched before going online. These patterns are suited for use when the designer understands how they work properly and the reason behind it. As WordPress themes, many of them come already designed and ready to use. This is, however, something I do not recommend you to do. You should always customize a pattern to your needs in order to better fit the audience you target. Design is not only a way of looking good anymore; it became so important that it often makes the difference between failure and success.
# Mobile Environment
It is very important not to forget you design for mobile devices and not for the web. There are so many things to keep track of. The screens are smaller than the ones of a computer, information needs to get across much faster, the font choice needs to be perfect and fit the small screen and it needs to load fast.
With so many things to keep in mind, it is surely not easy to design for mobile interfaces. And even if you will get a pattern from the internet, your task of customizing it for your needs will definitely take some time to finish.
Maybe the most important thing to remember is that while designing for different mobile platforms is done using the same concepts, the result is always going to be different because of the different screen sizes, mobile browsers and operating systems.
When designing for mobile it is important to keep in mind and consider the device or sets of devices you will provide for. Not even the best developers were able to deliver a Facebook app for both iOS and Android – as a matter of fact, they didn’t even try to, as they knew it is impossible – they designed two different onces. So although designing for mobile devices is based on similar concepts, the results will always be different and it is something you should expect when starting such a project.
# How To Use Patterns
In case you want to design your own template, there are some things you should consider.
- You shouldn’t go into mobile web design if you don’t plan on using a grid system. It is simply too messy for such a small device. As screen size is different from a device to another, the grid system will more or less help you keep everything organized and in place on all of them.
- Using classes in mobile design is a good practice. Because IDs can’t be used more than once, using classes is the only way you can apply the same style to different containers.
- You need to have a strategy and create some standards for your template. You will obviously have multiple pages (unless it is a single page site – which happens rarely) and all of them need to have the same style. Don’t think that if the screen size is small people will not notice these details.
- You need to make an important decision in the beginning and think if you go for tabs or buttons in the header. And this is just one small part. You need to take such important decisions for every small piece of your website.
# Know some history
If you want to be a complete designer, then you need to know something about design and technology history. This is the only way to predict the future and to know which things work today – and more important: why do they work.
A good example is the Palm IIIc – a very old Personal Digital Assistant which would still be a decent device if released today. It has wireless connection capabilities and integrated browser for internet surfing. Or remember the first MP3 phones released many years ago. They had almost no memory and uploading music onto them was quite difficult – not very different than the way iPhones sync music with iTunes many years later.
As mentioned earlier, many portable devices have similarities which not only need to be learned, but also need to be taken advantage of. In case you are a designer, it might be a good idea to stick your hands into your pockets and continue experimenting with other devices. Sticking to your favorite one will not make you a perfect cross-platform mobile designer.
If all your friends and relatives have an iPhone, then buy an Android device. You can always borrow, use and observe different behaviors on your father’s iPhone…
Knowing the advantages and disadvantages of many smartphones will turn you into a better designer by default. And another good part is that if you don’t always want to design, you can also work as a mobile design consultant.
By looking at general patterns in mobile design you will notice how they actually look quite the same. There are many similarities between different designs, only they are not easy to notice if you do not know how a website is built.
Trying as many new things as possible will help you develop a vast knowledge of how patterns work on different platforms, operating systems and devices.
Help your users
When coming on a new website for the first time, everything is unknown. You have no idea where and what to look at first. The same happens to your users, but the difference between you and them is that you can do something about it.
What I mean is that when you design a mobile user interface, using illustrations or general patterns in order to help them navigate will help you a lot. To be more specific, these things are doable through hierarchy and priority.
Making, overseeing, and running sites used to be a mess easier – yet unrefined. The past procedure would include having a programming and plan group meet up, toss a few thoughts around, set up the site together, measure the outcomes, and afterward apply changes and changes to the outline and format in light of what the guests needed or favored.
In any case, these days, more than only an “experimentation” strategy is required so as to think of a truly useful, engaging, and, in particular, effective site.
Initiate the Conversion: Catching Visitor’s Attention
Engaging text, hooks, and bright graphics just don’t cut it. There’s a whole lot more that contributes to the overall feel and look to a web site than just those elements, and it’s something that can either draw in or drive away a site visitor in mere seconds.
So if you’ve just got a small fraction of a minute to convince a visitor to check out your site, browse through your products or services, or read through your content, then it makes perfect sense to do what you can to make sure that you grab their attention (in a good way) and make them stay on your site. You can do just that by testing out various elements and combinations of your web site even before you go live, or even while you’ve already launched.
Site Testing: Split Testing versus Multivariate Testing
Manufacturing firms test out new products and potential new variations or formulations on a controlled group first before going for large-scale production to make sure that it’s what most of the public would want, so why not do the same for your web site?
There are two ways to conduct such tests for a website: A/B testing, which is commonly called “split” testing, and multivariate testing. A/B testing will try out different content for one section or element of the web page and determine which one was most preferred by the site visitors by evaluating which of the options was able to reel in the user, this is done by sending half the traffic to version A and half to version B and measuring the difference in conversion rate.
On the other hand, multivariate testing involves trying out various combinations of different content and elements on a single web page at a time to see which would be able to garner the most success. This method can be thought of as several A/B tests being performed simultaneously on a single page or multiple pages.
Both types of testing have their own specific advantages and benefits. Split testing is suitable for testing established sites or web pages that are already quite successful at the outset to introduce minor changes and updates in order to make the site even better. This type of testing is also preferred for simpler applications such as in email copies or newsletters, where fewer elements will be involved.
Split testing is also more suitable for sites with low traffic as it requires less conversion to take place to generate accurate results than multivariate testing. Multivariate tests are much more complicated in nature and will generally require more time than the A/B testing method. However, since they can make changes to multiple elements over multiple pages, it’s possible to learn more and make bigger advancements.
There are a lot of steps that go into the creation of a web site. There are also many tools that can be used to help ensure its success, such as Google’s Website Optimizer and other related applications that can point out which elements need to be changed and what sections are already acceptable.
With multivariate testing, you will be working at an accelerated learning curve. This means that you will be able to test out as many different combinations of various elements, modify the content based on user feedback, and test it out again.
Another benefit to using multivariate testing is breakthrough thinking. Using a testing method such as split testing only allows you to modify one element at a time, so it’s more likely that the changes or options to be tested will be thought out excessively and become a product of cautious thinking. Since you can test an unlimited amount of concepts and changes with multivariate testing, you can accommodate and welcome changes and breakthrough ideas that might help put your site at the top.
Multivariate Testing and the Taguchi Method
Multivariate testing is often conducted while the Taguchi Method is also applied. The Taguchi Method is used to reduce the amount of necessary traffic in order to come up with a meaningful market research study.
The method makes use of fractional factorial testing that is able to minimize and lower the number of variations needed in order to determine the values of variables. By applying this method, the number of pages that must be analyzed and tested is greatly reduced.
Multivariate Testing: Increasing Conversion Rates
Site visitors will stay longer on sites that are optimized with a design and layout that has been previously tried and tested. The longer that users stay and browse on a web page, the higher the probability that a purchase or sale will be made. This is the reason why ecommerce sites and online retailers spend a considerable amount of time working on finding the right balance between aesthetics, functionality, and design on their online store shelves.
Conversion rates don’t just mean sales or purchases; they can also translate to the amount of ads clicked that also translates to revenue for the site owner. Moreover, coming up with really good web pages will help build a larger following to the site in a shorter period of time, increasing the site’s reach, influence, and audience that will make it a more valuable domain in the process.
If you’ve not tried any form of conversion testing you’re missing a huge part of the formula for online sales, remember that visitors X conversion rate = sales so if you are only worried about driving traffic to your site you could be throwing away thousands of dollars or more in sales every month.
Numerous online journals are there in the web that showcase and records the best Photoshop Brush Sites to help the fashioners locate their required brush. Photoshop is extremely famous and generally acclaimed programming among web fashioners. With Photoshop apparatuses the imaginative expression gets new measurement. Much the same as conventional specialists there are numerous sorts of Photoshop brushes accessible to computerized craftsmen as well. A Photoshop brush apparatus is without a doubt an exceptionally valuable instrument as it helps the craftsman to make workmanship in only a couple clicks. The brush apparatus is entirely easy to use as well. You will simply need to squeeze “B” catch or select the device from the toolbox. A brush palette will come up on the screen and the architect can pick the sought brush.
With the Adobe Photoshop brushes, you can without much of a stretch get new one of a kind brushes as well. However there is no deficiency of Photoshop Brush Sites, originators once in a while locate their fancied brush.
The age of digital painting has arrived. Since the Renaissance period when Humanism developed, artists have tried to portray the best of human expression through sculptors and paintings. Now in this 21st Century when everything is ruled by machines, art form has also witnessed major changes. Computer, stylus and tablet have become the typical medium for digital artists just like a canvas. Today artists worldwide use Adobe Photoshop to express their ideas. Digital art form has truly revolutionized the whole idea of artistic expression. Digital art requires as much skill and effort as conventional methods. Digital artists are always looking to broaden their skills with new techniques and innovative ideas.
What we believe is that you should know about the latest and best Photoshop Brush Sites so that you need not wander in the web world wasting your precious time looking for the exact brush. You will get splendid set of Photoshop Brush tools to empower your digital art with beauty. You can easily get from the Photoshop Brush Sites, your desired brush tools that includes lens flares, light circles or natural lighting. Brushes include sparkles and shapes like Spanish moss. You have to download your required brush from any of the Photoshop Brush Sites and then use the ‘.abr” files from the brush palette to give new dimension to your digital art.
Best Photoshop Brush Sites
~ Photoshop Brushes
~ Free Photoshop
~ Brushes Download
~ Free Photoshop Brushes
~ Get Photoshop Brushes
Grid is a vital instrument for visual depiction. Generally individuals used to believe that framework is identified with designing and engineering, yet this is not valid. Today the visual planners utilize matrix broadly for site outline. It is an exceptionally well known device in present times.
Grid is about squares as well as extent. This is the most vital component of network hypothesis. Workmanship students of history are of the assessment that the renowned Dutch painter Piet Mondrian ought to be viewed as the Father of visual depiction since it was he who utilized networks as a part of the most complex way yet established. It is trusted that specialists have been very impacted by established matrix hypothesis for a huge number of years. The origination of isolating the parts of a subject can be followed back to days of scientific ideas created by Pythagoras and his adherents. They used to characterize numbers as proportions instead of single units. The supporters of Pythagoras trusted that numerical examples developed by Pythagoras more likely than not been divine as they happen so regularly in nature. They called this example as the Golden Ratio or Divine Proportion.
Using the Golden Ratio a line can be cut by dividing its length by 1.62. This wizardly number 1.62 is in reality 1.6180339 which is quite irrational and represented as symbol (Φ), Or “Phi”. Don’t worry, I am not going to discuss the details of this theory or explain it, for it’s too complicated and I myself am a bit weak in math. The most important matter is that all these will not make you a better designer, so it is better to leave the topic right here and move on with our discussion.
But here the question arises as how does this ratio help in graphic design? Well it is believed that compositions divided by lines that are proportionate according to theGolden Ratio has an aesthetic appeal. The Renaissance artists of 15th and 16thCenturies used divine proportion to create their paintings, architecture or sculptures. In the similar fashion the designers today use this ratio while developing posters, layouts and brochures. Designers are of the opinion that instead of relying simply on artistic ideas, divine proportion is more useful in giving logical guidelines for developing layouts which are not only attractive but has unique appeal.
The Rule of the Thirds
There is also a simplified version of the Golden Ratio. It is the Rule of the Thirds. Using this rule, a particular line cut by the Golden Ratio is being bisected into 2 sections, whereby one section is about twice the size of the second one. Thus it is a simpler way to apply divine proportion without the help of your calculator. Here the composition is divided into thirds.
For a simple and quick layout experiment of the idea, let us start by drawing some simple rule of thirds grid with pencil and paper. Draw a rectangle, and then divide it into two-thirds both vertically and horizontally. Now draw a line every vertical line to make 6 columns to work. Now having done, we have six grids in front of us to start off with our composition. The big main rectangle here represents the container, which has been described in the section-“Web Page Anatomy”. Using this particular method of layout design, let us place the largest block first. This largest block will represent the content. Then according to my first rule -of –the- thirds grid, let me keep the content block within the two-thirds of the layout at the bottom right, then I keep my navigation block in the middle third block from the left side column. Next I keep the text portion of the identity block across the left side of the content, while the image portions of the identity across the menu. Ultimately, I put the copyright block below the content that is the right sided column of the grid.
The 960 Grid System
The 960 Grid System developed by Nathan Smith has been one of my desired tools for laying out website components. The templates and the sketch sheets are simply wonderful. This 960 Grid System is mainly a CSS framework that has been developed after being highly inspired by articles published by famous web designers Mark Boulton and Khoi Vinh. The widths of the templates have been inspired by the words of Cameron Moll. Speculating as what width would be the best to fit within 1,024px wide displays, Cameron Moll decided it to be 960px and mentioned that the number was divisible by 3, 4, 5, 6, 8, 10, 15 and 16 – which makes it a perfect width for grids. Nathan Smith mixed this notion into a framework and thus developed three layout foundations:
1) 12 columns
2) 16 columns and
3) 24 columns
I however like to use the 12 column layout as it helps me to easily divide my content into quarters in four columns; thirds by spanning three while halves by spanning six.
You have the option to use different arrangements for your own layout work. Use the columns of the chosen grid as alignment guides for the identity, content, navigation and footer blocks. You may wish to keep all your elements in one or two blocks, but I will advise you to avoid it as this will not look good. Rather try to keep some elements in another column or off from the grid altogether. Many designers opine that in using grids the composition somewhat looks boxed and unattractive. The red columns that you find are from the 16 column (960 Grid System) template but it doesn’t exist in the real website. The columns are invisible in the real website so there is probably little chance to realize that it has been created using a grid.
amous graphic designer and author of Grid Systems in Graphic Design, Josef Muller Brockmann says,” The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
It has been proved that human mind responds well to structure, grids and ideal proportion and love to use them in different creative medium. Often it is seen that layouts that is looking unattractive or “doesn’t look quite right” can be easily fixed by resizing or moving a few elements here and there on the grid.
An exceptionally instinctual part of a plan is its shading and it assumes a noteworthy part in invigorating a man’s response or state of mind which may change from individual to person. Now and again, the reason might be a result of social foundation of an individual or even might be a result of individual thinking.
Contemplating the shading hypothesis is an insignificant science where we figure out how hues impact individuals candidly as a gathering or separately and there are additionally individuals who have encircled their professions in view of this hypothesis.
# Primary Color – Red
The red color has various alliances in the western countries. For instance, the red color is considered as lucky color and is associated with happiness and good fortune. In the eastern countries, this color is used in the weddings for the dress of the brides. At the same time, the red color is a symbol of morning in the South Africa and is also affiliated with communism. In the African continent, because of the RED campaign, this color is attached with the awareness of AIDS.
The red color could be a powerful accent in any design and when utilized too much in the designs or in fabrics, it could look dominating or conquering. When this color is used in any design, it conveys a sensual power or a feeling. Red is a very flexible color; it projects charmness and power when used with darker shades of designs and looks aggressive when used with brighter shaded designs.
# Secondary Color – Orange
Orange color looks very energetic and dynamic and mostly it is affiliated with autumn seasons and also with the Earth. Since this color is associated with seasons that change, the orange color is usually denoted with movement and change in life. It is also associated with the fruit orange and because of which, the color can also be termed for energy and health.
When we apply this color to the designs, it is not as dominating as the red color but it definitely commands attention of others. Because of these reasons, the orange color is very appealing and friendly.
# Primary Color – Yellow
Generally, the Yellow color is known as the most vitalizing and the brightest among the other warm colors since it is attached to sunshine and cheerfulness. At the same time, this color is also connected with cunningness and timidity (it is like calling a coward as yellow).
In most of the countries, we would have come across people tying yellow color ribbons when any other of their family members are at war and because of which it is also attached to hope. Sometimes, this color is also connected with danger signs though not mostly like red colors. This color has different implications depending on the countries. This color stands for mourning in Egypt while denotes bravery in Japan and at the same time, the Yellow color is connected with merchants or businessmen.
When this color is used in designs, it represents bills or cheerfulness and unlike pink or blue colors, the soft yellow is used for babies and children as a gender neutral color. When compared with brighter yellow designs, the light yellows denote peace and calmness. Usually, the golden colored yellows and their darker shades could represent antiques and is very much liked to be used in designs.
# Cool Colors
Purple, blue and green are all called as the cool colors and are generally suppressed than the warm colors. They are connected with relaxation, serenity and conserved and because of which they are associated with nature, water and night.
Among the cool colors, the Blue color is the primary one because the other colors are attained by combining with this color only. For example – (combined with yellow gets green and combined with red color for purple). Most of the characteristics of the yellow color are taken by the green color and in the same way; the purple color takes the characteristics of the red color. When these cool colors are used in the designs, it denotes professionalism or calmness.
# Primary Color – Blue
The implications of the blue color largely depend on the degree of its shade and complexion. The design is distinguished on the shade or the type of blue color you choose. The bright colors in designs denote refreshment and energy while light blue colors denote calmness and relaxation. The dark blue colors in designs are very apt for company sites or in the sites that largely needs dependability and strength.
# Secondary Color – Purple
The Purple color is always connected with supremacy or royalty. This color is attained when we combine the blue and red colors and thus it has the characteristics of both the colors. In general, purple stands for fantasy and creativeness while this color is associated with mourning in the country of Thailand. Generally, light purples are very soft and stand for romance and spring while dark purples are connected with prosperity and aristocracy. When this color is used in designs, it gives a royal and a luxury effect.
# Secondary Color – Green
Green is an earthly color that denotes birth and development and also indicates prosperity and recurrence and at the same time, this color also stands for jealousness and hatred. Most of the characteristics of blue and some characteristics of yellow are also affiliated with the green color. When this color is applied in designs, it gives a harmonizing and an adapting effect and is also quite resistant. The green color would also be suitable for designs that are described to recurrence, prosperity, nature and perseverance. Olive green colors stands for the universal while the brighter greens are vitalizing and energetic. The darker greens are associated with stability and wealth.
The neutral colors are mainly used as backgrounds in designs and are usually mixed with bright accent colors. They can still be used separately and helps in making cultured layouts. When compared to the cool or the warm colors, the neutral colors are largely disturbed by the surrounding colors.
One of the strongest colors of the neutrals is the Black color which has a positive effect in it such as charmness, conventionality and power. It also has negative effects like it is connected with death, evil spirits, and mysteries. In most of the Western countries, this color is associated with mourning and in certain traditions; it is connected with revolt and mystery.
This color is well suited for elegant as well as edgy designs. Depending on the combination of the colors with black, it could be conventional at times and sometimes can also be unconventional or contemporary. Due to its neutral power, the black color is commonly used for typography and various other occupational elements. Usually, this color stands for mystery and culture.
In the sequence of colors, the white is at the complete edge of the spectrum and just like the black color, it goes well with any color. Usually, this color stands for pureness, virginity and integrity. The white color is commonly used in weddings that take place in Western countries. This color is also connected with the hospitals or healthcare industries and is mostly used by nurses, physicians and dental doctors. This color represents kindness or graciousness and because of which mostly angels appear in white colored clothes.
When the white color is used in designs, it combines with any other neutral background to reflect a sound effect. This color is mostly used in minimalist designs since it portrays chastity and cleanliness. At times, this color represents the summer or the winter seasons.
The gray color appears at the sensational end of the spectrum colors and could depict a moody feeling. In certain designs, the light gray color could be used as an alternative for white and in the place of black; the dark gray color could be used.
Mostly this color could be very conventional and rigid and could be described as a mourning sign but in certain cases, this color can be very stylish. When you need proficiency or formalities, the gray color is widely used because of its sophistication. Most of the gray shades have black color mixed to it and in certain grays; brown or blue shades are used. Backgrounds using gray color are quite common in occupational elements just like gray typography.
This color is mainly used as background in designs and can be depicted in stone textures or in wood textures. When the color is used in designs, it gives a benevolent and a warmth feeling. Sometimes in Typography or in backgrounds for designs, the dark shades of brown color are used as an alternative for black.
# Beige and Tan
In the entire colors of spectrum, beige is one of the most unique colors due to its warm and cool shades. Depending on the colors surrounding the Beige, it changes the mood. It has the coolness of the white color and at the same time has the dullness of the brown color. In most situations, beige is a conventional color and thus mainly used for background designs. Beige also represents devotion.
Backgrounds that have paper textures usually use the Beige color. This color usually takes the attributes of the color surrounding it which affects the entire design.
# Cream and Ivory
Both these colors are blended mostly giving coolness from the white color and warmth from the brown color and mostly represent calmness and stimulate a sensation of history. Since it is connected with the white color, it depicts quietness and pureness.
When cream and ivory colors used in designs, it represents a feeling of calmness and elegancy. It gives an earthy quality when associated with brown or peach color. In most cases, both these colors are used for lightening the darker shades of colors.
# In short
With the above information, you may have felt that the details given about the color theory have been very conquering but it is very true that the shades of any color stimulate a person’s feelings. Take a look at the common characteristics of the below mentioned colors:
- Red: Emotional, Love and Enmity
- Orange: Vigor, Cheerfulness and Liveliness
- Yellow: Confidence, Cunningness and Contentment
- Green: Growth, Nature and Prosperity
- Blue: Liability, Quietness and Depression
- Purple: Imaginative, Prosperity and Royalty
- Black: Bad or Evil, Occult and Gracefulness
- Gray: Conventional, Rigid and Moody
- White: Clean, Purity and Integrity
- Brown: Reliable, Simplicity and Natural
- Beige and Tan: Dullness, Conventional and Religious
- Cream and Ivory: Calmness, Purity and Elegance
Web journals have expanded in ubiquity of late and these days there are many people that choose to put their considerations online so blogging is basically the least demanding approach to do it.
Despite the fact that online journals are thought to be less demanding in taking care of, implying that you don’t generally need to be an engineer or a web creator to begin a blog; you will in any case need to take after a few gauges that will help you send the right message. There are a few tips I will impart to you on picking the right outline components for your blog, as blogging is one of my leisure activities also.
# Custom Header and Footer
These are really important for the design of your blog if you want it to be different from all the other blogs out there. Choose a theme you think would be appropriate for the subject of your blog. There are tons of different themes on the Internet, some of them are for free, while you would have to pay for others (this is a good option because it is less possible that you would find a design like that on many other blogs). However if you really want to stand out, then you would have to design your own header and this is probably the best option so far considering the fact that you are opting for a low cost version.
You can opt for graphics, different neat fonts, your logo or a tagline in your header to make it more customized.
Having your blog being user-friendly is really important, meaning you will have to meet the expectations of your future visitors and make them feel comfortable while browsing your blog. For example try to limit the categories on your blog to a maximum of 10. The bigger the number of categories, the bigger the chance that your visitor might get easily confused and forget what he’s searching for in the first place.
And since I mentioned the fact that visitors come on your blog to search for something they might be interested in, then you should definitely include a search bar. It is a really comfortable way to search for content using different keywords… but you probably already know that, right? This is just another important element that you should include in the design of your blog and you should not ignore it. You can include the search bar in the header on the sidebar of your blog.
Let users know about your activity by including an RSS feed and the possibility for e-mail subscription. This way you build a readership for your blog and the visitors might be eager to follow you. Try to make it visible and easy to find by including a cute button in the sidebar, the header, footer or in each individual post.
Social networks are huge nowadays, and this is exactly why you should include them on your blog as well. This is a way to share your content with people from all over the world and then let them share your content and let other people know about it and the chain goes on and on. It feels much more comfortable when you can share some photos or content you liked on your Facebook page for instance. This is why I strongly recommend including social sharing icons in your blog, as they will end up being pretty useful.
Don’t forget that your visitors might have something to say about your content or your blog so you have to give them the right to talk. Hence including the option to leave comments on your blog is really important.
You should also make it comfortable for the user to choose either he wants to leave a comment as a guest, by signing-in or by logging into his social networking account.
# The “About Me” Page
Having an “About the Author” page is a great way to build stronger relationships with your readers. Let people know more information about the writer, because they are interested. Let them know your e-mail so that they can ask you questions or send you different collaboration proposals.
# White Space to Improve Readability
Content is probably the most important thing on a blog, hence you should focus on delivering high-quality content in the first place, a search option in the second place and archives. This way your visitors will have the possibility to scroll through your older posts and you just can’t take that away from them. Give your content some assistance by placing archives on your blog and you will see how much more pleased your readers will be.
# Turn off the music
Now I know that this probably has nothing to do with the design of a blog, but when I go to pages with music on them that is playing by default I go crazy trying to search how to turn it off faster. This is a cute option and it is hard for music fans to let it go, but it might get really annoying. If you do want to share your favorite music, there are different plug-ins for blogs that you can set to play music if the user wants it. This way you are not forcing an annoying feature on your visitors, but you share your interests with those who are interested at the same time. There, problem solved!