There is no doubt that choosing the right colors for a design is a very important step of the creative process. We need to think about the message and the style we want to communicate, besides also thinking about the best combination to please our viewers eyes and to deliver a nice result. Today we gathered some good examples of color use in web design. From subtle colorful details to colorful background images or bold colorful type, there are different styles here to show you how to add color to your next project.
Archivo de la etiqueta: Authoring
A few days ago we came across a really outstanding Wix website for the Los Angeles based vaudeville circus/theater, Le Tigre Tent. One thing that really impressed us about their website was their use of an animated grid gallery in the homepage, which made the whole site look more alive, more fun and more in-your-face.
This is a feature not many Wix users are aware of, yet it is so easy to do. We wanted to show you how you can add a similar animated gallery to your website with a few simple steps. You can add this gallery to every page on your site, but on the homepage it creates a really powerful effect of wowing site visitors when they just enter the site.
For illustration purposes, we’re using the “Close Up HTML” template, but this works with all Wix HTML5 templates, of course!
Websites, like fashion, make personal statements. Choosing dark shades for a website design is a powerful statement about the purpose and the mood of the site. Contrary to popular associations, dark doesn’t mean gloomy or scary. Dark colors can create a mysterious atmosphere, a classy look or a minimalist cut that draws attention to the product or service. These beautiful HTML5 websites demonstrate that well. Have a look and see how these dark shades positively accentuate the topic of the website. With nothing against websites that have a bright color scheme – dark can be beautiful on its own right.
http://bit.ly/JqiFPt | by NEIL PATEL | quicksprout.com
Would you rather get 1,000,000 visitors from Google each month or 1,000? Your gut is probably telling you to go with 1,000,000, but the reality is you don’t have enough information to make an educated decision.
The keyword game isn’t just about traffic, it’s also about quality. You have to look at conversion rates to make an educated decision.
This means you have to look at larger goals and breakthrough keyword volume.
In my ten years in the business I’ve made creating high-converting keyword research plans a priority…let me share my 3-step plan with you:
Step #1: Keyword research for SEO
When you research for keywords on your own site, it’s a lot easier to do because you know the content inside out. It’s almost instinct.
But if you are working on a new site, then it is best that you do a lot of keyword research. This means starting with a list of keywords. If you don’t have a list, then work through as much content as you can.
As you do that, think about this…
- Think about any word or category you don’t understand – Drop these words into Google and see what kind of results come up.
- Do these results match what you are trying to accomplish – Or does it look like their competitor? As you will see when we get into the conversion part of keyword research, keywords that don’t convert waste time and visitors.
When you find non-converting keywords, search through and remove any other keywords that are similar. As you do this your list of categories will probably change as you start to understand your site’s content. But it’s always easier to start with too many categories, which you can reduce later.
Check the estimated search volumes and make sure they match what you expect.
While you may lean towards the more technically correct “SEO services,” you might find that more people are actually searching for SEO consultants, so you’ll want to work more references of “SEO consultants” into your copy.
And you are ready to use these 5 questions to maximize your keyword research. The following exercise is recommended by Jenny Halasz, and is a very helpful way to uncover keywords for clients efficiently and effectively…: Sigue leyendo →
One of the best sources of inspiration for artists and designers is nature. You can see lots of artwork inspired by nature, artists and designers use colors, textures, objects and photos of nature in their work. The rainbow is definitely one of the most colorful nature objects which inspires everyone. In this showcase I have collected some colorful websites with rainbow elements. Some of these use lots of colors, others use colorful lines similar to those of the rainbow while others use actual rainbow images.
Showcase of Rainbow Elements in Web Design
In this web design showcase you will find 25 impressive examples of rainbow inspired websites with short descriptions.
Designfabrika uses a beautiful combination of a wood texture and a rainbow inspired background.
A small accent of rainbow on the left side of the website adds some identity and makes it stand out.
It’s a hotly debated issue on several forums and blogs of the sector and that often divides the mass of web designers in two different and opposing factions: I’m talking about the aesthetic aspect of a site and on how it’s appearing in one way rather than in another can enhance or on the contrary limit its potentialities and effectiveness.
A site must only give information and has to do so in the most direct and simplest way possible, as someone says. This is true, but –replies somebody else- it is also important how such information is transmitted and how through shapes and colours, stimulates the curiosity and the interest of the consumer. Sigue leyendo →
by Oliver Reichenstein
I’ve been asked by the Italian magazine L’Espresso to write an article on The Future of Web Design. Here is the (longer) English text.
Thinking about what’s next online is fun because everything you wish to come true will come true. While commercial products obey to the laws of the market, which in part are influenced by the resources needed to create these products, the web is defined by the user. If the user wants something he will either get it or create it himself. To see beyond today’s limits of the web all we need to do is see what is needed.
Most of us will agree that today’s web sites are still way too difficult use. They are overcrowded with irrelevant information and confusing functionality. If you open a contemporary news site you get bombarded with features and advertisement. Many web sites want to do too much, too quickly. They lack in mainly three regards: Sigue leyendo →
Reviewed exclusively for WDD by Cameron Chapman
After all, there are dozens of excellent galleries out there online that we can access for free, that are updated on a daily or at least weekly basis.
Could a book compete with that? Or would it just be filled with the same sites we’ve all seen in every gallery and design roundup out there.
As someone who studies design galleries and roundups on an almost daily basis, I was pleasantly surprised to see that the majority of the designs included in The Web Designer’s Idea Book, Volume 2, by Patrick McNeil (who writes a monthly column for .net magazine and runs Design Meltdown), were not ones I remember seeing previously.
In fact, most of the designs in the book are fresh and new, and haven’t made the usual rounds of galleries and showcases.
Now, of course, just because something is new doesn’t mean it’s going to be useful. It takes a combination of new and well-organized to stand out. Sigue leyendo →
Scribe allows you to optimize content of any kind whether it be a blog post, press release, article, etc. Membership entitles you to analyze a certain number of pieces of content and a certain number of keyword research requests depending on which plan you signed up for. The new Keyword Research Tool is the subject of this tutorial. Recently they have also updated their WordPress, Joomla and Drupal plugins to include this feature.
- Affiliate link for Membership to Scribe SEO
- Computer with Internet Connection
- List of keyword phrases you want to research
Step 1: Login to your Scribe SEO account
In your browser’s address bar, navigate to https://my.scribeseo.com and login to your account. If you can not remember your password, click on “Forgot Password” and Scribe will email it to you.
Step 2: Choose the Web Version
Under “Supported Platforms”, click on “Click here to optimize with Scribe Web.”
Step 3: Choose “Add Content”
Click on the link that says “Add Content”
Favicons are small pixel-size icons which are short for Favorite Icons, or icons that are intended to be viewed next to a website title when bookmarked. They also show up in the URL section of a web browser and in tabs. The purpose of a Favicon is not just for visual impact, but it is an essential branding tool, that can support the greater branding images of a website like the logo, overall color scheme, and theme.
Having a good favicon can make a website more noticeable and relevant when a past visitor is searching through bookmarks, history, or favorites. It can also help for users to find a website quickly when trying to search their way through multiple tabs. In this post we’re going to take a look at some great Favicons that represent the respective brand well, and also cover some tutorials and how-to’s for creating your own effective Favicon on your website.
Tutorials and How-To’s
Creating and implementing a Favicon is relatively easy. Favicons in the URL field and in browser tabs are at 16×16 pixels, but 32×32 pixels are used in some browsers in the Favorites section. Below is a step by step guide to first designing your favicon, and then placing it into your website.
Step-by-Step Guide to Putting a Favicon on Your Site
- Open up MS Paint or another graphics program of your choice. MS paint works just fine since you’ll be having to work in simple pixels and a simple color palette anyway, and because it supports saving files in the Favicon format:
.ico. However, a Favicon can be created in another program and then translated into
.icowith an online generator fairly easily as well.
- Create a 16px by 16px document and begin designing within this space. It can be difficult to create something with a lot of detail in this small space, so be sure to check out the best practices and guidelines below for creating an effective Favicon. You may also want to create a 32px by 32px icon with more detail, since some browsers display Favorites at this size. For practicality purposes, though, 16×16 pixels is usually sufficient for most uses and modern browsers.
- Save the icon in a
.icoformat. This can be done in MS Paint, through Photoshop with this plugin, or use one of the online generators below. It can also work to simply save the icon in any common web image format, and then rename the file to
.icoinstead of .jpg, .gif, or .png. However, this is just disguising the real format, and using this method may not be fully compatible among all browsers.
- Place the icon in your images folder, or in the root folder of your website.
- Use the following code in the head section of your webpage, preferably next to your meta tags or other link tags:
Further and More Specific Tutorials
- Favicons: why and how to create favicons
- How to Create a Favicon and Why Should You Use One
- Matt Mullenweg: How To Create A Favicon
- DailyBlogTips: How to Create a Favicon
- What is Favicon.ico and How to Create a Favicon Icon for Your Website
- Favicon Info and Tips: Animated and Basic
As anyone can see, creating and implementing a Favicon is pretty easy. Most web designers know this, but above is a quick guide regardless. Now, though, let’s look into Favicon design in a bit more detail. Like with any web design practice, there are a set of best practices when it comes to designing and implementing favicons onto your website. Below are just a few ideas, some technical, and some not.
Name Your Favicon “favicon.ico”
Many websites name their favicons “favicon.ico” for a number of good reasons. The most important reason is browser compatibility with IE. Yes, even with classic Favicons we must still deal with issues in Internet Explorer. Fortunately, issues are easy to overcome. IE6 may only recognize icons as favicons if the icon ends in
.ico. There are ways to make other image formats (such as .png, .jpg, and .gif) work as Favicons by just altering the HTML code above, and it will work just fine in modern browsers. However, we won’t even get into how to do that since it’s just much easier and more compatible to make favicons in the standard
Also, IE5 and earlier may not even recognize a favicon if it is named anything different than ‘favicon’. Many will argue that the percentage of those who still use anything IE5 and earlier is next to nothing, and that it barely matters. While this is a very good point, it doesn’t take much extra effort to name a favicon appropriately to include that small percentage regardless.
The third good reason to name your favicon exactly “favicon.ico” is for consistency purposes. When working with websites from developer to developer, this is the standard name for such an icon and therefore it can be recognized and worked with more easily.
Place Your Favicon in the Top Directory
While our how-to example above did indeed place the favicon in an images/ folder, it is generally a best practice to place the favicon in the root directory of your website. While it is possible to place a favicon in any directory and link to it respectively, most developers place it in the top directory for consistency purposes.
It may make more sense to some to put it into an images folder since it is an image, but the standard developer-to-developer directory structure includes it in the top directory with the main pages.
Create a Multi-Resolution Icon
We were discussing above what the common size dimensions were for favicons. 16px by 16px was the most common, and many websites choose to just use this. A standard 16px by 16px icon works just fine in the majority of cases. Yet, there is a way to create a multi-resolution favicon that supports larger versions of the icon, just in the case that the icon was translated to a desktop or application icon. This prevents the 16px by 16px icon from being stretched out into something hideous, in the rare cases of its expansion.
For a detailed tutorial on how to create multi-resolution icons, check out this post: Creating a multi-resolution favicon including transparency with the GIMP. While this tutorial is based in GIMP, the same principles can be translated to Photoshop or another photo-editing program as well.
Use the 256 Color Palette
This simple color palette is the default Windows color palette. It is what most browsers that view your favicon will support, plus, the simplicity in colors means a better visual outcome for a design in such a small space.
Keep It Simple & Consistent with Branding
Of course, keep to the main purpose of using a favicon: let it support your website brand. Many favicons are a simple version of the website logo, or a relative image otherwise. They are in the same color scheme as the main color of the website, and don’t stray too far away from the overall look and theme of the website. Never just use a random image or interesting piece of pixel art for a favicon. There’s just no point to that. Make it relevant, specific to your branding, and relative to your website’s overall look.
Also keep the design as simple as possible. There is just simply not enough room for extra design features such as drop shadows, texture, and so on. Clean lines and shapes are the best way to create a crisp, clean, and effective favicon. Without a minimal design, the overall use can backfire by becoming too crowded and blurred for effective branding. Sigue leyendo →
Gradients, rounded corners, drop shadows, it’s extremely hard to get away from the strongest of trends in our industry.
Each year however, some people manage to set themselves totally apart from everyone else and produce stunning designs with inspiration seemingly flowing directly out of their fingers and into their work.
In this post, we’ll take a look at a few of those people and some of the things which they do to be unique from everyone else.
What Constitutes Being Unique?
It’s all well and good suggesting that you should be unique and different from the competition, but what does that really mean? There are so many websites and great designers out there, what individual elements constitute being unique?
Well, in simple terms being unique just means doing something differently. You don’t have to create a design with the navigation in the footer and the copyright information up where the logo would normally be just for the sake of standing out. It’s about not just following what everyone else is doing and coming up with your very own way of displaying the information and the message which you are trying to get across to the user.
How many sites have you seen with a full width header (with a gradient), followed by a full width navigation bar, then a content section and a sidebar, then a full width footer? Hundreds? Thousands? If your focus is going to be being unique, then this is probably a design recipe which you should steer clear of. It’s too easy to create yet another site like that. Don’t get me wrong, they are popular because they are effective and easy to create… but they don’t stand out.
Being unique is largely about doing small things differently to everyone else rather than trying to reinvent the wheel. Of course you also have to accept that the time period for which it remains unique will be limited. If you do a great job, then unfortunately (or fortunately, depending on how you look at it) it’s going to be copied by many, many people. That being said, innovation is almost always remembered.
The list was so inspiring and commented on that we decided to do a new one with another 50 inspiring dark web designs. So here they are, 50 new examples of how some sites are using dark colors as main elements of their design. Enjoy.
As web developers, it is paramount that we educate ourselves on the latest techniques, trends, software, and coding. If you don’t, you will not achieve being an in demand designer/developer. Your skills will fall behind, and it will reflect in the websites you build. As much as we all like to think we are in some big happy family of designers and developers, we are all competing with each other. Just keeping up is what everyone else is doing, so how do we get ahead?
Image credit: Mikebaird
Blogs, Blogs, and More Blogs!
Obviously, there is a ton to read online about the latest and greatest techniques. If you looked at the RSS feeds we all subscribe to, it is probably a good bet that most of us have quite a few in common, like: onextrapixel.com, webdesignerdepot.com, css-tricks.com, net.tutsplus.com, sixrevisions.com, and smashingmagazine.com. If not in your RSS reader, then maybe you just visit them occasionally. They are all a great source of information, but what about the lesser known blogs? The ones you have never heard about, being written by people like you.
There are a lot of great tutorials written by people in the web development trenches that don’t get any recognition. How do you get to them or find them though? Easy, just go to the blogs you normally visit, and start clicking on their links in the comment sections. You will be amazed by the quality of tutorials, tips, and general articles written by people you don’t know yet. Don’t just stay focused on the most popular blogs, because everyone else is already doing that. We want to get ahead of them, remember?
Starting your own development blog is also a great way to step it up a notch. Writing your own tutorials will make you not only better at communicating, but give you a better grasp of what you are trying to get across to the reader. It’s hard work for sure, but you will find you are more in tune with what is changing, what is new, and start hunting for things people might not know about. I know I have learned a lot just by doing research for topics to write about on my own blog. Find something you don’t know how to do, learn it, and then write about it. Others might enjoy your article, and you will possibly have gained a skill that puts you slightly ahead of the people you are going up against.
Blogs Are Good, Books Are Great
Image credit: Erik
A book also offers something that can be hard to do on the web – a place to take notes, and quickly reference them. Go buy a bunch of post-its, and mark the pages that contain information that is important to you. Don’t forget to write the main topic on the post-it, otherwise you will have a mess on your hands. If you don’t want to do that, fold the corners and heck, write all over the book (assuming it’s yours). By the time you are done with the book, you have all the important parts marked!
Don’t Be a Freeloader, Do It Yourself