Web Design: 20 Hottest Trends To Watch Out For in 2013

All throughout 2012 there has been an enormous surge in new web design trends. Some of you may remember my earlier post on web design trends going into 2012. Now we can see many of these ideas have come to fruition, and even adopted further increasing levels of novelty. In this article I would like to delve into 20 more design trends for the new 2013 year.
The design influence is merely a reflection of our culture and expectations for user interfaces. Ideally these trends represent favorable ideas in the web design community. However designers will always have their own opinions when it comes to design terms, so take these ideas with a grain of salt.
If you are interested, keep your eyes peeled for examples of these trends and techniques.

1. Responsive Layouts

This topic was my first point in the 2012 trend article, however I feel that responsive web design has been changing to ultimately come to a threshold where layouts are designed to match all forms of digital media. The idea is to support all devices from laptops, desktops, smartphones, tablets, and anything released in the future.

(Image Source: Chris Jennings)

You could think of this trend more like a uniform web design where the goal is to have a single set of codes which run perfectly on all environments. Responsive websites are often thought to cater towards mobile browsers, but that isn’t the sole purpose.
You can have a responsive website which also adds brilliant illustrations and graphics into the layout when the browser window is larger.
The big idea here is to think about website design as a single canvas which is dynamic and fluid by nature. CSS3 media queries allow developers to customize layouts based on limited or expanded screen real estate. Use this to your advantage and see how other designers are using it as well!

Recommended Reading: Responsive Web Design series of articles.

2. Retina Support

Along with responsive support for website layouts I have also seen a dramatic rise in people building for retina devices. Apple first engineered this idea with the iPhone 4 and has since applied this screen display onto their other devices, including the iPad and some MacBooks.

Retina screens are basically twice as dense as any average LCD. So they are the same number of physical pixels, but digitally twice as many pixels can be fitted into the same physical space.
This means pixel-perfect web designers supporting retina devices will need to create two sets of http://media02.hongkiat.com/web-design-trend-2013/. First you need to sample your image at double the resolution, then save a “standard” version at half the size. The larger image will be scaled down to the standard resolution and will look very crisp on retina screens.
One of my favorite tools for responsive web design is retina.js. This is a JavaScript library for automatically displaying @2x retina copies of image whenever your user is browsing on a retina device.
Although this won’t detect CSS background image, it is still the most handy resource as opposed to coding everything in media queries.

3. Fixed Header Bars

Using the CSS position: fixed; property is a great way to staple a header bar onto your website. As visitors scroll down your page this will offer constant support for navigation and a trip back to the home page. This trend has been around for a while but now we are seeing this in full force.

Fixed headers are so interesting because they can work on practically any website. This includes social networks, blogs, and even design studios or private companies. The design is very trendy and looks great paired with most layouts. But aside from the aesthetics, this bar also provides an exceptional user experience without needing to look very far to navigate the website.

4. Large Photo Backgrounds

Photographers or even fans of photography will definitely enjoy this design trend. I have seen countless showcases discussing the ideas of big oversized photography in the background. It’s an excellent way to capture your visitor’s attention and it can look great when done properly.

(Image Source: davidia-int.hr)

I am often fond of big photographs since they can be pleasing on the eyes. When blended into your layout, this design technique can give your website a major edge in marketing. On this topic I always consider the ever popular design portfolio of Kerem Suer. This unique background photo behaves as custom branding for everybody who lands on his website.

5. CSS Transparency

The new CSS3 properties have allowed for opacity edits on any webpage element. This means you have control to generate transparency in any modern web browser – no Photoshop required! This trend of web design transparency was recently discussed on Codrops with some very enlivening talking points.

One excellent example is on the Squarespace Blog where the central wrapper is given a background: transparent property. Typically this can be used to generate some other background from repeating http://media02.hongkiat.com/web-design-trend-2013/, or to setup the background using internal elements.
Another interesting design technique for manipulating transparency is through rgba() color syntax. When designing in CSS you have the option of specifying colors using Red, Green, Blue, and Alpha-Transparency values. So using the syntax rgba(255,255,255,0.6) would generate the color white at only 60% opacity. This is certainly a design trend we can expect continuing into 2013 and beyond.

6. Minimalist Landing Pages

Anybody who has spent some time researching markets will understand that selling on the Internet is just plain smart. You have access to a large consumer base from anywhere in the world. Additionally you can sell products which are not even physical, such as videos or creative resources.

Creating a landing page online is all about capturing new leads for your product or service. New trends are following the idea of minimalism: keep everything simple and focus on your core product.
This is exemplified on the PictoPro webpage which offers a beautiful resource for cheap icons. The page is fairly crafty using vector icons as a background effect. But all the text is easy to read and it’s basically a one-click checkout process. You cannot get much simpler than that.

Recommended Reading: Beautiful Landing Pages: Tips And Examples

7. Digital QR Codes

The abundance of mobile smartphones has led to a surge of QR Code apps. This stands for Quick Response Code and has developed from the older UPC barcodes. You will find these tagged everywhere from restaurants to event venues and automobile sales lots.

But very recently I have found a couple of websites with these codes built right into the design. This isn’t something you would normally consider since they are often found in print. But QR codes could become trendy as data transmission becomes quicker over time. You can see a brilliant example of this technique on Keith Cakes contact page.

Read Also: A Look Into: Product Marketing With Quick Response (QR) Code

8. Social Media Badges

Marketing is one of the ultimate determining factors in a website’s success or failure. Social media and viral marketing are exploding in many different websites. Digg used to reign popular in this domain but has since conceded to rivals like Reddit. But these are not the only two popular resources for sharing stories online.

(Image Source: WebTreatsETC)

You can check practically any social community for sharing badges and will likely find a great solution. You can position these badges pinned to blog posts and articles anywhere in your layout. These are still used actively by readers and fans who want to share content quickly on places like Facebook, Twitter, or even LinkedIn.
Below I have put together a small list of social media badges you can try in your own website layouts.

• StumbleUpon Badges
• Google +1 Button
• Pinterest Buttons
• LinkedIn Share Badge
• Hacker News Vote Badge
• Dzone Vote Buttons
• Free Social Media Icon Sets – Best Of
• 100+ Remarkably Beautiful Twitter Icons And Buttons

9. Detailed Illustrations

Newer design trends are all about catching and holding one’s attention. I feel that illustrations perform this task brilliantly. The problem is finding a designer who can make such impeccable works of art, or even teaching yourself.

(Image Source: twogiraffes.com)

Illustrations can be used in many various ways to bring about different moods in your website. Look around the Internet, and you will find many different website galleries and showcases focusing on digital illustrations. You can see these artistic works eventually blend into its website branding almost perfectly. MailChimp is probably the most definitive example with its trademark chimp mail carrier.

Recommended Reading: 50 Beautiful Hand-Drawn Web Design

10. Infinite Scrolling

Infinite scroll loading has been around for at least a few years. But this technique hadn’t really hit mainstream until this year and I’m sure it will continue into 2013.

Pinterest has adopted this loading technique for their layout and it works beautifully. You can search anything and the results page will continually load as you scroll down. Pagination is basically a non-issue and doesn’t even work as a detriment into the user experience. Talk about designing for simplicity!
But another great example and possibly my favorite example is on Tumblr. You can blog and reblog photos from other people you follow which all appear on your Dashboard. So after logging into your account all the most recent posts will scroll infinitely down the page.
This is an excellent technique which does not work on every layout, but for the right websites this can look and behave phenomenally.

11. Homepage Feature Tours

Sliding image presentations and demo videos are both very common with new products on the web. Landing pages and startups often try to entice potential users with these informational goodies. And they can often work very well, if you know how to construct something that looks good on a webpage.

Looking back over 2012 I would say my favorite example of this trend is on MediaFire’s homepage. The entire top portion of the page rotates between a series of slides. They each explain what you can do on MediaFire and how their features compare with other websites.
What helps this demonstration stand out is also their use of big graphics and icons. This is another trend which will not work on all websites, only for certain products you can draw in loads of attention.

12. Sliding Webpage Panels

Dynamic websites used to be very popular when Flash and ActionScript were all the rage. Now, dynamic effects have moved into the realm of JavaScript/jQuery, and this has in turn affected the way designers build websites. Sliding panels is just one technique I happen to really enjoy and would expect to see more in 2013.

Right off the bat you may not think CaptainDash is any special website. But as you click through the navigation you will learn that each page is loaded in succession pushing from left-to-right. Dynamic effects such as these do not always bode well for mobile users.
But if you can handle them with responsive design techniques or an alternate mobile site then this is a really cool effect worth trying out.

13. Mobile Navigation Toggle

When speaking of responsive design one of the most difficult questions is how to build a solid navigation. You want to give your readers direct access to all your important links, without flooding the page making it unreadable. It is also a good idea to keep your responsive navigation hidden away until it’s needed.

Enter this beautiful design trend of mobile navigation toggle menus. The Treehouse Blog is merely one example of this technique which looks brilliant on your smartphone. And even in your web browser! But there are dozens of websites and design studios who have adopted this trend for their own responsive layouts.
What I like most about the toggled navigation is that you can design menus in so many various forms. You can have links drop down from the top, or slide down, or push content over from the left or right side. Designers have so many options to play with and there is plenty of time for UI experiments.

Read Also: Mobile App Design/Dev: Building Navigation With JQuery

14. Fullscreen Typography

Earlier I mentioned using big oversized photographs in the background of website layouts. This trend can be extended to focus on typography as well: designing your webpage text so it fills the entirety of the browser. Some users may find this annoying. But this is not often the case if the layout is fitted perfectly for super-large text.

Alex Pierce has a great website layout which does focus deeply on typography. You can see this includes rich text effects using CSS3 properties. Additionally the website is very easy to navigate, and many of the other page elements appear oversized as well.
Big text with unique font styles can stand out just as much as oversized photography. And I am sure this will see more design critiques moving into the new year.

Recommended Reading: Showcase Of Web Designs With Beautiful Typography

15. APIs and Open Source

Open source software has been around for decades and has been changing the web since its inception. But over the course of 2012 I have noticed more open source software pertaining to webpage widgets, layouts, and dynamic effects. Typically we could also be talking about free website templates, layouts, or CMS software such as WordPress.

Open APIs and resources like Github allow designers to not only prototype layouts, but also animations and effects on the page. jQuery has a practically uncountable number of plugins for free download to be found all over the Web.
And I am honestly not expecting the amount of open source projects to slow down anytime soon. This truly is the greatest era to be getting started and advancing your knowledge in the field of creating websites.

16. Deep Box Shadows

I discussed CSS3 box shadows in our previous post written for 2012, and this trend has proven to be very accurate. In fact, I now almost always expect to see box shadows infused with elements in modern web designs. The effects look amazing and they rarely detract from the aesthetics except when overused.

(Image Source: rareview.com)

I believe the problems that designers had to face years ago stemmed from box shadows being too difficult to implement. Back a few years, this effect would require some type of JavaScript or direct background http://media02.hongkiat.com/web-design-trend-2013/ created in Photoshop. Now box shadows can be generated with a few lines in CSS.
I would look out for new box shadow techniques all throughout 2013. I think the trend is already deeply ingrained into the design community, now it is more about who can be the most creative!

17. CSS3 Animations

The CSS3 transition property and all the related browser prefixes offers CSS dynamic effects just like JavaScript. Designers can now animate effects on the page based on different CSS properties. I have seen a lot of nice hover effects and form input fields using these transitions the right way.

Another excellent and very inspiring example comes from a CSS alerts tutorial on Codrops. Notice how you can setup various times and settings for the animations.
This is definitely a trend which offers some promise in the coming months and years with lots of room to advance. I am confident that newer web designers will give rise to booming animations all created without the use of scripting.

18. Vertical Navigation

I was not a big fan of this layout style when I first started noticing different websites adopting this trend. However over this past year I have seen more designers creating elegant solutions with the vertical rhythm still intact. And when done properly, vertical website layouts can be affluent with content and design taste.

The portfolio on Riot Industries is a great example for newer web designers. Check out how the navigation links work and how the portfolio entries are dynamic on hover effects. Also the border textures really show a dividing line between the left and right columns.
This textured effect is apparent in other vertical layouts as well, such as the CSS gallery Design Bombs.

19. Single-Page Web Design

Single page design is a big topic and covered under many different categories. Obviously there have been single-page websites since the creation of the World Wide Web. But over the recent years we have seen this trend evolve to sport a more natural user experience.

I think the website design for Cage App is possibly one great example of many trends listed in this article. They are utilizing a single-page layout brilliantly with content split up by horizontal containers. But you will also notice the very top of the page features a blurred background photo effect.
Plus as you scroll down the page, the navigation bar actually stays fixed at the top of your window. Incorporating other popular design trends into a single-page layout is one solution for drawing attention from visitors and making one captivating website design.

20. Circular Design Elements

The trend of circles within website layouts is something newer and has been given a lot of attention recently. Designers like circles because they are clean, neat, and generally fit into any layout block. You can build patterns and even fix your page elements into circular designs (eg. user avatars, share buttons, post dates, etc).

The portfolio of Lucia Soto is basically one terrific example of circular web design. The website is built dynamically so you are panning horizontally to different segments in the page. You will notice some cute vector artwork dotted along the sidelines as well. Web designers crave these extra tidbits in page layouts because they ooze uniqueness.

source:
http://www.hongkiat.com/blog/web-design-trend-2013/

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles

• 
  
• 8
•  43

Since previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. To be honest it’s hard for me to keep up with technologies myself, but we really cannot not to use those new great selectors to make our designs even more beautiful, user-friendly and lightweighted. However since HTML5 is sort of tied with CSS3, I will soon continue with HTML5 article as well, so don’t miss it and keep coming back! Enjoy!

1. Take Your Design To The Next Level With CSS3

In this article you’ll learn why CSS3 should be used and how web designers use it already in good way. Great article for getting you started with CSS3.

2. Push Your Web Design Into The Future With CSS3

Here are five CSS3 techniques snatched from the future that you can put into practice in your website designs today.

3. Super Awesome Buttons with CSS3 and RGBA

Learn how to create super cool, scalable buttons with CSS3.

View Demo

4. A Look at Some of the New Selectors Introduced in CSS3

5. CSS 3 Cheat Sheet (PDF)

This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.(Download *pdf)

6. CSS3.Info

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more. Also check excellent CSS3 Preview page there, which shows demos of new features.

7. Get Started with CSS 3

Beautiful CSS3 tutorial article explaining several new CSS3 features and giving solutions how to create them actually.

8. Introduction to CSS3 – Part 1: What Is It?

These six part series are providing an introduction to the new CSS3 standard which is set to take over from CSS2 from DesignShack.

9. Accessibility Features of CSS from W3

This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.

10. Progressive Enhancement with CSS 3: A better experience for modern browsers

In this article you will look at how you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

11. Conversation with CSS 3 team

In this article, xhtml.com interviews Bert Bos, chair of the CSS Working Group at W3C, about the next release of the CSS specification and how past design decisions are influencing the future of CSS. This interview offers a rare opportunity to learn more about the inner workings and thought processes of the CSS Working Group at W3C.

12. Six Questions: Eric Meyer on CSS3

Great interview with Eric Meyer about CSS3.

13. The fundamental problems with CSS3

This article brings up several problems and issues with CSS3, interesting reading.

14. CSS3 Exciting Functions and Features: 30+ Useful Tutorials

In this post you will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

15. Old School Clock with CSS3 and jQuery

16. The CSS3 border-radius property (Not Valid Anymore)

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

17. Get the best out of CSS3

Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

18. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

View Demo

19. Rounded Corner Boxes the CSS3 Way

20. #57: Using CSS3 by Chris Coyier

This screencast covers many of CSS3 techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image.

21. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, your are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.

View Demo

22. 11 Classic CSS Techniques Made Simple with CSS3

In this tutorial from Nettuts you will learn eleven different time-consuming effects that can be achieved quite easily with CSS3.

23. CSS 3 selectors explained – Overview of CSS 3 selector syntax

24. 3 Easy and Fast CSS Techniques for Faux Image Cropping

25. CSS3 Borders Preview

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

26. CSS3 property tests

27. CSS3 Background Images (Sizing & Multiple Imgs)

Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now proposed that in CSS 3, we can apply background image dimensions as well as use multiple background images. Along with the +/- quick list of compatible browsers, here is how

28. Overview of CSS3 Structural pseudo-classes

29. 5 CSS3 Techniques For Major Browsers using the Power of jQuery

30. jSlickmenu: A jQuery plugin for slick CSS3 menus

View Demo

31. Multiple Backgrounds (CSS3)

32. CSS: border-radius and -moz-border-radius

33. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

source: http://www.1stwebdesigner.com/css/must-read-css3-tips-tricks-tutorial-sites/

250 Best Web Design Tips

As web professionals, we’re always looking for ways to improve our knowledge and skills. Tips, tricks and checklists are often one of the most underused yet potentially useful models of providing great, quick and easy to follow pieces of useful information.
You may or may not know some of the tips below — and you may or may not agree with everything listed — but hopefully it will give you some ideas for your own sites or motivate you to create a checklist to help cover your bases.

Perhaps a few items may even inspire you investigating a subject further, and that would be pretty awesome too.
This is the first part of a 2-part series. In this first part, we will cover planning, content creation, and design elements.

• Part 2: 250 Quick Web Design Tips (Part 2)

Planning and Getting Into the Web Design Profession

Planning what your website needs to contain can help you scale the project size.
One fundamental aspect of creating a website is the planning stage. This includes things like looking for a domain registrar and hosting package, seeking out inspiration for your design, building the information architecture, and much more.
Getting your website’s purpose mapped out will help you better write content (to match your needs) and more effectively create a design that will retain the look-and-feel you want to put across.
Below are some tips and tricks which may prove useful when you’re making decisions before putting your (or your clients’) website together.

Picking Domain Names

1. Many people are used to seeing the www at the beginning of a website address (e.g. www.sixrevisions.com). Ensure your website functions both with and without this famous subdomain.
2. Reserving a subdomain called m (e.g. m.sixrevisions.com) for mobile devices has become a common web design convention. It’s cheaper than — and as widely recognised as — the .mobi top-level domain (TLD).
3. Most of the non-technical general public tend to only recognise .com, .net and .org. It’s worth checking the TLDs you want are available before dedicating yourself to a brand name.
4. Avoid using dashes in your domain name. (e.g. sixrevisions.com versus six-revisions.com).
5. Domain hacks like del.icio.us have become pretty popular, and while they may be harder to spell, they can give you an awesome alternative to a simple but unavailable .com address.
6. If you want to target a local audience, it may well benefit you to purchase a country code top-level domain (ccTLD) in your own country. Something like co.uk may be great for grabbing regional visitors in the UK.
7. Remember that some ccTLD domains require you to be a resident of a certain country. If you don’t live there, you could forfeit the TLD as a violation of the registrar’s agreement.
8. WHOIS privacy can be a dicey affair when you allow your registrar to put their details in place of your own. You run the risk that you may lose the domain if a conflict occurs.
9. Domain auctions like Sedo can be a great place to get a domain that’s already been taken. While it can be somewhat expensive to pick up a rare domain, you might find yourself the owner of your preferred domain name.

Web Hosting

10. When picking a website host, ensure that you check what you’ll get in the package. Disk space, bandwidth, CPU usage and other specified features may decide the cost you’ll encounter. If you already have a web host, test their performance using these tools.
11. Beware of hosts proclaiming unlimited bandwidth or resources. Everything in this world is finite and you may find yourself falling short of contractual small print and fair use policies.
12. If you’re starting a website or service of your own, it pays to start off with shared or grid hosting rather than a VPS or dedicated because you won’t know how many visitors you will need to cater for.
13. Free hosting for commercial use is not a good idea. If you plan on having a commercial website, it makes sense to avoid the intrusive advertisements and purchase some basic web hosting.

Development Platform

14. If you want to have a good testing environment that will run PHP and mySQL on your own PC, install XAMPP. It’s quick, easy and will help you get things running before you go live.
15. Unless you know what you’re doing and have the money to finance the infrastructure, hosting your own website may not be the best or most economical idea (as fun as it sounds).
16. Pick your development platform carefully as some products (such as WYSIWYG editors) inherently produce less reliable code than a classic text editor that allows you to write by hand.

Tools

17. You don’t need to rely on Adobe or Microsoft software to create a fantastic website as there are lots of free and open source products which can do the job without cost.
18. Ideas: GIMP, Inkscape, Dia, FileZilla, IcoFX, Audacity, Paint.NET, Scribus, Eclipse, Skype, KeePass, Xenu Link Sleuth, Tweetdeck, FoxIt Reader and Notepad++ are great free products for designers. For more great open source products, read the article called 30 Useful Open Source Apps for Web Designers.
19. Finding a good selection of checklists and cheat sheets can give the fledgling designer some quick, easy places to get advice on how best to approach a task.

Project Management

20. Set yourself aside a decent workspace environment. The less distractions your workspace has, the better off you will be in terms of productivity.
21. Always have realistic expectations about how long a project will take to complete. Rushing your work and releasing it "half-baked" can cause issues — just look at Windows Vista.
22. Getting some decent time-tracking or project management software is important. It’s far too easy to get distracted and lose sight of the big picture if you’ve lots of small tasks to achieve.
23. To-do lists may seem inconsequential and rather trivial, but you may find them useful in structuring all the various tasks you need to deal with and setting yourself deadlines.

Learning

24. Always keep learning because there is no excuse in allowing your education to lapse or become deprecated. You could keep up to date with news through design blogs or perhaps learn a new web language.
25. There are many fantastic web design books and magazines out there. They also cover a wide range of subjects with ever-increasing depth as a source of education they are second to none.
26. Web resources like Six Revisions are great for learning new techniques. While perhaps not as in-depth as books, many web resources offer you useful and up-to-date advice on the web industry.
27. Remember to verify anything you learn through a third party resource. There’s an awful lot of outdated information out there (like W3Schools) that could encourage bad habits.
28. Sites are beginning to teach classroom-style lessons and video-based instruction classes (e.g. Lynda.com) on web design and development. They can get pricey, but may be good alternatives to a degree.

Specialization and Competitive Analysis

29. There are many sectors you can work in as a web professional (web designer, UX, UI, front-end development, etc). You shouldn’t restrict yourself to a core subject unless you know exactly what you want to end up doing.
30. Whether you decide to become a Jack of all trades or a specialist is entirely up to what you prefer. It’s worth noting that there is enough work in the industry to cater to both work styles.
31. Investigate what your competitors are doing with their services as you can learn so much from the mistakes or successes that others have had — they can be a goldmine of ideas.

Learning About Your Target Audience

32. Research is the mother of all invention if you’re going to work on any project. It pays to ensure what you’re planning will meet the needs of the audience you’re trying to gain.
33. Always try to be inventive with what you create. There’s no point cloning another successful website when you could improve upon it to convert some of their existing user base.
34. If you plan to produce a blog or an informative website, ensure that you know your subject. Trying to create a medical blog with no knowledge is not a good idea. You should be passionate and be well read about your subject matter.
35. Seek out the kind of people who might want to use the service your planning and ask them what they would like to see in such a website and what popular topics is worthy of inclusion.

Inspiration

36. If you’re stuck for ideas for what kind of site to create, browse around the web looking for subjects that are popular. You could serve a niche market where there’s existing demand.
37. Finding inspiration for a site can come from the most unlikely sources. Watching movies or TV, taking a walk, or even talking to your friends and family can help you get business ideas.

Handling Data

38. Deciding whether you need an SSL certificate or not depends on whether sensitive personal details like credit cards or login information will be processed. It may be worth buying one.
39. Handling your customer’s information is of critical importance. Never store passwords as plain text documents and do what you can to encrypt details that are stored in databases.

Conceptualization and Information Architecture (IA)

40. Creating a visual sitemap before you start building the website can do wonders for your core structure. If you know what pages you may need initially, you can plan the content ahead.
41. Certain types of websites require certain types of documents. Most portfolio websites, for example, have a contact page. Seek other likeminded websites to get required page ideas.
42. When in doubt, always do what works and the norm. There’s a reason why certain types of websites succeed. It’s because they follow conventional practices that visitors will adapt to quickly.
43. Concept sketches are useful for developing your ideas. Sometimes a piece of paper or a napkin with some doodles can assist you in turning what’s in your mind into a workable design.
44. Wireframes are a simple, underused method of planning and plotting out an idea. You can create something as simple as basic shapes, right down to mapping out your site structure.
45. Beyond wireframes, you could also consider a working prototype when planning your site. Mocking up a quick and simple website can eliminate potential feature flaws quickly and easily.
46. Brainstorming is another fantastic but underused method to evolve your business or website ideas. Picking a loose concept and mapping related ideas to it can give quick but abstract results.
47. Some site owners write a business plan to scope out a project’s evolution before it happens. If you find yourself too easily distracted, it might prove to be a useful document to make.
48. Determine what kind of person you are, and the way you use websites. It’s quite subjective, but provides a good grounding point in conceptualising how an idea can become a real product.

Miscellaneous

49. Products like EverNote or Microsoft OneNote provide you with a great platform to gather and store research and ideas. Think of it like a sketchbook you can turn to for inspiration.
50. Never give up. It’s so easy to think an idea has fallen flat, and most people tend to move on far too quickly. Most ideas can become what they’re intended to be with enough hard work.

Content Creation

Even something as simple as an About page should have purposeful content produced.
Everyone keeps reiterating the same term over and over: "Content is king" has almost become a mantra which writers of web copy sing from the rooftops. And they’re right to do so!
Whether your content is provided in textual form, vivid imagery or some beautifully implemented audio and video media, ensuring your website’s content is up-to-scratch will help you turn visitors into customers.
When you come to producing the content that will help visitors understand what the website is about, the following tips may give you some relevant advice to keeping your users hooked.
51. There is more to content than text. Providing polls, infographics, or interactive elements that have content-based value can help improve the interest and readability of on-page information.
52. People respond to engaging prose.

Copyright, Content Licensing and Legalities

53. If you’re intending to build for other people, ensure you have some good solid contracts to work from. You don’t want to be unprepared if the client refuses to meet their obligations.
54. Creating paperwork such as invoices, receipts of purchase, questionnaires (for contract work) and other useful materials will reduce your workload if you start doing freelance jobs.
55. Word of mouth constitutes a binding contract, though it’s harder to prove you shouldn’t say you can or will do something unless you fully intend to follow through what you state.
56. All services should have good terms of service, privacy policy and copyright agreements. It’s important that your end-users know what you expect from them (and that works in reverse)!
57. You don’t need to have a copyright statement on your website (though it’s good as a reference). Ignorance of intellectual property does not qualify as a valid excuse.
58. When deciding how to license your finished design, you may want to check out creative commons or open source licenses; they’re pre-written and flexible (which is great).
59. A cheap way of writing agreements or contracts for your website is to examine others and then write your own based on it. You can save yourself a lot of money in potential legal fees.
60. Avoid legal jargon whenever possible and simply state outright what you want to say in an agreement. Your clients will be more likely to read what you say if they can understand it,
61. If you write your own contracts, it might pay to have them read over by a lawyer to get them as watertight as possible. Verifying is often cheaper than having it custom written.
62. Accessibility statements aren’t as important as they used to be (as being natively accessible is more of a requirement), but providing one may be useful to your website’s audience.

Content Formats and Considerations

63. Get the hang of compression — whether it’s using GZIP for content, caching for external files or squeezing extra bytes from images and media. It will increase the speed of your website.
64. Consider the best image format for what you are trying to achieve, while GIF makes for good basic animations, JPEG or its less lossy friend PNG will be better for high-resolution photos. Read The Comprehensive Guide to Saving Images for the Web for more information.
65. Be careful as to what you use images to portray. Not everyone can see images (like search engines) and this may present readability problems if you use them in place of text.
66. When adding video, audio or graphics into your site, make sure alternative content is available for those who cannot take advantage of these mediums due to accessibility issues.

Images

67. Opacity in images is a tricky issue with Internet Explorer. There are fixes for issues in IE6, but you should remember that only full alpha transparency has issues, not single colors.
68. Your logo is one of the most important aspects of your website as it’s what people will recognise you for. Therefore, it pays to have a good, memorable one created for your brand.
69. While the favicon is one of the smallest graphics you’re likely to encounter on a website, it provides a fantastically unique way of gaining recognition in bookmarks and social networks.
70. Producing an Apple touch icon at 57×57 pixels can be useful for users of the iPhone, iPad and iPod touch who can proudly display your site in their home screens (using web clip).
71. There are loads of sites that provide free stock images, audio and video if you’re not much of a pixel-pusher.

Content Writing

72. Even if you’re not an articulate individual, trying to ensure that your spelling and grammar are correct should be at the top of your agenda.
73. If you’re at a loss for what to write, taking a break or using one of the many techniques to help remove writer’s block can prove indispensible to the content creation process. See the Content Strategy category for tips.
74. A simple way to reduce the complexity of content is to take what you have and boil it down to 50%. It may seem a lot, but reductionism can seriously help eliminate the waffle!
75. Writing your content before you start designing your website can help you better approach the coding stage as you can pick the right elements that describe your content’s value.
76. Content is king. If you sacrifice the quality of the content for the design of the website, your visitors may likely hit the back button in their browser and never return as a result.
77. Much of writing for the web is down to practice. Don’t be afraid to start off small with the likes of Twitter or forum posts before building up your credibility as a web content writer.
78. Making content fun and involving is important to being successful. While dry humourless copy might get across the point, being quirky will emote passion.
79. Never be afraid to ask for help and feedback or get colleagues to proofread what you have to say. Often, a bit of critique will help you become a better professional.
80. When linking to another website, ensure you notify the visitor of how the target site relates to the content or element of the website so they don’t end up at an undesired location.
81. Break your content down into easy to manage segments. Using unordered lists, for example, can help increase the content readability.
82. Fluff and poor quality marketing speak is unnecessary. Always keep to the point and avoid redundant technical language. We all hate junk and in the recycling bin it all belongs.
83. Ensure that what you say is factually correct. Citing references will give your words added credibility.
84. Don’t plagiarise or steal other people’s content. If you find people stealing yours, it’s worth taking the time to learn how to send DMCA takedown notices and cease and desist letters.
85. When writing content of your own, simplicity is valuable. If you can strike a balance between being informative and being overly wordy, you could avoid wasting your reader’s time.
86. Don’t span long documents over multiple pages if you can avoid it. Such practices can reduce the readability of content as readers will be forced to break their natural flow to jump pages.
87. If you’re planning on having a blog, ensure that you state if you’re reviewing something and have been paid to do so.
88. There are so many fantastic CMS solutions (i.e. WordPress). If you find less technical people are going to contribute to a site you make, they can be ideal in removing some complexity and speeding up content production.
89. Consistency is important with everything you write. Maintaining a core set of standards and values helps ensure regularity.
90. Always try to put across information in a friendly and non-aggressive tone. Being overly sarcastic or rude can lead to arguments that can degrade the value of your content.
91. Feedback can be just as important in content writing as the written material itself. Using blog comments, for example, can give entertaining and potentially informative extra reading.
92. Write for people, not search engines. Your users are more important than your Google PageRank.
93. If you plan on providing translated content for international users, nothing beats a human translator. With that said, there are some decent translation tools out there.

Multimedia Content

94. If you create a podcast for your website, a good compression-to-quality ratio is 96kbs MP3 (for voice recordings). Large file sizes are a pain, and at this level, you can save a lot of bandwidth.
95. MP3 is arguably the most compatible audio format around. If you’re providing alternative formats like OGG or FLAC, then ensure an MP3 version exists for more restrictive audio players.
96. Embedding Windows Media Player or Apple QuickTime into a page may have problems if people don’t have the players installed. Flash has a higher market penetration than both.
97. Automatically playing music is a sin — it’s annoying, so don’t do it.
98. Remember that Flash-dependent components are not reliable: People with vision and hand-mobility impairments limit them in accessing a lot of Flash-based content.
99. If you are planning to provide content through email, keep subscribers’ email addresses private (don’t use the CC feature when sending out emails en masse).
100. Don’t spam or send out heavy streams of email – people hate it.

Design Elements

Color is a critically important part of your design as it may invoke or reflect emotion.
One of the most subjective parts of creating a website is its design. Whether you’re looking at accessibility, usability, the user experience, or even something as fundamental as the psychology of color, giving your users the best possible experience with as little effort as possible can prove tricky.
101. Your web design does not need to be pixel perfect. Every device, platform and browser render things slightly differently but that’s not always a bad thing if your site’s still usable.
102. If you are requesting users to sign up for a service on your website, always keep the amount of required information to a bare minimum. Keep things simple.
103. Keeping file sizes as small as possible is important for improved page response times.
104. Mobile web designs should be simple. If you have less content, no Flash dependence, a single column layout and a liquid design, you should have few problems with visibility.
105. mobiForge has an excellent mobile web development guide that is full of best practices and some useful guidelines to helping make the mobile experience better for your end-users.
106. Don’t rely on fixed-width designs. Toolbars, sidebars, add-ins, viewport sizes, window sizes, screen resolutions and many other factors can affect the amount of real estate available to users.

Colors

107. Color can invoke a wide range of subtle psychological influences over people. Knowing how to use color and various contrasts may help you better engage with your audience.
108. Consider how people associate color with feelings: red for hot, blue for cold, white with purity and clarity, black with darkness and death, yellow with happiness and sunshine, etc.
109. Contrast is important when using colors. For certain people like the color-blind, the ability to distinguish various shades may be diminished and they may struggle to read content.
110. The idea of web-safe colors is relatively redundant due to the way screens have evolved, but making sure your site is color accessible for visual impairments is worthy of your consideration.
111. Color theory and harmony are important parts of design. Understanding how such devices influence the way information is perceived is worth studying.

Typography

112. Typography is an ever-increasing variable of importance within web design. As the range of fonts that can be used within designs increases, the legibility of those fonts becomes vital.
113. Producing a font stack is easy! Have your chosen font followed by an alternative that looks similar, then its closest relation that’s likely to be available, and finally the type (like serif).
114. Size is another variable of typography within design that you should consider. The larger the scale, the more readable it becomes and the increased attention it will receive.
115. Giving emphasis through styled italics, strength through bold visual styles or underlying and striking through content can affect the perceived importance design elements receives.

Arranging Design Elements

116. White space/negative space is a valuable commodity. Don’t pack your design full of stuff! Having enough breathing space will improve the readability of your design and help the reader "scan."
117. Scanning is the act of an end-user flicking through content on your pages to determine the information they are looking for. The ease they can do this will affect how they use your site.
118. Websafe typography is a big deal unless you embed a font (which has legal implications). You can’t guarantee the end-user will have any font installed, even common ones like Arial.
119. Organising your information on-screen can be a tricky task. Using conventions and patterns like the logo appearing in the top-left hand side can improve the ease of use for visitors.
120. Knowing how to appropriately display content like navigation menus is an art form and a science. Seeing how others implement such devices can help measure success rates; check out the site called Pattern Tap for common design patterns such as site navigation.
121. Remember that most people read content in a left-to-right manner. Therefore, it makes sense to have important details as high and as far to the left as possible in your design.

End-User Considerations

122. Your design should directly reflect the needs of the end-user. Don’t pack it with useless features and widgets like clocks or weather applets. Only give them what they need, as they need it.
123. When updating your website (which you should do often), check your website statistics to see how people navigate around your website. It can be helpful to find where issues occur.
124. Understanding how people perceive and respond to your brand can be the difference between trust and abandonment. Your visitor’s views are more important than your own.
125. I’ve noted it earlier, but it’s worth reinforcing: update your website often! People gauge the prevalence and accuracy of websites by the rate at which they are maintained.
126. If you have the time, consider reading about psychology and sociology topics. They’re not strictly dedicated for the web, but they apply in so many regions of the industry that it’s worth learning about.
127. Don’t design a website for yourself. As much as you may like that scrolling animated reel you just implemented, you will spend little time visiting the website compared to your audience (who matter).
128. In a websites design, people look for an experience. If you give them something positive to remember, you’ll give them satisfaction, which may result in a long-term relationship.
129. The satisfaction a user gets is directly related to the way you provide information. If the user struggles to find their way to a document, you’ll make them angry.
130. Interaction-based design is important. While static content has uses in certain situations, giving users something to explore and play with will result in a more memorable experience.
131. Unnecessary interaction should be eliminated from the project. While subtle or useful enhancements are great for the end-user, added barriers may cause a user to abandon ship.
132. Applications tend to follow different rules to conventional content distribution. A need for logical structure and purpose will be of increased importance within the user interface.
133. If developing apps for a mobile device, it may prove useful to attempt an offline version for when Internet access is not an option. Dead zones for cell phone signals still exist.

Web Accessibility

134. Accessibility is an important aspect of any web design. If certain people can’t access the site or the content, that’s a group of people who you could have converted to a customer.
135. Numbers in relation to accessibility are highly biased. Don’t think of people with disabilities as a minority; just think of how many people need glasses for reading — that’s a major one!
136. Impairments come in all shapes and sizes: they can be physical, intellectual, emotional, social or even technological (e.g. people without broadband connections or people using mobile devices as their browser agent).
137. The scale and duration of disabilities differ: someone may be paralysed (which would be long-term) or they may have a broken arm (short term). Don’t just think of lifelong issues.
138. There are plenty of helpful specifications and laws in relation to accessibility. Have a read through WCAG 1 and 2, Section 508, PAS 78 and the Six Revisions guide on quick web accessibility tips, to name a few accessibility guidelines and best practices resources.
139. Always provide alternative content for images or media and don’t rely on <img> elements without alt attributes or Flash content without text variants. You’re hurting some of your visitors.
140. Checking your work in a screen reader is quite easy to do. There are free tools out there such as WebAnywhere, a browser-based screen reader simulator, as well as commercial alternatives like JAWS that you can install and test your website through.
141. Don’t become too reliant on tools like Cynthia as accessibility validators because these tools only examine machine-readable code. They’re not perfect solutions for checking your design, semantic structure, content flow, and visual elements of accessibility. Read more about the problems with website validation services.

Usability

142. Usability.gov has a selection of great guidelines in PDF format that can help you improve a website for your end-users. These PDFs are well worth reading through to see what they can offer in your design process.
143. Steve Krug and Jakob Nielsen are two highly respected experts in the field of usability. If you pick up books they have written, you’ll find lots of fantastic usability guides in them.
144. Usability is about making a website as seamless and functional for the end-user as possible. Do whatever you can to help users find and accomplish what they set out to achieve.
145. Before you launch a website to the general public, it’s worth getting a group of people together to test out your design and find any bugs which exist in the system and to see how usable your design is.
146. Carrying out a usability study can be as simple as asking a group of visitors to carry out a specific task and getting their feedback in the form of a questionnaire to improve upon.
147. Ensure your design degrades gracefully to create a usable design that is as universally designed as possible.
148. Progressive enhancement should be what you aim for. Simply put: you want to make sure everything can be used at a core level, and increase functionally for devices that can cope. A scenario would be using CSS3: make sure that your design still works and looks decent on browsers that don’t yet support CSS3.
149. Encourage people to get involved in helping improve your design. Ask for useful critiques and feedback that can give you future website evolution ideas.
150. Keep striving for perfection. It’s probably not possible to have a perfect web design, but if you always aim for the best, it’ll encourage you to continue making an effort in maintenance.

source: http://sixrevisions.com/web_design/250-quick-web-design-tips-part-1/