Must-Have Tools for the Beginning Web Designer
There are great many software products, which can make the work of a web designer much easier and dramatically increase his or her productivity. However, some of them cost hundreds of dollars, which not every beginner web designer can afford and they could take months to master as well.
What are the most essential tools for a web designer?
When it comes to commercial applications, Adobe Photoshop and Adobe DreamWeaver are probably the two most widely used and popular tools. They are both powerful, come with solid and useful features, and have in fact become an industry standard in the world of Web designing and Web Development.
Photoshop is the application, which a designer could use to edit graphics and its latest CS5 version comes in two editions: Adobe Photoshop and Adobe Photoshop Extended, where the latter has a few additional features. This professional tool is excellent for the experienced designers and for the novices alike and allows them to resize, crop, and modify images, as well as work with colors, layers, effects, gradients, and text. It is also a flexible application, which works with other Adobe products, has great performance since it supports unlimited RAM, works with both 32-bit and 64-bit processors, and utilizes the power of the graphic cards’ GPU as well.
GIMP and Paint.NET are two free Photoshop alternatives, which many new designers love. GIMP works on many software platforms, supports number of file formats and is excellent for photo retouching and enhancements. It has highly customizable interface, which allows the users to rearrange their work area in the most efficient way. Paint.NET has very easy to use interface, works with layers, supports number of special effects, and is one of the fastest image editors that are available today.
When it comes to coding the website templates, the already mentioned Adobe DreamWeaver is the software tool that the seasoned developers swear by. It comes with Text and WYSIWYG (what you see is what you get) editors, intelligent coding assistant, CSS and HTML validators, and support for a number of leading technologies such as Ajax, PHP, XML, XHTML, JavaScript, ASP, ColdFusion, and many others. The software is integrated with other Adobe products such as Flash Professional, Photoshop Extended, and Fireworks, which significantly reduces the time that it takes to develop all components of a web site.
Kompozer is a free, cross-platform (works on Windows, Linux, and Mac) tool, which is based on the infamous Gecko engine and is, therefore, speedy and reliable. Similar to DreamWeaver, it comes with a WYSIWYG and HTML editor, but also supports tabbed editing, templates, tables, and forms. It has customizable toolbars, powerful FTP site manager that facilitates editing sites on the fly, CSS editor, spellchecker, and even extended color-picker. Kompozer is tiny, but extremely powerful and very easy to use, which makes it ideal for the new designer.
Firebug is another free tool, which integrates with Firefox and allows live monitoring and editing of JavaScript, CSS, and HTML. It helps the user easily find HTML elements, correct CSS code, debug and execute JavaScript, and find errors in the code easily.
Two other great editors are Notepad++ and PSPad – both are free and have great many features such as tabbed document support, drag and drop, International characters support, split screens, advanced ‘Find and Replace’ functions, and many others. Both editors are perfect for web development, support plug-ins that could have their functionality further extended, and are ideal for working with HTML, PHP, XML, CSS, and even Flash action script.
If you consider becoming a web designer, apart from all the above-mention and other software tools, you would need to have an above-average computer as well. Purchasing a new machine with more RAM, faster CPU, and better video card will speed up your productivity immensely, especially if you work with flash, videos, or animated graphics. If you use many online tools and upload great number of large files daily, faster Internet connection will definitely accelerate your work and in many instances, using dual monitor setup can be beneficial as well.
Everything You Need to Know About Social Networks [INFOGRAPHIC]
It would be an understatement to say that Social Networking is big time. The time has come where it isn’t enough to have the domain name you want available, you must also make sure usernames on the most popular networks are also available. With that said, check out this awesome infographic we created to show you just how popular Social Networking is.
Like it? Add this infographic to your blog or share it with friends!
600 pixels wide version
760 pixels wide version
1000 pixels wide version
HTML and CSS for beginners
With the help of CMS platforms such as WordPress, Drupal, Joomla, or TextPattern almost anyone, with little to no HTML or CSS knowledge can have a website up and running in a matter of minutes. However, if you want to be able to format web pages, then learning at least some of the basic HTML tags and being able to use different CSS elements such as colors, layouts, or fonts, then a quick crash course on HTML and CSS would be beneficial.
What are the best HTML and CSS resources for beginners? Listed below are some of the websites that have well-written tutorials, articles, and news that you might find useful:
W3Schools
One of the places where you can find both HTML and CSS tutorials that are detailed, thorough, and supported by easy to understand examples. The HTML part is split into basic, advanced, examples, and references. The basic section comes with twenty chapters on its own at the time of this writing. Each chapter is supported by code which you can try immediately by clicking on a button that opens a new browser window and this will help you understand the various HTML elements, their attributes, styles, and formatting. The CSS tutorials are also conveniently split into seven sections and even includes a quiz and practical examples.
HTML Dog
Another great recourse with beginner, intermediate, and advanced HTML and CSS tutorials. When opening the beginner’s tutorials the menu expands and allows the reader to jump to any of the sections that they are interested in. The tutorials themselves are written in a simple and clear manner and every new step is explained with the help of practical examples. The CSS tutorials are split into seven chapters and introduce the various CSS properties, values, and selectors, as well as markings, padding, and borders. As soon as you master the basics, you can move to the next level and start learning about nesting, grouping, pseudo classes, and cover some of the more advanced topics.
HTML Goodies
One of the oldest HTML websites and one that has undoubtedly helped millions to learn the basics of the hypertext markup language. The design has changed throughout the years and as it stands today, the website is a tad busier than most similar websites, yet still not that difficult to navigate. Links to the HTML tutorials can be found on the left-hand menu and are split into twelve sections, each one with a number of subsections as well. The main strength of this website comes from the well written tutorials and that is what makes it a great recourse for beginners.
CSS Basics
If you want to get your feet wet and learn more about Cascading Style Sheets, then head over to http://www.cssbasics.com/. There are eighteen chapters that you can read online, print out, or download and save to your hard drive. The website is extremely easy to navigate, all the chapters are short, well presented, and loaded with numerous examples that will help you understand how each element works.
HTML.net
Another excellent resource with HTML and CSS tutorials that start with an introduction to HTML and CSS, explain how they work and how to use them. The tutorials are accompanied by by graphics and images that make learning the basics easier.
The resources listed above will help you learn more about HTML and CSS and show you how to build pages that are better designed, easier to navigate, and quicker to load. Once you cover the basics you can move to more advanced topics and learn more about new elements in HTML5 and CSS3 as well as become a better designer and webmaster.
What is your favorite HTML/CSS tutorial resource? Please share with us in the comments.
A Beginners Look Into HTML5
New Multimedia Elements
The <audio> and <video> tags allow webmasters to add sound and videos to a webpage, without having to use lengthy embed codes. The <video> tag comes with ‘control,’ ‘autoplay,’ ‘src,’ ‘height,’ ‘width,’ ‘loop,’ ‘preload,’ and ‘audio’ attributes, and allows adding text between the opening and closing tag as well. The <audio> tag works in a similar fashion for sound content and has five attributes on its own.
New Site Structure Elements
<section>, <footer>, <header>, <nav>, <article>, <aside>, and <figure> are the new structure tags, which define the different sections of a webpage, and come with their own and support standard and event HTML5 attributes.
New Form Elements
While the <input> tag remains valid, it comes with five new type elements, which make the web forms even more flexible: ‘date,’ ‘datetime,’ ‘datetimelocal,’ ‘time,’ ‘month,’ ‘week,’ ‘url,’ ‘range,’ ‘number,’ and ‘email’ are the new input types and together with the already existing ones, make the total of supported types twenty three.
New Inline Elements
‘meter,’ ‘time,’ ‘mark,’ and ‘progress’ could be used to represent figures, date, time, lists, or progress bars, and wrap semantic content.
New Graphic Element
<canvas> is used to display graphics, has its own height and width attributes, and supports the HTML5 events and standard attributes. It is accessed by Javascript via its drawing functions and could serve as a 2D drawing surface for presenting graphics, games, animations, and image compositions.
New Interactive Elements
<datagrid> could be used to provide interactive set of data, while <details> could be used to provide tips and other useful information. The previously deprecated <menu> is back with new functionality, has ‘label’ and ‘type’ attributes, and is used to define menu lists with command elements.
New Charset and Doctype
The charset is defined with the easy to remember <meta charset=”UTF-8″> tag, while the new DTD is <!doctype html>, which is also much shorter.
New attributes for already existing elements
HTML5 adds a few new attributes to elements that are supported by HTML4. The <a> and <area> elements have now ‘media’ attribute, the <base> element has a ‘target’ attribute, and the <meta> element has a ‘charset’ attribute. Certain attributes such as the ‘start’ attribute of the <ol> element, the ‘target’ attribute of the <a> and <area> elements, and the ‘value’ attribute of the <li> element are no longer deprecated.
Dropped elements
The following elements are no longer supported in HTML5: ‘acronym,’ ‘applet,’ ‘basefont,’ ‘big,’ ‘center,’ ‘dir,’ ‘font,’ ‘frame,’ ‘frameset,’ ‘isindex,’ ‘noframes,’ ‘noscript,’ ‘s,’ ‘strike,’ ‘tt,’ and ‘u.’
Changed elements and attributes
The <a>, <address>, <cite>, <b>, <hr>, and other elements have been slightly modified, and certain attributes such as the ‘language’ attribute of <script>, ‘border’ attribute of <inc>, ‘name’ attribute of <a>, and the ‘type’ attribute of <style> and <script>.
For detailed listing of all the differences between HTML5 and HTML4, please visit: http://dev.w3.org/html5/html4-differences
For quick overview of HTML5, please visit: http://en.wikipedia.org/wiki/HTML_5
Learn how to use some of the most exciting HTML5 features: http://diveintohtml5.org
For the latest on HTML5, articles, tips, news, and more, please head over to http://html5doctor.com
Find out if your browser supports most of the HTML5 elements: http://html5test.com
This was just a high level look into what is new in HTML5. In future posts we will dive deeper into each of the elements and explore them a bit more.
Do you use HTML5 to design websites? What is your favorite HTML5 resource? Please share with us in the comments.
Must Read Links for Web Designers and Developers – Volume 2
Today I am pleased to bring you Volume 2 of the interesting links I have gathered. If you are at all interested in anything web design/development related I am sure you will find a link or two that interests you in this list.
CSS
27 Of The Best CSS And HTML Frameworks Available To Download
I have to tell you that I discovered my first CSS framework more than a year ago and I was fascinated at least. Hours of writing the same dull code and then solving the same silly bugs have been lost before it and I was almost mad about it but in the same time happy that I’ve at least found the bloody thing. Out of a personal curiosity I’ve searched all the possible CSS frameworks to see what they are bringing new and how they are helping the community and then selected the best of them for other unfortunate designers or developers out there who don’t have their hands on a CSS grid framework. I was surprised that people have already made mobile CSS/HTML frameworks but you won’t have to, cause you got them here and can use them free.
Examples of Flexible Layouts With CSS3 Media Queries
In my CSS3 presentation that I’ve given several times over the past year, the part that seems to impress the audience the most is my demonstrations of media queries. I’m with them. I think media queries are perhaps the most useful and exciting piece of all the great new stuff that’s new to CSS3.
CSS3 Button Tutorials and Techniques Revisited
Once upon a time when a web design required a nice, functional and scalable button it would have had to have been firstly designed in Photoshop, implemented with the sliding doors technique, and you may have had to spice things up with a little Javascript. With CSS3 everything is changing – everything is easier and certainly better.
How to Create Social Media Buttons Using CSS3
CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.
45 Free CSS and XHTML Web Layout Templates
In this CSS and XHTML template round-up we have selected templates that do meet the latest design trends and do use the latest innovative development techniques. They have all been built professionally, all are standard compliant and all, in there own unique way, will perfectly as a modern standalone web site as well.
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image.
32 Javascript Alternatives with Pure CSS
The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking. What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used.
50 CSS3 Tutorials Every Designer Should See
While making a New Website Design, designers have to take a look at new CSS3 features. In this post we will show you some easy and useful CSS3 Tips that you can use in your next project. You will be able to explore different tutorials and features of CSS3 through following tutorials. Enjoy!
Fonts
Dear reader, get ready for one of the most relevant best-of-the-year lists of the font world. MyFonts’ parade of most popular fonts of 2010 is based on sales, so ultimately this is the list that you voted for. And a fascinating collection it is too, offering striking, charming and highly original faces for all tastes and budgets. Some trends? “Friendly and human” is big, with typefaces sporting rounded corners, soft silhouettes or hand-drawn letterforms. Scripts are going as strong as ever. And two cities have risen to prominence as typographic metropoli, 7500 miles apart: Buenos Aires and Berlin. Those are the trends; these are the typefaces — enjoy! And happy 2011 from the MyFonts team.
20 Free Fonts Related to Music Industry
Some days ago we featured 20+ Free Fonts Inspired by Famous Movies. If you are music addict then this collection can be very pleasing for your, today we have collected 20 Excellent free fonts which are somehow related to music industry. Majority of them are used in logos of rock bands. Have fun.
Fonts Used In Logos Of Popular Websites
Branding and logo designing is very important for any website as every website has to establish itself on distinct basis and to deliver unique message. Therefore, they try to use most excellent designed fonts. Today we have collected fonts used in logos of 26 popular websites.
If you want to visit place next to this world with the help of typography than you should consider using the fonts we have collected today. The oddness and eccentric look of these fonts make you feel out of the world, if used correctly. Hope you will like this collection of these Gothic, curly and cursive fantasy fonts.
25 Free Fonts Perfect for @fontface
The recent web design trend of not using web safe fonts for headlines and titles has opened up a whole new resource category for designers: The search for the perfect headline grabbing font.
My Personal Favorite Free Fonts
Everyone has personal favorite fonts, some love to use script fonts in there work, some like professional fonts other like grunge fonts. It depends on your way of thinking and what kind of output you want. Today I thought to feature some of my favorite fonts, these 30 fonts listed below are my top picks for any project. I love to have fun with them. Have a look and let me know which is your favorite font?
10 Free Fonts Sites That Don’t Suck
There are an awful lot of free font websites out there. But which ones are the best? Which ones can you take seriously? I’ll answer those questions right now, with a collection of the best free font sites on the web today.
20+ Awesome Gothic Fonts for Traditional Designing
Gothic fonts are always helpful in ancient and traditional designing. Their swirls and twists give the letter a conventional look. Today we have collected 24 fresh and exhilarating gothic fonts. We hope these fonts will come handy in your future projects.
35+ Fonts that Add Spice to your Site
It is beyond doubt that fonts are one of the most important parts of every web project. Through the ages there notable and numerous have been done in development and advent of new fonts.
jQuery
Form validation with jQuery from scratch
This article does not show you how to use the jQuery validate plugin. The tutorial covers building a lightweight, flexible solution from scratch. It won’t be nearly as advanced and powerful as the official plugin. Nevertheless, I hope you’ll learn something from a jQuery, JavaScript and Object-Oriented aspect.
Dropdown menus are used since the evolution of graphical user interfaces, and jQuery Menus are most wanted. Although a must in almost all websites, but still they are high on demand. There are numerous options in dropdown menus, but finding the one matching to your needs yet trendy can be tricky.
A great resource for anyone working with jQuery.
25 Fresh jQuery Tutorials and Plugins
jQuery is the most famous, powerful and cross-browser JavaScript library which is designer to simplify the HTML scripting. It is lightweight JavaScript Library which supports CSS 1-3 selectors and is used by thousands of popular websites. Looking at the power which jQuery provides to its user, today we bring 25 fresh jQuery tutorials and plugins for you. Enjoy this handy collection.
Photoshop
Design a Fresh Web Service / SaaS Website Interface (Plus a Free PSD!)
In this tutorial we’ll be using Adobe Photoshop to design a clean and fresh interface that can be used for any web service or SaaS-based web app. We’ll be covering some trademark web elements such as ribbons, buttons and stickers, as well as some basics including shapes, masks, typography, and much more.
Make a Simple and Modern Web UI Button in Photoshop
This beginner-level web/user interface design tutorial will walk you through the creation of a popular style of buttons that can be used in a variety of situations, such as in call-to-actions, common user tasks such as submitting a web form, and buying products from your e-store. In addition to the creation of the graphic in Photoshop, we will go over the HTML and CSS needed in order to make the design fully functional.
Blog.SpoonGraphics Design Tutorials: Greatest Hits 2010
2010 has been a another good year for me. As I’ve declined my number of client projects in order to spend more time working as a ‘blogger’ I’ve been able to put more time into writing tutorials, making them more in-depth and detailed. It’s fab to see my tuts helping people out and gaining exposure on the web. Here’s a roundup of my ‘greatest hits’ this year according to StumbleUpon ‘thumbs up’ stats. Surprisingly a few of the most popular were topics I never expected to do so well, and on the contrary some posts I put some real sweat into never seemed to take off in comparison!
Minimalistic Poster Design in Photoshop
It’s the end of the year and for the last tutorial of 2009 I will show you how to create a poster inspired by the amazing work of Simon Page, especially those beautiful posters for the International Year of Astronomy. I created this design first for the Abduzeedo 3rd Anniversary poster but I changed it a little bit for this Photoshop tutorial.
10 Handy Photoshop Plugins for Photographers and Designers
Since photography is the hot issue here at Designzzz now days. Here’s list of important Photoshop plugins for photographers and designers. Retouching, color enhancement and some powerful utilities to boost a designer’s, or photographer’s productivity.
November’s Free Professional PSD Web Templates
This is a list of 30 hand-picked, fully customizable templates which contain the graphic source files in .PSD format, fresh and creative resources from design community.
1 Million Photoshop Backgrounds
Photoshop Backgrounds plays a vital role in highlighting your focus point. Today we have collected an astounding collection of different Photoshop Backgrounds which you may like to use in any or your artwork or just add a little glamor to your desktop. Check out for this massive top collection of Photoshop Backgrounds.
35+ Amazing Photoshop Tutorials in 2010
Today, I would like to share with you more than 35 of the best Photoshop tutorials in 2010. These tutorials varies from text effects, photo manipulation, poster design and UI design. If you have another useful Photoshop tutorial, feel free to share it in the comments and share with each other.
Design a Textured “Coming Soon” Web Page in Photoshop
This web design tutorial will show you how to make a simple “coming soon” web page that has a nice background texture and a slick web form that you can easily adapt into contact forms, newsletter signup pages, and more. You will witness several web design techniques such as creating textured backgrounds, creating light rays, making illustrative clouds, and more.
Our Favorite Photoshop Tutorials of 2010 on PSDTuts
Wow! Another year has come and gone. 2010 is coming to an end and 2011 is quickly approaching. 2010 was a great year for Psdtuts. Sure, we had some ups and downs but we managed to finish strong with a few of the strongest months we’ve ever had in terms of traffic. We published a lot of content in 2010 so I decided to go through the archives to find some of my favorite tutorials from 2010; choosing only 1 tutorial from each month, and share them with you here. What I found were some awesome lessons on matte painting, drawing, typography, and layout.
We’re living in a brand new, Photoshopped world. Visit a checkout aisle in any grocery store in the country, and you’ll find a wealth of magazine cover shots that seem a bit too primped, too thin, and too bronzed to be believed. Our obsession with perfecting reality has led to a boom in the usage of the Photoshop technology everywhere; but there’s a good deal of fun and artistry to be had with the software as well. Here are the best fifty blogs on the subject that we’ve culled from the Web. Click around, and magnify your favorites.
The Top 50 Best Photoshop Tutorials from 2010
Today, we’ve got a special collection of the best Photoshop tutorials from 2010 for you. We worked really hard to gather up the best of the best tutorials from design blogs and magazines around the internet, with everything from text effect tutorials, matte painting tutorials, graphic design tutorials, print design tutorials, photomanipulation tutorials, web design tutorials and more, in order to supercharge your Photoshop tutorials for 2011.
iPhone Development GUI Kits, Wireframe Stencils and Icons
To help streamline your iPhone app design and development, we have put together a fairly comprehensive collection of iPhone & iPad GUI kits that will allow you to focus on developing rather than having to design everything from scratch.
WordPress
How to organize your content with WordPress custom taxonomies
Organizing content can be a lot of fun. Well, it can be a lot of fun if you’re a crazy blogger/librarian-at-heart, like many of us are. When you have a good deal of content it can quickly become more than you can handle, if you don’t have a decent system in place. I would even argue that unless you have a handle on your content, no one else can be expected to either.
Custom WordPress Login/Register/Password Code
In this DiW post, we transform three slices of code into a clean & stylish tabbed menu that visitors can use to login, register, and recover passwords from anywhere in your site.
Grey: A New Free HTML5/CSS3 WordPress Theme
Grey is generic enough to be used for almost any kind of blog. Whether you’re looking to setup your own design blog, a blog about photography, fashion or whatever your passion, the Grey themeshould suit your needs. It is built on a simple layout, but with lots of little touches of subtle detail and texture.
How to Display Featured Post on Sidebar with Thumbnails
Have a featured post displayed on sidebar has several advantages, such as to increase pageviews. With featured post section, you can display your best articles. So that it can attract visitors to explore your site longer.
Web Design
10 Extremely Useful Background Generators for Designers
Using good background image in web design can really lift up a simple layout. Now the question is, how to generate interesting backgrounds for your website. There are many ways to achieve that, you can do it either a simple way or harder way. Simple way is to use online background generators, which can be used to make stripped, tiled, textured and dotted patterns.
25 Free High-Quality Minimalist Icon Sets
This collection features simple and flexible icon sets that are free for you to download. These icons are suitable for many uses, such as in iOS (i.e. iPhone, iPad) and Android apps, website prototypes and wireframes, e-stores, blogs, and more. There are over 2,000 icons in this icon set collection. Please read the licensing and terms of use of the icons you intend to use.
Best of the web design tools and resources of 2010
Another year ends and a new year begins, there have been 12 months full of news in the web design world, from the New Twitter design to the constant grow of HTML5 and CSS3, there has been tons of events that have changed the web panorama during this year. We spent all the year digging across the web to find those little secrets that were waiting for being discovered.
15 Excellent Step by Step HTML5 Website Coding Tutorials
Perhaps you want to start using html5 markup now and you don’t know where to start with. Well, I’ve collected some of the best step by step html5 website coding tutorials just for you. I hope this will be useful to you and I love to hear your suggestion in the comment section. Enjoy!
Web Design Trends in 2011
What are the possible web design trends for 2011?
Faster loading designs are in.
Users are demanding faster loading web sites, which almost rules out flash pages that take minutes to load. Slimmed down index pages with very few images, no audio, text rather than image ads, and easy on the eyes color schemes are expected to become the norm of the day.
Mobile content will make its mark.
As more and more people are browsing the web from their cell phones, tablet PCs, handhelds, iPhones, and iPads. Even the latest e-book readers came with their own web browsers and some of them are even capable of streaming audio and video as well. Most web designer will be expected to create a mobile ready site off the bat, or create a mobile version of their designs. With the use of CSS3 and HTML5, matching the websites’ layout and the user’s devices capabilities is far easier and creating style sheets for smaller devices is no longer a daunting task. The trend towards “responsive designs,” which grew stronger during 2010, is definitely here to stay!
CSS3 and HTML5 come on strong.
CSS3 comes with new features such as new border, color, background, and text effects, as well as new selectors, media queries, fonts, and speech. HTML5 comes with even more exciting new elements such as placeholders, editable content, local storage, email inputs, and better audio and video support. The latest versions of popular browsers such as Chrome, Firefox, Opera, and Safari already support most CSS3 and HTML5 properties, and so is Internet Explorer 9, which at the time of this writing is still in Beta.
No more split content.
Even though we still see high authority websites splitting their content amongst several pages, hoping to display more ads and make more sales, the users have clearly responded negatively to this approach.
Interactive pages with little or no Flash.
This will be achieved by using Javascript, which became more robust and which can be used to build much smaller applications, resulting in faster site loading. Cross-browser libraries such as JQuiery, which offers CSS manipulation, plug-in extensibility, events, DOM element selection, utilities, effects, and animations, will come in handy for many web designers.
Platform-driven designs are also here to stay.
Layouts for the most popular of CSM platforms such as WordPress, Joomla, Drupal, Text Pattern, and Cushy CMS will continue to evolve. The expectations are that newer and better applications will make designing for the top platforms much more intuitive, and web designers that are familiar in detail with CMS will continue to be in high demand.
Web design for touch screen devices will increase in popularity.
The use of larger image icons, larger navigation buttons, smoother scrolling web pages, and magazine style layouts will make the web sites far easier to browse on a touch screen.
Typography will become a larger element of web design.
Using application such as Typekit and Fontdeck will help designers deliver their messages across without having to make use of images, and will also allow them to choose from hundreds of different fonts.
Accurately predicting the direction, which Web design will follow is not an easy task, but we expect the web content to be even more user-friendly, less colorful and with fewer whistles and bells, but still capable of delivering multimedia rich experience to the users.
What are some trends you are either excited or not so excited to see? Please share with us in the comments.
Interpreting Web Analytics for Beginners
Web analytics tools are abundant, but in order to use such tools effectively, you need to decide what information you need and how to interpret it correctly. After that you then need to make the necessary changes to your web site in order to attract more visitors and improve your search engine rankings.
What information do I need?
This is a question that you should try answering before deciding on which web analytics tool to choose – going for the most advanced and most expensive one is not always the best choice. If you primarily source of traffic are the search engines, you will most certainly need information that tells you:
- Which keywords and key phrases are the visitors using to find your web site?
- Is the search engine traffic increasing, decreasing, or constant?
- Which search engine is sending you the most visitors?
- Which pages receive most of the search engine traffic?
- Where does your website rank for certain keywords?
If you want to analyze the on-site experience of your visitors, then you need to look into different data:
- What are the most popular entry and exit pages?
- What is the number of new visitors vs. the number of repeat visitors?
- How long do the visitors stay on the site?
- How many pages do they visit while on the site?
- Are the visitors bookmarking your website, posting comments, and subscribing to your newsletters?
- Are the users subscribing to your site’s RSS feeds?
If you decide to run PPC campaigns, then you would need entirely different information, which will help you analyze the success of your campaigns, tune up your ads, and ultimately achieve better return on your investment.
How do I interpret the Web analytics data?
Some number are pretty straightforward and easy to understand – if your search engine traffic has been decreasing for the past six months, then it is more than obvious that this is a trend, which you need to take into consideration. There is data that is not that easy to understand though and requires careful interpretation – if your website’s visitors spend little time on the site and visit very few pages this could indicate poor content and disinterest. However, this is a typical visitors’ behavior for most of the ‘Q&A websites’ such as answers.com or Yahoo answers and as long as the number of repeat visitors remains high, the low time on the site and the low page views do not indicate visitors’ dissatisfaction. Visitor segmentation will help you analyze the different traffic sources such as email campaigns, organic search engine traffic, and PPC and decide which one is the most profitable for you, while looking at the bounce rate will give you a good idea on how well targeted your ads are and the quality of your traffic.
If some or most of the data is hard to understand and analyze, you can hire a web analytics consultant, who can help you interpret all the figures and show you how to optimize your website.
What changes should I make?
Once you have pinpointed the weak elements of your website, it is time for improvement – based on all the gathered and analyzed data, you need to make a plan and take some action in order to make your website even more successful and attract more visitors. Tweaking your PPC ads, improving your website navigation, adding more and higher quality content, building more back links, and putting more effort into your email campaigns are only a few steps that you could take in order to boost your website’s rankings, increase your traffic and your sales.
Web analytics are very important but can be worthless if you do not know what to do with the data that you collect. Please ask any questions you may have about web analytics in the comments.
The History and Present State of Domain Names [Infographic]
It is hard to believe that only 20 years ago there were less than 500 .com domain names registered. What is even harder to believe is the number of registered .coms has grown close to 100,000,000. If only I could go back in time and register some high value domain names…but with my luck the this whole Internet thing would have never taken off. Any way, enjoy this infographic that displays some pretty fascinating information about domain names.
Like it? Add this infographic to your blog or share it with friends!
600 pixels wide version
760 pixels wide version
1000 pixels wide version
What type of Web Hosting is right for you?
We have had articles about domain names so we figured it was only right to have one on web hosting. After you register a domain name, the next logical step is to find a host for your new web site. The great news is that the prices of bandwidth have been steadily falling for the past few years and today the hosting plans are more affordable than ever.
The big question is; which plan should you choose? What is the difference between shared, reseller, VPS, and dedicated hosting plans and which one is the best for you?
Shared Hosting
Also known as virtual, is the entry-level hosting plan, suitable for smaller or start-up websites. Each one of the subscribers shares the same physical server and the same server resources such as CPU power, RAM, and disk space. The main advantage of the virtual plans is their affordability, while the main disadvantage is the limited resources that your site can use. A single hosting company can offer differently priced virtual plans, according to the allocated bandwidth, the number of hosted domains, and the availability of certain add-ons offered. Bluehost, HostGator, and JustHost are amongst the top hosting companies, which offer shared hosting plans that are extremely affordable and backed by excellent support.
Reseller Hosting
These plans allow you to sell hosting to other people, without having to worry about the technical aspects. You are given all the tools that you need to resell the hosting services and in the case of any issues, you can rely on the technical support, offered by the company’s server administrators. Once you purchase such a plan, you can sell hosting to your existing or new customers, and give them everything that they need in order to set up and manage their own websites. JustHost, HostGator, and Site5 offer excellent reseller packages.
Virtual Private Server (VPS)
A unique hosting plan which is a go-between the shared and the dedicated plans. Even though more than one customer shares the same physical server, each one of them has strictly allocated resources. The advantage of using a VPS is that no matter what the other clients do, the CPU, memory, and disk space available to you will remain constant, and you can have root access and reboot your server when you need to. The virtual private servers are further divided into managed and unmanaged, where the former come with technical support from the hosting company and the latter are managed by the webmasters themselves. InMotion, LunarPages, and Site5 have VPS plans that range from basic to expert and come with features and options, likely to appeal to many.
Dedicated Server
These plans are suitable for high traffic volume websites, large organizations, and e-commerce websites, and offer one physical server per webmaster, who can make use of all the available server resources. Full control over the server, high-end technical support, adequate storage space, extremely fast response time, and complete control over the installed applications are only a few of the advantages that renting a dedicated server comes with. The dedicated servers are also divided into unmanaged and managed, where the unmanaged are typically less expensive, but the webmasters have to rely on their own administration skills. InMotion, SingleHop, and BODHost offer dedicated UNIX and Windows server, which range from the most affordable single Core ones to double Quad Core machines with two hard drives and enough RAM to handle heavy load and provide lighting fast loading time.
Many companies offer all or most of the listed hosting plans and provide hassle-free and painless migration from one plan to another. This allows webmasters to start with the most affordable solution and climb up to a better hosting plan as their website grows and attracts more daily visitors. When choosing a hosting plan, take into account not only the price, but also the reliability and the quality of the technical support that the company offers!
The 13 Best Analytics Tools to Keep Track of Your Visitors
In order to be able to accurately measure your website’s performance and analyze the success of your different marketing campaigns, you need a website analytics tool. For the vast majority of websites, especially the ones that receive a handful of daily visitors, or have been launched recently, basic and free tools are typically sufficient. However, if you run a website that needs deep analysis and you want extended functionality, then there are a number of paid options out there as well. Listed below are the top 13 website analytics tools:
1. Google Analytics
2. Piwik
3. FireStats
4. Clicky
5. StatCounter
6. Woopra
7. GoingUp
8. BlogTracker
9. Webalizer
10. Awstats
11. Mint
12. CrazyEgg
13. Adobe Online Marketing Suite (previously Omniture Web Analytics)
Must Read Links for Web Designers and Developers – Volume 1
I know how much the readers here enjoy great links to web design and development resources. With that in mind I have created a list of valuable web sites that I know you will like. Hopefully you will find something in this list that you will be able to use.
CSS
Everything You Wanted To Know About Gradients (And a Few Things You Didn’t)
I am here to discuss CSS3 gradients. Because, let’s face it, what the web really needed was more gradients.
Best Collection of CSS3 Tutorials and Techniques
The latest revolutionary technology in web-designing, CSS3 is at the disposal of a web-designer to improve the working-flow and create exciting web pages. The new advanced features make the designing much easier, leaving the time consuming process of complex effects recreations in the past. Actually, CSS3 made classic CSS techniques easier to implement, thus providing greater flexibility and making the overall process much faster and much more effective.
CSS Sprite Tips and Techniques
Spriting is a skillset in the web design field gaining lots of credibility. We initially saw these techniques applied to high-traffic websites such as Yahoo! and Digg. Over time even smaller-scaled web apps began applying sprites to their front end design specs.
CSS drop-shadows without images
Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.
How to create a 3-column layout with CSS
One of the most visited pages on this site is the Simple 2 column CSS layout tutorial, where I explain how to create a basic 2-column CSS layout with floats. Many readers have asked for a similar tutorial on how to create a three-column layout, and I’ve been meaning to write one for a few years.
Customize Textarea Resizing with CSS
Webkit-based web browsers like Safari and Chrome have led web innovation the past few years. Whether its implementing new JavaScript APIs, providing more CSS capabilities than other browsers, or simply providing blazing-fast page rendering, WebKit has been head and shoulders above other browsers in page control and CSS features. One of those subtle features is the ability to control textarea resizing. FireFox will provide this same capability in Firefox 4. Let me show how to control textarea resizing with CSS.
Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.
Top Five CSS Sprite Generator Resources
Sprite Technique: The technique of using one big image, instead of lots of small images, to minimize the internet traffic and server responses. Visible portion is handled through the positioning of the image.
10 Incredibly Useful CSS Tools
10 tools great for making CSS generation easier. Everything from grid builders to rounded corners.
10 CSS3 Properties you Need to be Familiar with
We’ve already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it’s encouraged!
Many web designers prefer to use a CSS “reset” to “prime” the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use.
If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts.
A nice tool that generates everything from border radius to text shadow to gradients and much more.
Fonts
40+ High-Quality Fresh Free Fonts for Designers and Developers
It’s essential for Designers to have a good understanding of typography and selection as the importance of typography in design can’t be neglected. The proper selection of typography can convert your normal design into attractive piece of art.
Top 50 Free Fonts Created in 2010
2010 is just going to end leaving good and bad memories and moments for everybody. 2010 also gave us some of the most professional, creative, fanciful, elegant, imaginative and graceful fonts of all time. Today we have collected a collection of top 50 free fonts created in 2010. We hope you will like this collection. You can download these fonts for free, some of them required registration so you will have to sign-up or sign-in. Make sure to read license before using them in commercial projects. Enjoy.
20 Free Big Fonts for Remarkable Headlines
Creating a big and successful heading won’t be a real challenge for the designers due to the right choice of proper fonts. Original and eye-catching headlines will help users to properly digest content and of course will set right hierarchy of the text. Don’t forget that font is a powerful tool that helps in delivering your message to the readers so you shouldn’t underestimate the power of big and bold fonts. Here you’ll find a selection of popular big fonts that are absolutely free to download.
Fonts are being designed from a long period of time and will continue to be designed as they are the most significant part of one’s life. Wherever you go you will find written text in different kind of styles and modes. Some of the fonts go down without making any name in market but there are some fonts which gain extra ordinary popularity due to excellent work by their designers. Today we have collected 50 most popular free fonts for creative typography art.
100 New And Free Cool Fonts A Designer Must Download
With more and more designers in the world, cool free fonts are released even quicker than usual which makes us more than happy. Download these free fonts and you’ll have a rich typography toolbox with which you can make a solid impression in your future designs and projects. You’ll see that there are various styles in here, from serious and rigid ones to fancy and creative examples of typography.
Free Typefaces for Professional Design
With the course of time, every designer faces the problem of effective and stylish typeface choice.
25 New Free High-Quality Fonts
Every now and then we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.
70 Professional Fonts For All Design Life Situations
In this article, I will give you the best fonts you can download and use to make your designs look clean, professional but stylish. The fonts you will see below are the fonts we can consider as clean, professional but stylish. Now, scroll down and enjoy downloading! Make sure that you read author’s notes or license first before using.
Thin fonts can be very handy in clean and minimal web and logo design. There is a common misconception that bold fonts are the only choice for headlines and headings. New web designing trends have justified that thin and light fonts can be used for this purpose as well. Today we have compiled a list of 20 awesome ultra thin fonts for you people. Download them freely but make sure to read license before using them in commercial projects.
30+ Awesome Free Fonts for Kick-Ass Web Designs
As we examined last week in our Font Replacement Review, new technologies have liberating web typography from the ordinary web safe fonts to a truly wide open horizon of new and bold and imaginative typefaces. It’s easier than ever to include your own custom fonts in a web design using various font replacement technologies. Today, we’ll review over 30 fonts that are worthy of your own font library.
Icons
The most complete social icon set, 150+ social networking sites and icons, 9 sizes, vector icon versions, pixel perfect PSD for smaller sizes, 4 different color versions, and all free ! Now with Christmas version!
Freebie Release: 10 Hand Drawn E-Commerce Icons
This following icon pack contains 10 pieces of beautiful hand drawn e-commerce icons. These icons comes in 3 different sizes – 64×64, 128×128 and 256×256 pixels and they are all in .PNG 24 bit format.
iCandies icon set is a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces. All the icons in this pack — 60 icons in total — are designed in Round Rectangle shape.
This icon set has been carefully crafted to be pixel perfect on both normal and high resolution iOS devices. The icons contain beautiful shaded portions to give added depth and to highlight icon features. They are meant to go on the tab bar at the bottom of your app.
Useful Free Web Icons for Your Next Design
There are various useful elements to use in making your web site prominent and graceful. Web Icons is one of the most popular and useful element in design community. Today we showcase some very useful Icons those are collected from Icon Finder . Click on any image, you will be on download page. Before download you have to check the license agreement.
We are glad to release this exclusive set of 30 E-Commerce Icons, free for use in your projects. These icons come in 3 different sizes (128×128, 64×64, 48×48), along with a fully-editable and layered Photoshop PSD file for each icon.
Free Icons (with PSDs): 30 E-Commerce Icons
This year is coming to an end, so we’ve been looking back and showing you our picks for the best freebies and resources of 2010. So far we’ve covered fonts, WordPress themes,textures, and jQuery plugins, but for this post, the focus is on free icon set. There were plenty of icons released in 2010, but here’s our our favorites.
Introducing 100+ ridiculously rad social networking icons, skillfully hand-hewn and lovingly crafted for you. I’ve developed over 100 refined, amazing social networking icons for the top networks around. They’re all the rage with you crazy newsk00l intarweb kids. Use them on your blogs. Put them on t-shirts, coffee mugs, your face-space or whatevs.
WordPress
How to Create WordPress Shortcodes
WordPress Shortcodes are very useful, especially in wordpress theme development. People who buy themes aren`t experts in web design, so a shortcode will be very useful. But what is a shortcode? As the name says, a shortcode is a simple and elegant way to display complicated codes using just a word.For example: Imagine that you want to insert inside a post a nice info-box. You have to create div-classes after div-classes and finally you make it. A shortcode gives you the possibility to do this just adding “[information]lorem ipsum[/information] . That`s wicked, don`t you think?
Free WordPress 3.0+ Theme for Portfolios and Magazines: JournalCrunch
In this post we release a yet another freebie: JournalCrunch WordPress 3.0+ theme, a theme for magazines or portfolios with an integrated journal. The theme was designed by Site5 and released exclusively for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.
Minimal WordPress Theme Photoshop Tutorial
In this tutorial we will be creating a minimalistic blog layout in Photoshop. We will be using a simple grid layout and the most basic of Photoshop tools to create a fairly traditional blog layout. Once you have created the framework for this layout you should be able to go on and customise it to your liking by using different colors and fonts. The tutorial was created in Photoshop CS3 but any copy of Photoshop will do as we only use basic tools.
Key WordPress Code Snippets That Will Boost Functionality #1
With so many websites being powered by my favourite CMS WordPress, the majority all function in the same way. But today I will show you a selection of code snippets that will boost functionality on your WordPress powered website.
Awesome WordPress hacks to make your blogger life easier
WordPress hacks are always a popular topic here at Cats Who Code. Today, I have compiled hacks that will make your blogger life easier, by optimizing and simplifying how your WordPress blog works. Enjoy!
WordPress 3.0 Template Tag Reference Guide
Our Louisville KY web design team created this quick reference guide to expedite our WordPress theme development, and we found it so useful that we would like to share it with you.
17 Great WordPress Hacks You Might Need Some Day
You can find hundreds of WordPress hacks,tips and tricks and some of them might be useful but some of them might not.Wordpress is being improved by the bloggers’ help and the coders find solutions almost everything about WordPress.
15 Ways to Speed Up Your WordPress Blog
Slow WordPress Blogs turn everyone off – Google doesn’t like sites that load slowly, and readers have to impatiently wait to read your brilliant material. In that waiting time, they might even click that back button. Fast-loading websites and blogs are a necessity in the impatient information age.
Beginning WordPress Development: A Look at Common Functions
WordPress is a great blogging and CMS platform. It’s easy to use and customize, and there’s basically nothing you can’t do with it. If you haven’t used WordPress, give it a try by installing it on your own computer using a web server package like xampp orWampServer. You’ll need access to WordPress in order to follow along with this guide.
Site optimization regardless of platform will always be of some benefit to your site, Google recently decided to penalize sites that were slow loading, which will do no favors for SEO and SERPs.
22 Handy WordPress Code Snippets
It helps when coding your own themes to have an array of code snippets to hand that you can incorporate into your the theme, I have collected a huge number of hacks and code snippets over the years which I will be sharing with you in this post, I hope you find them helpfull.
Photoshop Tutorials and Resources
Today’s PSD download is a set of arrow buttons in Photoshop PSD format. The arrow button graphics come in 6 set in fully layered PSD format. Each arrow set is organized in named folder for easy identification and necessary color editing. Download the arrow button PSD and icon PNG files and let me know your thoughts.
20 Best Design Tutorials From 2010 To Create an Mind-blowing Website
A great collection of fresh high quality design tutorials created in 2010. These design tutorials will show you how to create an impressive website design using Photoshop some awesome tutorials worth checking out whether you’re a novice or professional. It would be great if you could share within the comments your favourite design tutorial featured within the post.
12 Free Repeating Pixel Patterns for Photoshop
Repeating patterns are a great resource to add detail and texture to any website or interface design. Download this free pack of 12 pixel based patterns, including diagonal lines, dots and tessellating shapes for use in your future design projects.
Design a Warm, Cheerful Website Interface in Adobe Photoshop
Not long after Webdesigntuts+ launched, we posted this excellent tutorial that details the process of designing a warm and cheerful home page in Photoshop. After high demand, we’ve started taking that completed design and we’re converting it into a standards-compliant HTML and CSS web page! Along the way, we’ll review a variety of nifty techniques that will help you to improve your own workflow.
20 Most Useful Photoshop Tutorial to Create High Quality Web Design Layout
Photoshop is a most useful and popular tool to designing a website. Adobe Photoshop has beautiful control in designing. In this article we are present some useful tutorials that really help you to create beautiful designs. Enjoy!
100 Best Photoshop Design Tutorials from 2010
This is Creative Nerds outlook upon the best Photoshop design tutorials which where created in 2010. A great source to high quality design tutorials for newbie’s or experts to skills and tips form fresh design tutorials which will enhance your Photoshop knowledge. It would great if you could share which is your favourite tutorial featured on the list.
Awesome Tutorials That Will Make You Acquainted With What Photoshop Can Do (Best of 2010)
When it comes to designing industry, the top most essential piece of software is Photoshop which is being used from retouching of photos to designing web layouts to creating original artwork and much more. Here we have collected some very useful tutorials of Photoshop that we seen in 2010. These tutorials will make you acquainted with what Photoshop can do and how to do it.
Composing in Adobe Photoshop: Time-Saving Tips
Compositing is a skill and process that spans the entire spectrum of creative industries. At the high end, compositing boasts its own specialized profession in film and television post production and visual effects. Dedicated software such as NUKE and Shake have taken the craft to powerful levels of its own, leaving behind the relatively basic compositing toolset of Adobe Photoshop. However, for many graphics practitioners compositing is a vital everyday process — and as with all pixel-pushing endeavors, Photoshop remains the entry point and hub to learning and ultimately mastering the fundamentals of this important skill.
TK Freebie: Simple Sidebar Contact Form (.psd file)
Today we are glad to release the first freebie from Themes Kingdom, a simple sidebar contact form. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the contact form as you wish.
Magazine Style Site Layout (PSD)
The download includes 3 PSDs, a homepage, a post page and a category page. The design includes various sections for featured content, advertising, social media sharing and much more – everything you need to run a thriving magazine online. Check out the full-size preview by clicking the image below.
WDL Premium: Retro Seamless Vector Patterns
Today we’re releasing a set of seamless vector patterns for our WDL Premium Members. This set from Designious has 10 vector seamless patterns and a retro look that can be scaled to any size. Go retro with this collection of patterns! This incredible pack offers you great patterns with all sorts of amazing flowers and interesting shapes. The retro style is so easy to achieve when you are working with the right tools.
Please let us know what you think of this list and stay tuned for Volume 2.
