Search
Categories
IMG_1645.JPG

Using Color Theory to Improve Website Accessibility

There are tons of articles and guides about color theory and its importance for every web designer. Colors are really essential in design and may even influence people’s behavior in many cases. Thus, web designers usually check their website colors are suitable for the overall website style and that they create a good impression for users.

But focusing on standard color theory web designers often miss one point. There is a small amount of people who see colors differently. The specifics of their eyesight don’t allow those people to see particular colors the way other people do. Your beautiful website with colorful accents may simply not work for those people. Since color blindness affects about 6% to 8% of males and less than 1% of females you could lose a significant amount of potential customers.

Improve Website Accessibility with Color Theory
Why Be Accessible?

Paying attention to website accessibility in terms of color combinations gives you many benefits. You can still make a great-looking website with an excellent color palette but you can also please lots of people with visual disorders who can now access most of your website’s features. Here are a few more reasons for you to choose accessibility for your website design:

  • It allows you to score an advantage before your business competitors. If your website is color-blind-friendly and your competitor’s is not, you may win the battle and get more repeat traffic from this category of people.
  • Accessible websites may rank higher with search engines.
  • Non-accessible websites may fall foul of legal issues because they don’t provide equal opportunities for people with visual (and other) disabilities.
  • The ethical aspect is also important. People with visual disabilities simply cannot use non-accessible websites in full. It’s frustrating and really hurts UX.

Despite your possible fears, making a website accessible for color blind people is not such a hard task. In fact, sometimes it’s even harder to make a non-accessible website. With proper planning and a clever use of color theory and color contrasts you can create a really cool website with a great UX.

Accessibility Challenges

Of course, making the website 100% user-friendly for ALL kinds of users is an impossible mission. First, it’s hard to determine how exactly color blind people see colors. To tell the truth, even average users with no color blindness perceive colors and hues differently.

There are researches that cast some light upon the idea of how colors are perceived by people with different types of color blindness. But they are not absolutely accurate, so predicting what a color blind user sees is still a challenge.

You can always prioritize website elements and content to improve it and make sure most people will see it properly. There are many ways of making vital elements stand out and user-friendly. And you should definitely make sure that those essential elements are color blind safe. The best way of doing so is using contrasting colors for the background and the element itself. Thus, the traditional use of black text on a white background is determined by the high contrast between those two colors. Navigation elements should also be highlighted so users can easily differentiate between links and the main content.

Using Color Theory for Color Blind-Safe Design

The very first step in creating a color blind-safe website is choosing legible and well-matching colors for your color palette. Your task is setting aside color meaning and psychology and focusing on good color combinations and contrasts for creating legible website pages with strong hierarchy and accents.

You can use the following techniques and approaches to avoid possible pitfalls and have an accessible website design:

1. Avoid “Bad” Color Combinations
The most common types of color blindness are the difficulty of distinguishing between red/green and yellow/blue. So, avoiding those combinations can save you from offering a frustrating experience for color blind users. Other “dangerous” color combinations are:

  • brown/green
  • green/blue
  • purple/blue
  • grey/blue
  • green/grey
  • black/green
  • yellow/light green

Bad Color Combinations

2. Color Contrast is Good
As you may notice, the “bad” color combinations above are inappropriate because they are poor in contrast. Yellow and light blue colors are too close in the amount of light so they will be extremely difficult for color blind users to distinguish between the two.

Remember that color blind users should be able to easily tell the difference between two colors, like ordinary people do. It doesn’t matter what colors exactly they see; it’s about them being able to perceive them as two different colors. Note that color blind people are reportedly better at perceiving bright colors rather than distinguishing the difference between dull ones.

3. Use Complementary Colors
Complementary colors (the ones that are opposite each other in the traditional Color Wheel) are the best for achieving a great color contrast that won’t affect color blind users. Of course, except for pairing red and green colors that are also opposite in the Color Wheel but are a big no-no for most colorblind users.

Paletton

4. Choose Cool/Warm Color Contrasts
The Color Wheel can also be divided into cool and warm tones. Just divide it in half to set cool colors like blues, purples and greens aside from warm tones like yellows, oranges and reds. In most cases, contrasting between cool and warm colors works perfectly well and can be used for creating accessible designs. The idea is to combine a darker shade of a cool color with a lighter shade of a warm one. Don’t forget, that some color blind users have a yellow/blue type of visual disorder, so it’s better to avoid this combination.

5. Opt for Monochrome Palette
To make sure you’re not using some poor color combinations that can be not color blind-safe, go for combining several tints of one color. Monochrome design saves you from making the wrong choice. In addition, a monochrome palette and minimalist style go hand in hand and make your website really trendy and user-friendly.

Slayeroffice Color Palette Tool

6. Use Texture and Thickness for Creating Accents.
Adding texture to one of your colors makes it more prominent and helps to show the difference between two objects. Thick lines and bold text will be helpful as well. Some color blind people note that they can differentiate between two colors if they have some “weight”, while thin lines and text in italic are much harder to differentiate.

Tools and Resources for Designing Color Blind-Safe Website

There aren’t too many tools and services that are focused on creating websites safe for color blind users. You can always check color combinations on various color palette generators and look for complementary colors, as I advised you above. Here are a few more tools and resources that should help you in creating a website that is easy-to-use for color blind people.

Vischeck

A nice simulator that runs tests on images and web pages. With its help you can find out how people with different types of color blindness (forms of red/green or blue/yellow color deficit) perceive them, and build your website according to the results.

Vischeck

Colors for the Color Blind

A great resource that contains tons of info about the nature of color blindness, its types and their peculiarities. It also offers various tests for colorblind users and tools for checking website colors online.

Colors for the Color Blind

MotoCMS 3.0 Color Picker

This website building service offers a nice tool for checking colors. It automatically shows a color palette of a chosen template with 5 main colors and a row of hues for each of them. You can change the main colors and add new ones from the row below. The changes to the color palette will apply across the entire template.

MotoCMS 3.0 Color Picker

Color Blind Web Page Filter

This tool is still in development. But it already offers a cool range of filters that allow you to interpret your website as it is perceived by color blind people. You just enter your website URL in a field and choose one of the color deficiency types to check.

Color Blind Web Page Filter

Color Laboratory

This tool allows you to check how the 216-color webmaster’s palette is perceived by people with different kinds of visual color deficiency.

Color Laboratory

Conclusion

Of course, website accessibility is not only focused on color blind-safe features. There are other aspects that you should consider to make your website friendly for all types of users. Start with tests and check often to make sure your website is comfy for use and your traffic will grow.

IMG_1643.PNG

Bonsai.js – An Intuitive Graphics API and SVG Renderer

Bonsai is a lightweight graphics library with an intuitive graphics API and an SVG renderer. Bonsai’s main features include: Architecturally separated runner and renderer, iFrame, Worker and Node running contexts, Shapes, Paths, Assets (Videos, Images, Fonts, SubMovies), Keyframe and regular animation (easing functions too), Shape/path morphing and much more…

Screen Shot 2015-07-24 at 11.56.25 pm

Requirements: JavaScript Framework
Demo: http://bonsaijs.org/
License: MIT License

IMG_1646.JPG

40 Free JS Libraries for Dynamic Content

00-featured-lighthouse-parallax-plugin

Designers and developers can recognize the vast improvements in modern web design. From animated SVGs to customized web forms and movable typography, the list is practically endless. Dynamic content is the new norm and JavaScript libraries only make creation easier.

If you’re looking for some cool dynamic effects on your website take a look at these open source plugins. Everything in this list is completely free to use on any project. Most plugins also include fantastic documentation to get everything setup and running lickety-split.

TextFill

jquery textfill plugin

Layzr.js

layzr js javascript plugin

Address Field

jquery address field

Sheetsee.js

sheetsee js open source library

Parallax.js

parallax js library

jQuery Carousel

jquery image carousel plugin

contextMenu.js

context menu js javascript

Stacktable.js

stacktable js open source plugin

Spin.js

spin js open source plugin

AniJS Studio

anijs javascript studio plugin

Quovolver

quovolver jquery plugin design

nanoScroller.js

nano scroller scrollbar js

Windows 8 Modal

win8 modal window

Readmore.js

read more js open source

Textillate

textillate js plugin

Underscore.js

underscore js open source plugin

Immutable.ks

immutable typography javascript plugin

Awesomplete

awesomplete lightweight plugin open source

flexibleArea.js

flexible area js open source

Bacon.js

bacon js javascript open source

Slick

slick carousel js javascript

Infinity.js

infinity js open source plugin

React Components

react components plugin

dgrid

dojo grid plugin open source

SlipHover

slip hover js javascript

PourOver

filtering sorting library javascript pourover

Bootbox.js

bootbox.js javascript open source

Mostslider

javascript most slider plugin

jQuery Confirm

jquery confirm plugin open source

jQuery PowerTip

jquery plugin powertip open source

Grumble.js

grumble js javascript plugin

Filtrr.js

filtrr filter javascript plugin

tQuery

three js jquery combined library

Flexloader

jquery responsive flex loader

Cropper

cropper design custom plugin

Materialize

materialize css js open source

Parallax Scrolling

js parallax scrolling open source

Facebox

facebook style lightbox plugin facebox

ElementTransitions.js

element transitions js javascript open source

Gauge.js

gauge js open source plugin

Web Design Ledger

IMG_1642.PNG

Essential Tools, Resources, and Services for Designers

With so many WordPress themes, page builders, and other design aids and services on the market, it can be difficult for a web designer to know where to turn when in need of a new tool, an additional resource, or a different design approach. Some of the products and services listed here are ideal for general use. Others are excellent choices for designing websites or apps intended to serve a unique or dedicated purpose.
If you find a product or service here that suits your design needs, you can be assured it is top quality, or it would not be on this list. Browse through this list and find out what are the most essential tools, resources and services to have in your toolbox.

WordPress Themes
X Theme

1

X Theme is exciting. It always has been, but with the release of Version 4 a new level of excitement has been attained. Users of this recently released version are raving about it, with the centre of attention being a new, unique, and innovative page builder – Cornerstone. Cornerstone is highlighted again in this listing, but what it will do for X, the fastest selling of the Themeforest themes, is make it more popular than ever. Cornerstone may have temporarily placed a number of the other X features in the shadows, but they remain as impressive as ever, and everything about using this premier WordPress theme’s features is backed up by a rock-solid, 24/7 user support team, a dynamic community site, and forums offering information, advice, and details of other user’s experiences. With a purchase of X, you are given free access to all Themeco plugins, and you will also receive free updates as they are released.

Enfold

2

Visit Enfold’s website, and the first thing you are asked to do is to Choose a Demo. If you do so, your search for a premium website theme will quite possibly come to a halt. This top-rated, multipurpose Themeforest theme’s primary characteristic may well be its extremely user-friendly operation. It may in fact be the easiest to work with website building theme on the market. Start with a blank page and an idea, and you can build any layout you want at warp speed. Enfold is always kept up to date, and you will always receive updates as they are released. You can also expect to receive nothing less than the very finest user support.

Be Theme

3

Be Theme is every bit as big as it claims to be. Its more than 40 core features give you every website design capability you are ever likely to need, and this responsive WordPress theme is easy to use from the time you select one of its 100+ pre-made layouts and begin your editing and page building process until your design is complete. The largest number of topical layouts you will find anywhere makes Be one of the most versatile themes on the market, and the layouts are in the eyes of many this premier theme’s number one attraction, and the reason for its immense popularity. User support is exceptional as well.

Website Builders and Platforms
XPRS

4

If you liked playing Lego as a kid you are sure to love XPRS. Unlike drag&drop website builders, this one uses pre-made and easy to customize content blocks that you can connect into 1 beautiful website. There are tons of content blocks to choose from with different layouts and style (e.g features, call to action, teams, galleries, pricing and more). You can also add a store and it’s totally free with every package.
This method of building websites makes it very simple to create your own website while still allowing professional designers a full control over the details.
XPRS if totally free for artists and students and also offers a great ‘White Label’ package that includes unlimited websites for just $ 250 a year.

Webydo

5

Webydo is a cloud-based design platform for professional designers with a code-free, full-service business solution that empowers design professionals to lead the responsive website creation market. No other platform in the market provides a comprehensive, A to Z, solution. Webydo is a community-led platform, with professional designers determining which features that platform should  or should not have. Webydo is all about reshaping how we create for the web and in order to foster putting the designer in the driver’s seat. What is more, with Webydo’s Full White Label’ option designers can present Webydo’s technology as an integral part of their own design brand by customizing the system colors, adding logos and presenting a fully branded CMS and Dashboard to their clients.
WordPress Page Builders

Cornerstone

6

Cornerstone is a brand new page builder. It is ridiculously easy to use, and it has received a ton of attention. Users are raving about it. The 100% front end editor and preview functions are displayed side by side. When you make an edit, you can instantly see what your web page will look like. There is no need to check later to see what needs fixing.

Themify Flow

7

Themify Flow is a powerful framework that enables you to design your own responsive themes within WordPress (it allows developers to do so as well). It features a drag and drop builder with a sidebar display in which you can style elements as they appear in the live preview of the layout you are building. Each template you design can have its own header, sidebar, and footer versions. Themify Flow is open source, and free to use!

Project Management and Collaboration Tools
Nutcache

8

Nutcache saves important things until you need them. This project management tool has to be one of the better collaborative solutions you are likely to come across. You can use it to organize a project, or use it to present a collection of diverse ideas in an organized manner. Project status can be displayed in easy to comprehend graphics, and Nutcache gives you an easy and seamless way of tracking time, submitting invoices, and getting paid!

Azendoo

9

Azendoo offers a more relaxing, less stressful way for you to go about your work; efficiently, and without compromising quality. This intuitive project planner and task manager helps you avoid getting caught up in the rat race, and still focus on your priorities. This collaborative teamwork tool was designed with marketing and design teams in mind. It provides a nice alternative to the necessity of setting up a cumbersome organization.

Converting Designs to Code
PSDGator

10

PSDGator is a small, highly dedicated team that has become well known for producing impressive results. They make PSD to code conversions quickly, and they specialize in taking Photoshop designs and converting them into responsive, hand-coded, SEO optimized HTML/CSS. The finished product is clean code that has been optimized for speed. One of their more thoughtful services is their policy of first reviewing your design to uncover any potential problems before they undertake a conversion process.

40 Dollar Markup

11

One good reason for looking into 40 Dollar Markup for PSD to code conversions is their ability to provide clean, hand-coded, pixel-perfect code that is optimized for speed. Automated coding tools, with the inefficiencies they can introduce, are never used. Their deliverables are fully supported, and if you have an entire website you would like to have converted to responsive code, they will take it and make the necessary conversion for you.

Direct Basing

12

Slicing is what Direct Basing does best, and they do it well. In addition to standard HTML5 slicings, their other featured services include PSD to Email and Resposive HTML5 slicings. Direct Basing also has a team dedicated to converting your PSD to a WordPress template. Their customer base ranges from freelancers and small businesses, to Fortune 500 companies. If you select this slicing company, you are in good company.

Hosting Services
Glow Host

13

This service provider has servers located in 16 worldwide datacenters which says a great deal about its size and customer base. Glow Host’s hosting plans include Unlimited Single Domain and Unlimited Multi-Domain hosting, Personal hosting, and a Professional Hosting plan. All four plans have a number of attractive features, making this hosting service well worth looking into. Setup and activation are instantaneous when you sign up.

Rackspace

14

Rackspace places great emphasis on what they call ‘fanantical support’. Cloud hosting is their specialty, but they are more than just a hosting resource. Rackspace offers best-fit web content management solutions to ensure your website has the speed, performance, and security you need. Rackspace also offers customized Ecommerce hosting solutions, and they will optimize websites for page loads, security and PCI compliance; services few hosting companies offer.

Stock Photo Agencies
Bigstock

15

Bigstock has a truly amazing selection of quality, royalty-free images. There are in fact more than 26 million photos, vectors, and illustrations to choose from. Fortunately, their selections are well organized, and searching rarely becomes an issue. Once you have licensed an image, you can always re-download it for free. Your first 35 images are free as well. Sign up now for your week of free images from Bigstock.

Stockfresh

16

You can prepay for images or save considerably by signing up for subscription downloads. Either way, Stockfresh has neatly categorized photos, vectors, and illustrations in abundance, and ordering one or more is a snap. Their website is responsive, so you can browse and place orders from your mobile device. You can rely on prompt customer service should you run into any problems selecting and ordering images.

Web Apps
Sendloop

17

Sendloop is an excellent choice for anyone who has been looking for an easy to use e-mail marketing solution. Their package includes a drag-n-drop email builder, an online image editor, and a nice selection of mobile-device-ready email templates. Coding is not necessary, but a professional HTML email editor is included for those with HTML coding skills. Sendloop has more than 20,000 current customers, and has been offering email marketing solutions for more than 15 years.

Typeform

18

Typeform is on a mission to make forms simple, beautiful, and human. You can create surveys, contact pages, user feedback, quizzes, contests, and even take payments. How’s that for versatility? Leave the stone age of forms behind. Facebook, Nike, and Jetblue can’t be wrong. Core features are free, but if you’re a power user, try their Pro plan.
UI Kits

Baikal – Stylish Web Component Based UI Kit

19

If you were expecting a rather compact kit having a few templates to work with, you are in for a surprise. Baikal features more than 130 drag and drop web components, together with a collection of over 1000 design elements. The web components have been placed in 10 well-organized categories. The eCommerce category alone is worth a look, but the content in every category is quite impressive.

Zed – Essential Wireframe Kit

20

Zed is an ideal wireframe kit to have on hand for prototyping websites. You can, for example, choose one of the 25 PSD templates that come with the kit, open it, add a client’s image or logo, and show your client how a final website might appear. The 1500 pixel wide templates can be opened in Photoshop CS5, and they have been neatly placed in 10 commonly used categories. An impressive array of design elements are also included.

Icons and Fonts
Icons Responsive

21

Icons Responsive is an excellent resource to have on hand with its library of 1000+ icons, and counting. These easily scalable, pixel-perfect, responsive icons come in 4 sizes, ranging from 16×16 to 128×128 pixels, as well as in line, flat, and filled glyph styles. Since they are presented in vector format, they are easy to edit. This is a truly outstanding and comprehensive selection of useful icons.

Troia Classic Serif Font Family

22

Troia is comprised of a classic handcrafted Serif font family. It features 6 different fonts in light, regular, and bold weights. Italics, and Italic bold are also featured should you have a need for them. These multilingual serif fonts cover all Latin 1 glyphs, and they can be used in the Scandinavian languages, German, French, Spanish, Afrikaans, and others. This resource is available for both commercial and personal purposes.

To sum up

Everything in this listing of premium themes, website, app, and page building tools, design element resources, and website design services is top quality in all respects. You can’t really make a bad choice. If you have a problem, it would be in trying to choose between products or services of roughly equal merit. In any event, we hope you have found something to your liking.

Whether you found what you have been looking for, or you feel an important product or service should have been on the list, but wasn’t, we would like to hear from you. Please feel free to send along your thoughts and comments.

IMG_1641.PNG

The Anatomy of Time Tracking Tools: Breaking Down Its Essentials

As more and more professionals are focusing on getting the most out of their time at work by boosting their productivity, time tracking tools are in vogue right now.

By using any of these apps to monitor your time spent on each tasks individuals have for the day or week, they will gain a better understanding on how they work and should find ways on how to make better use of their time to improve productivity. For client’s, they will be able to keep tab of the time spent by their remote employees and pay them accordingly.

Given that these tools are developed using sophisticated coding and programming techniques, a two-part post over at Scotch.io deconstructs the components of time tracking tools. The purpose of this exercise is to see how the parts come up with a unified whole and how developers and programmers can come up with their own time tracking tool for themselves.

Find out what a time tracking tool is made of so you can create your own! (Click Here to Tweet This Quote!)

Ingredients of a time tracking tool
Angular JS

This free open source framework by Google will be one of the many dependencies with Bower and serve as the backbone of the time tracking tool. Using this will make testing and developing single-page applications much easier.

For a comprehensive primer of this dependency, refer to the one-hour Youtube video below, which discusses the use of different techniques to build an SPA shown at the end of the video.

Angular Bootstrap

screenshot-angular-ui.github.io 2015-07-14 19-05-07

Using this will provide the tool with a native AngularJS directives that will shape its appearance and UI. For this exercise, the timepicker directive will be used.

For an example of how Bootstrap and Angular work hand in hand, below is another Youtube video that show both dependencies in action as the author create a complicated form.

ngResource

Referring to this Angular resource will help you keep in touch with the RESTful (Representational state transfer) data-sources from the server side. This help in the creation of a cleaner and more efficient code for the tool to be created using $ resource instead of $ http.

To get a glimpse of ngResource in action, here’s a Youtube video for your viewing pleasure.

Bootstrap

screenshot-getbootstrap.com 2015-07-14 19-47-17

The tried and tested framework will give the standard styles for the creation of a responsive and mobile-friendly tool. For themes, templates, development tools, and other resources that can help in building a time tracking tool, refer to the Bootstrap Resources and Plugin List from Start Bootstrap.

Moment.js

screenshot-momentjs.com 2015-07-14 22-10-59

Since time (and date) is of essence in the creation of this tool, Moment.js is an integral dependency that will simplify the managing of time for the time tracking tool. Instead of storing the start of end times of an individual using the time tracking tool, this Javascript library lets you compute for the time on the fly.

For a better idea on how this work in a real setting, this Youtube video is a good introductory video on how it can make your life easier.

Laravel 5

This framework serves as the second foundation in building and developing a time tracking tool. Essentially, Laravel 5 helps you write clean, concise, and beautiful code to ensure that your SPAs and applications load in warp speed.

Below is a playlist on Youtube videos teaching first-time users how to handle and manage this framework.

As mentioned in the videos, you must learn how to use Composer, another dependency management system, first.

Synthesizing everything together

Now that you are aware of the parts that make up a time tracking tool, you can follow the step-by-step process of building one by referring to the two-part tutorial from Scotch.io here and here.

This is the appearance of the finished time tracking tool as detailed in the two-part tutorial at Scotch.io. A must-read for developers and programmers who wish to try their hand at creating this tool and building up their skills.

This is the appearance of the finished time tracking tool as detailed in the two-part tutorial at Scotch.io. A must-read for developers and programmers who wish to try their hand at creating this tool and building up their skills.

You can tinker with the appearance and feel of the tool once by choosing the right theme and templates. But following the tutorial closely should help you develop your coding skills and get vaulable hands on experience with the dependencies and libraries listed above. Furthermore, the accompanying videos for each library should open your eyes on the other ways in which they can be used for different purposes.

IMG_1636.JPG

Custom Grid Design for Structured Website Mockups

The best print and digital designers are those who can master the use of grids. In many cases it’s possible to forego the grid, but you’ll generally create higher-quality work if you learn the rules of grid structure and composition.

Grid design is one of the most important components for structuring layouts. Websites use grids to find balance between text, images, and overall page elements.

Although there are many free open source grid systems available, you’ll generally be better off learning to create your own. This post will cover the benefits of custom grid design and how you can learn to build your own grids from scratch.

Planning the Composition

The best professional design workflow starts with wireframing. This traditionally takes the form of a quick sketch where you draw out various ideas to see if any of them feel right.

Some designers prefer to work digitally while others prefer pencil & paper. There is no right or wrong answer – only the the best method for you. Stick with a method that allows you to rapidly iterate between ideas so that you can find the best ones to fit your content.

custom sketchbook moleskin wireframe

While sketching you need to consider the overall composition. Think of a website primarily as a container for content. Important tidbits should stand out through symmetry mixed with asymmetry. Design a grid that fits your content and don’t be afraid to move things around.

Generally speaking, wireframes are used to discover raw ideas. During this phase there are no mistakes – only experiments.

Find a way to organize grid structure to create a repetitive meter between different areas of content. Balance can be created by sticking with measurable spaces in recognizable patterns.

early wireframe sketches notebook

If you have trouble getting started pick out a pre-built system like 960GS. It would be better to create your own grid but there’s no harm in starting with a trusted grid system. This allows you to focus more on content organization and less on specific column/gutter values.

Use this initial phase as a testing ground. Figure out how to create repeatable patterns so that users learn when to expect content while browsing through a website.

Spacing Patterns

Symmetrical rhythm is a big part of grid design, especially in regards to lengthy vertical websites. Content should have a natural flowing pattern that guides visitors throughout the page.

One way to find a natural rhythm is to study other websites. Measure the distances between paragraphs and put together a vertical/horizontal rhythm for content. Vertical space is most important on the web but horizontal space also plays a role in compositional structure.

live view grid layout website

Keep in mind that patterns are meant to be templates as opposed to rules followed slavishly. The best designers rely on their grid as a compass for direction. Sometimes it’s a good idea to break the grid to help an element stand out against surrounding elements.

When it comes to pattern recognition you will need to create some semblance of repetition. Give visitors something to expect while browsing the layout, but don’t be too stiff. I know it seems like a hypocritical remark but with practice you’ll learn when to follow patterns and when to break them.

Grid Design in Practice

Some designers like to use Photoshop guides for delimiting grid columns while others use a separate layer full of rectangles. It honestly doesn’t matter how you create grids, so long as you feel comfortable with your method.

Although there is no particular workflow to follow it’s usually good to start with a horizontal grid. This defines the total number of columns and their sizes in relation to gutters. This process will also give you a final width so you know how big to make the PSD or Sketch file.

webshop grid baseline preview

Once you’ve settled on a horizontal grid it’s a good idea to organize a vertical grid, also known as a baseline. The vertical grid’s function is to organize typography so that it aligns with other elements in a natural rhythm.

When combined together you’ll have a powerful tool that can help you reorganize and realign layers so they fit together comfortably. The best grids aren’t seen by users but their presence can be felt in all aspects of the design.

wireframing grid to mockup design

To get started try building a practice project for a made-up client. This way you have no pressure to do a good job but can still learn a lot about custom grid design workflow.

Beyond the Structure

After creating a grid you’ll need to learn how to use it for content placement. Obviously your skills will improve with practice but there are some prototypical rules you should keep in mind.

Try to see beyond the grid structure and imagine how content would fit together. Web design is dedicated to content and every layout should reflect this accordingly.

Try restructuring paragraphs to fit them in the middle of columns instead of right on the edges. Add some extra space below content sections to give the impression of a “new” area on the page.

Another thing to try is merging different grids together for an overarching unified system. Take for example The Gerstner from Gridset. This design uses a 6-column grid with a 4-column overlay matching the same width.

gerstner grid preview

Now you have multiple points to work with so your options are greatly enhanced. But the extra grid can be intimidating so you really should practice traditional grids before overlapping and merging ideas together.

fonmon grid system asymmetrical design

One other advanced technique you might try is using an asymmetrical grid. Fonmon is another sample from Gridset using 5 columns of differing widths. Although it’s rather unconventional, this can help you break out of a regimented structure and reframe your design ideas in a new light.

Grid Tools & Resources

You’ll find plenty of articles discussing various grid systems and how to use them, so I’d like to avoid these resources and focus on grid-based webapps. I’ve put together a few websites that can help you generate your own custom grids from scratch.

It’ll help if you already understand composition and have some working knowledge about how to design grid layouts. But when getting down to the nitty-gritty you’ll save time and stress by using grid generators/calculators.

Gridpak

gridpak custom grid generator

In the realm of grid generators one of the best options has to be Gridpak. It’s a free online webapp that allows you to scale the grid based on any width to fit columns/gutters accordingly. When you’ve fully designed the grid you can download a “Gridpak” that includes HTML/CSS code along with a PNG template.

Gridr Bildrrr

gridr generator grids

If you’re looking for a simpler solution Gridr might be perfect. This tool allows any grid size by manipulating columns, margins, and gutters together. It’s perfect for testing various ideas before devoting yourself to a particular grid.

GuideGuide

guideguide photoshop extension grids

Perhaps my favorite Adobe extension is GuideGuide for Photoshop. It’s completely free and lets designers auto-generate guides for grids based on repeating intervals. You simply enter your grid details and GuideGuide will do the rest.

This extension works on Photoshop CS5-CC and is frequently updated to handle newer releases. You can also find more information in the GuideGuide documentation covering general setup tips.

Practice Makes Perfect

If you’re unfamiliar with grids then the best way to learn is to just get started. Wireframe 10 or 20 different layouts with the goal of simply learning. They might be horrible or they might be great. Ultimately grid design is learned through experience so the sooner you push through the fear of failure, the sooner you can start designing with confidence.

IMG_1537.JPG

20 Best Free WordPress Themes for Those Who Wisely Choose a WP Template

There’s been a lot of talk that free things cannot necessarily be of good quality. Undoubtedly, most of the time this statement is probably right. But sometimes – and this is just such a case – this statement is absolutely wrong.

WordPress theme providers have to strive to maintain their place in the market. If you know the basic laws of economics – the more competition there is, the better the product that is produced. So you can relax, sit back in your comfortable chair and reap the fruits of the competitive WordPress themes industry.

Let’s imagine a situation: you’ve found nice-looking WordPress theme on the Web and bought it. A couple of days later you run into a post with a list of beautiful WordPress themes which would have fit your project perfectly well. For Free. And different images start getting into your head like the charcoal grill or a new device for your garage that you could’ve bought for that sum of money.

Don’t rush to purchase a theme from the Web – check out the list of free themes first. Whichever project you have – whether it is a portfolio website, a blog or a veterinary clinic website – you may use any of the templates listed below.

Single page templates, Parallax scrolling, Mega Menu, responsiveness and other great features will help you create a beautiful WordPress-powered blog, restaurant, business website or… whatever you decide it’s good for.

When choosing a theme for your project, pay attention to whether it contains the latest web design trends. The ones below are beautiful, function perfectly and, one of the biggest advantages of this list, they are free.

Enjoy!

Cherry Framework Free WordPress Theme

This is a truly impressive theme built on > Cherry Framework 4.0 . which is a framework that was recently updated and has more functionality than other frameworks on the Web. It’s one of the first to have features which make the designing as flexible as possible and also it includes plugins which work independent of the Cherry framework with any WordPress website.

Demo | More info

Virtue

Pay attention to the image slider in this template. Also, look at the ‘Featured projects’ section: there’s a great slider, too. The theme creators managed to combine them in one theme and yet kept the website clean looking whilst maintaining ease of perception. By the way, if you place your cursor on the images below the slider, you’ll see nice and unobtrusive hover buttons.

Demo | More info

Consulting Firm

Beautiful, isn’t it? If you need to build a beautiful website with a neat Parallax scrolling effect, you may consider using this free WordPress template. Its responsiveness will present your website perfectly on any type of device and its mega menu will help people navigate the site easily.

Additionally, it’s a great option for those websites that need to present their business-related content in the most effective way.

Demo | More info

Board Walk

This free WordPress theme has an unusual design which will definitely make your project outstanding. If you have your pictures prepared for the project, you can visualize how it will look. He who takes no risks ever gets to drink champagne. Maybe this layout is the key to your future success… try it ;)

Demo | More info

Attitude

Business is all about attitude – this is what this theme says. Attitude towards your work should be simple, confident and progressive. Just like this theme – a great design embodying these features. Check it out!

Demo | More info

Kundalini Yoga Club

Why practise yoga? There are many reasons for doing that, in fact, so many that it’s pointless to enumerate all of them right now. However, what we can answer is “Why try this yoga template?” It’s fully responsive, it’s a match for almost any blog or portfolio website, it’s widgetized and it has a modern design. Everything you need for the healthy structure of a website.

Demo | More info

Photographer Portfolio WordPress Theme

This clean theme is stuffed with great features alongside beautiful design, Parallax scrolling, lazy load effect, ghost buttons, social options… and many more. To see more of it, check out the demo. See? This is how your project could look.

Demo | More info

Bouquet

This is a theme where a cute little deer somewhat distracts your attention. However, once you get yourself back to thinking like a professional, you’ll see the coziness emanating from this template. Also this responsive theme with a right sidebar is translation-ready, so you won’t have any troubles with different languages.

Demo | More info

Gridsby

A beautiful Pinterest-like layout is a great solution for those who aim at an image-oriented, free WordPress theme. One of its greatest features is a hidden menu, which allows you not to overload the design of the template.

Demo | More info

Oblique

A darkly seductive WordPress theme with a diagonal graphic as a key design solution. If you feel that this template may become a great basis for your project… you know what to do.

Demo | More info

One Tone

It’s beautiful, parallaxy and stylish. This template has a free version, so you may consider using it. And by the way, you can place video on the home page. That could be a pretty engaging feature of your website.

Demo | More info

Arcade basic

A really romantic airy WordPress template with a full-screen image and hover buttons. It can serve you well if you are interested in including the latest trends of 2015 in your website.

Demo | More info

Fortunato

One more full-screen image with social media icons just at the bottom of it so the people who want to share your content don’t have to go too far. A beautiful picture and the ability to share it with your friends right away – what else do you need for web design aesthetics?

Demo | More info

Globaly

Parallax scrolling, flat design, drop-down menu, no charge – these are great features, aren’t they? Great color scheme, symmetry and easy navigation will create the best impression for a business website. Are you interested? See the demo – better to see it once than hear about it 100 times.

Demo | More info

Moesia

Full screen image, Parallax and a lot of hover effect – these are the main features of this theme. Beautiful flat widgets contribute well to the design. Moesia can become a great helper in the creation of a beautiful one-page WordPress website.

Demo | More info

Metro CreativeX

A dark responsive WordPress theme for those who have a lot of visual content to present. The combination of bright colors and dark background makes the theme even brighter, and although, in many themes, content blogs can simply get lost on the page, here each and every one of them will be seen perfectly well.

Demo | More info

Free WordPress Restaurant Theme

In French, in order to express that you hope your guest(s) enjoy their meal you might say ‘Bon Appetit’, in the Belgian language they say “Smakelijk”, in WordPress language they say…nothing! They just refer you to a nice appetizing template! Check out a free WordPress template created to become a basis for the best restaurant projects.

Demo | More info

Free WordPress Fashion Agency Theme

This WordPress theme is definitely worthy of attention – it is responsive, WPML ready and built on Cherry Framework.

Check out the elegant drop-down menu, muted colors and the hover effect the menu has.

Demo | More info

Receptar

An extremely appetizing WordPress theme, which will make your mouth water. If there is a perfect way of presenting food on a website – this must be it. Enjoy the effects it has when you move the cursor.

Demo | More info

Patio

Again, a visually oriented theme where you can show your images to their best advantage. This template is well suited for a blog – for example, if you are an adventurous traveller and you want to tell your stories to the world.

Demo | More info

937d0_design_image072-1024x591

15 Free Wireframing Tools for Designers

We all know that good wireframes are the backbone of any software, mobile and web designing project. Wireframing lets designers to work out the basic navigation and layout structure before finally starting off with development of web applications, mobile applications or a software.

There are hundreds of wireframing tools in the market, some online, some desktop-based, some free, and some paid. In today’s list I collect 20 wireframing tools for designers. Hope you will find the right one for you!

Moqups

Mockingbird

Wireframe CC

Proto

Justinmind

Fluid

MockFlow

Framebox

Thismanslife

Cacco

Axure

UXPin

Simple Diagrams

Mockup Designer

FlairBuilder

c7070_tutorials_ProPage-Multipurpose-Unbounce-Template

20 Extremely Effective Unbounce Landing Page Templates

Have you heard of Unbounce? Unbounce is a great new web platform which lets marketers build, publish & test landing pages in minutes. This landing page platform is absolutely code-free and gives marketers some of the best landing page templates.

Unbounce comes with a powerful drag & drop landing page builder lets you create responsive pages without any help from a web designer. You can easily build a high-converting landing page, then publish to the web. No need to hire a web designer to do this and no knowledge of HTML andor CSS is needed.

With this platform you already have integrated useful marketing tools such as MailChimp, Salesforce, Marketo, AWeber, Constant Contact and more. Easily add Google Analytics, KISSmetrics and other conversion tools like live chat and surveys.

If you want to increase your conversion rate, check out these 20 extremely effective Unbounce landing page templates! They will surely help you a lot!

Check out these too: Super-Effective Premium HTML Landing PagesProfessional Unbounce Landing Page Templates and Corporate Landing Page Templates.

Creamery Shop – Unbounce Landing Page

Creamery Shop - Unbounce Landing Page

Hoster – Hosting Services Landing Page

Hoster - Hosting Services Landing Page

Nightclub – Unbounce Responsive Landing Page

Nightclub - Unbounce Responsive Landing Page

BrandPro – Unbounce IT Template

BrandPro - Unbounce IT Template

Bigidea – Unbounce Agency Template

Bigidea - Unbounce Agency Template

Booster – Unbounce Multipurpose Template

Booster - Unbounce Multipurpose Template

Lance – Startup Landing Page (Unbounce)

Lance - Startup Landing Page (Unbounce)

MyTuts – Education Unbounce Template

MyTuts - Education Unbounce Template

Caption Flat Startup Landing Page

Caption Flat Startup Landing Page

Flat Vault – Unbounce Landing Page Template
Flat Vault - Unbounce Landing Page Template
Massketing – Unbounce Landing Page Template

Massketing - Unbounce Landing Page Template

MyStart – Startup Unbounce Landing Page Template

MyStart - Startup Unbounce Landing Page Template

OneStop – Unbounce Template

OneStop - Unbounce Template

ProPage – Multipurpose Unbounce Template

ProPage - Multipurpose Unbounce Template

Cloud Soft Unbounce Landing Page Template

Cloud Soft Unbounce Landing Page Template

Dwonders Travel Landing Page For Unbounce

Dwonders Travel Landing Page For Unbounce

Tattoo Shop – Unbounce Responsive Landing Page

Tattoo Shop - Unbounce Responsive Landing Page

Afton – Unbounce Template

Afton - Unbounce Template

Knights Multipurpose UnbounceTemplate

Knights Multipurpose UnbounceTemplate

Hype Startup Unbounce Landing Page

Hype Startup Unbounce Landing Page

IMG_1520.JPG

50 Best Text Effect Tutorials

Best Text Effects Tutorials 2015

Photoshop and illustrator are simply amazing tool for creating Photo Effects and Text Effects from simple to advanced makeovers and for fixing, editing great shots where the light, color balancing and sharpness need a bit of adjustment or where some elements need to be removed.

Create a 3D Retro Text Effect Using Layer Styles in Adobe Photoshop

This tutorial will show you how to use layer styles, smart objects, and some other basic elements in Adobe Photoshop to create a simple, retro looking, 3D text effect.

50 Best Text Effect Tutorials - 1

Tutorial Link

Create 3D Star Light Text Effect in Photoshop

In this tutorial, I will show you the process of creating this 3D star light text effect in Photoshop. We will use a number of manipulation techniques such as layer blending, adjustment layers and various tools such as brush, eraser and free transform tools.

50 Best Text Effect Tutorials - 2

Tutorial Link

How to Create Letterpress Text Effects in Photoshop

This tutorial will teach you how to create a couple useful letterpress text effects in Photoshop that you can adapt and reuse in almost any project.

50 Best Text Effect Tutorials - 3

Tutorial Link

Create a Hatched Drop Shadow Text Effect in Illustrator

Hatched drop shadow text effects are becoming more common in typefaces these days – Trend was one of the first to offer a layered font with a faux hatched drop shadow which motivated others to offer them.

50 Best Text Effect Tutorials - 4

Tutorial Link

How to Create Extreme Glossy and Shiny Text Effect in Photoshop Tutorial

In this Photoshop tutorial, we’re going to see how to create extremely glossy and shiny text effect with glitter texture.

50 Best Text Effect Tutorials - 5

Tutorial Link

Create Amazing Create Urban Type in Illustrator & Photoshop

In this tutorial, you will learn how to creating a new piece that draws on all that’s great about the city – taking inspiration from last year’s Olympics, underground club scenes, and the vista from up high.

50 Best Text Effect Tutorials - 6

Tutorial Link

How to Create a Realistic Neon Light Text Effect in Adobe Photoshop

This tutorial will show you how to modify a brick texture for the background, and then use layer styles with the Pen Tool to add some bright, glowing neon text and a simple cable over it.

50 Best Text Effect Tutorials - 7

Tutorial Link

Create a Retro Text Effect in Adobe Photoshop
50 Best Text Effect Tutorials - 8

Tutorial Link

3D Letters on a Shelf Text Effect in Photoshop CC

This tutorial will show you how to use Photoshop CC’s Shape Attributes and 3D capabilities to create a simple, yet sophisticated 3D letters on a shelf text effect. The focus is on creating the shapes, working with the materials, and modifying the lighting in order to get the soft, kind of vintage looking final result.

50 Best Text Effect Tutorials - 9

Tutorial Link

Create 3D Snow Text Effect Using Cinema4D and Photoshop

In this tutorial, I will walk you through the steps to create this 3D Snowy Text Effect Using Cinema4D and Photoshop. We will render the 3D text in Cinema4D, then apply the snow effect in Photoshop.

50 Best Text Effect Tutorials - 10

Tutorial Link

Create Delicious Donut Text That Will Make You Hungry

In this tutorial, I will walk you through the process of making a yummy sweet text in Photoshop. We will use the basic tools and effects along to achieve the final outcome in short time.

50 Best Text Effect Tutorials - 11

Tutorial Link

How to Create a Smoke Text Effect in Photoshop

In this tutorial, we’ll learn how to create a smoke text effect in Photoshop in just a few easy steps. We will be using the Smudge Tool to make the text look like smoke.

50 Best Text Effect Tutorials - 12

Tutorial Link

Create a Simple, Elegant Textured Metal Text Effect in Adobe Photoshop

This tutorial will show you how to create a simple metal text effect using layer styles. Then, it will show you how to make that text look more interesting by adding a simple texture overlay to it.

50 Best Text Effect Tutorials - 13

Tutorial Link

Create a glossy candy text effect in Photoshop

This tutorial by TexTuts will show you a super easy way to create a glossy candy cane inspired text effect using a bunch of Layer Styles.

50 Best Text Effect Tutorials - 14

Tutorial Link

Create Luminous Text Using Photoshop 3D Layers

Learn how to create a super cool illuminated text effect using Photoshop’s 3D Layers. We’ll make your text really stand out by making it glow. Read on to find out how.

50 Best Text Effect Tutorials - 15

Tutorial Link

How to Create a Colorful Text Effect in Photoshop

In this tutorial, we’ll learn how to create a bright, colorful text effect in Photoshop. Creating this effect is very easy and even beginners can do it.

50 Best Text Effect Tutorials - 16

Tutorial Link

Creating a Glowing Neon Effect in Illustrator

This tutorial is designed to help you create cool neon text in Illustrator. Here you will learn some clever techniques to enhance your skills.

50 Best Text Effect Tutorials - 17

Tutorial Link

Realistic 3D Casino Style Bulb Sign Photoshop Tutorial

The sign will be created as a standalone piece of text, using Photoshop’s powerful 3D tools to simulate a hyper realistic setting within a warehouse. We’ll then add lots of subtle lighting effects to add a series of bright bulbs.

50 Best Text Effect Tutorials - 18

Tutorial Link

Create a Wood Planks Typo with a Custom Pattern in Illustrator

In this Illustrator Tutorial, learn how to create a Wood Pattern Text Effect with wood planks and a custom pattern, using the Pen Tool and a few effects.

50 Best Text Effect Tutorials - 19

Tutorial Link

Amazing Hand Lettering Text Effect Guideline Project

In this tutorial, you will utilize everything you’ve learned across the previous tutorials and apply that to a finished piece. This means we will take our lettering from an idea to a sketch, to vector, detailing, and beyond.

50 Best Text Effect Tutorials - 20

Tutorial Link

How To Create a Vintage Text Effect in Illustrator

In this tutorial you will learn how to create 19th century typography in this vintage text effect tutorial.

50 Best Text Effect Tutorials - 21

Tutorial Link

Create Abstract Shining Text Effect with Groovy Font in Photoshop

In this tutorial, I will show you the methods I use to Create Abstract Shining Text Effect with Groovy Font in Photoshop. This is a beginner level tutorial with lots of tips and tricks about effective text manipulation.

50 Best Text Effect Tutorials - 22

Tutorial Link

Create an Electrified Text Effect in Photoshop Tutorial

In this tutorial, I will show you the process I used to this electrified text effect in Photoshop. We will use a circuitry stock image as our background, and add a couple of electric current image for our final effect. We will be using lots of image adjustments and brush painting in the process.

50 Best Text Effect Tutorials - 23

Tutorial Link

Create a text on a Foggy Rainy Window in Photoshop Tutorial

Photoshop tutorial by BlueLightningTv showing how to create the look of a handwritten message on a foggy, rainy window pane.

50 Best Text Effect Tutorials - 24

Tutorial Link

Create Leafy Text Effect in Photoshop Tutorial

In this tutorial, I will show you the steps used to create this leafy text effect in Photoshop. We will explore the use of tree bark texture to form the basis of the text, then applying leaf texture over the text. We will utilise the chalk brush, various selection tools, image adjustments and basic dodge/burn effect.

50 Best Text Effect Tutorials - 25

Tutorial Link

Design Abstract Text Effect with Pen Tool and Grunge Brush Decoration in Photoshop

In this tutorial, I will show you the steps to design this abstract text effect with pen tool and grunge brush decoration in Photoshop. Along the way, we will practice using Pen Tool to draw some nice hair-like lines, as well as apply grunge brushsets for some cool abstract effect for our texts.

50 Best Text Effect Tutorials - 26

Tutorial Link

Create a Retro 3D Halftone Text Effect in Photoshop

In this Tutorial I will show you how to create a 3D Halftone Text Effect in Photoshop that can be used as a cool rock band cover using some cool flash shapes, the Text Tool and a lot of different layer styles.

50 Best Text Effect Tutorials - 27

Tutorial Link

Create a Realistic Metal Text Effect Using Layer Styles

In this Photoshop Tutorial you will learn how to create a realistic metal text effect using only 2 layers

50 Best Text Effect Tutorials - 28

Tutorial Link

Creative Offset Path Effect Creating in Illustrator and Photoshop

In this tutorial I will show you how to create a simple wallpaper mixing vectors and photos. We will play with Offset Path, Live Corners and some other effects in Illustrator and Photoshop.

50 Best Text Effect Tutorials - 29

Tutorial Link

How to Create Embossed Metal Tag Text Effect in Photoshop

This tutorial is a quick easy one, that will show you how you can use shapes and layered Layer Styles to create a simple embossed metal tag-inspired text effect.

50 Best Text Effect Tutorials - 30

Tutorial Link

Create a Sleek Metallic 3D Text Effect in Photoshop CS6

This Photoshop CS6 tutorial will show you how you can play around with the different settings to create a simple, yet sophisticated, metallic text effect.

50 Best Text Effect Tutorials - 31

Tutorial Link

Create Deep Space Text Effect in Photoshop

In this tutorial, I will show you the processes of creating this Deep Space Text Effect in Photoshop. We will use a handwriting font, combine it with nebula and fire textures to form the final effect.

50 Best Text Effect Tutorials - 32

Tutorial Link

Beautiful Painted on Wood Text Effect in Photoshop

This tutorial will show you a simple way of using a couple of textures to create a painted-on-wood text effect. It is inspired by the amazing work of Jérémy SCHIAVO, the PULSION CRÉATIVE project.

50 Best Text Effect Tutorials - 33

Tutorial Link

Creating Fluorescent Text Effect in Photoshop

In this tutorial you will learn the basic use of brushes and filters, that how to apply on text to make fluorescent text effect.

50 Best Text Effect Tutorials - 34

Tutorial Link

Create a Distressed Vector Typographic Poster Design

In this tutorial you will learn how to create ‘Spectrum’ poster. Starting with custom made type in Illustrator, we’ll move our vector graphics into Photoshop for some serious distressing with Photoshop brushes, blending modes and more!

50 Best Text Effect Tutorials - 35

Tutorial Link

How to create Beautiful Iron Man Text Effect in Photoshop

After seen the Iron Man 3 trailer, it looks quite spectacular! So, to celebrate the upcoming release of Iron Man 3, and learn how to create a neat Iron Man inspired text effect in Photoshop.

50 Best Text Effect Tutorials - 36

Tutorial Link

Create a Glowing Liquid Text with Water Splash Effect in Photoshop

In this tutorial, I will show you the steps I took to Create a Glowing Liquid Text Effect in Photoshop. We will be practising the use of liquify filter, layer blending options, as well […]

IMG_1518.PNG

User Experience Design: How to Do it Right

We know that the customer is always right. However, this motto is often neglected costing website operators a lot of money that could have been better spent. No matter what industry your company is in, the customer should come first in each marketing strategy. You can optimize your sales only with satisfied clients. But customer satisfaction is very fragile, especially in the digital world; your competitors are only one click away. This requires a stronger focus not only, but especially on customer satisfaction and service. The same applies to online shops and any other web-based businesses. Not only products, processes, etc. have to be optimized, but also the user experience design. We’ll tell you what is meant by that and how to do it…

uxdesign-teaser_EN

What is User Experience Design?

The concept of user experience design focuses on the interaction between the website and the customer ensuring a fast and pleasant process. The success of a website largely depends on user experience (UX) design, which is not surprising really. Only if customers have a good experience with a website, they’ll develop the confidence to take the next step.

The User Experience ISO 9241-210

The term user experience is defined in ISO 9241-210 that was introduced in 2010.

user-experience-design-definition
© Copyright Karsten Nolte – http://www.karsten-nolte.de

ISO 9241-210 describes user experience as follows:

“Person’s perceptions and responses resulting from the use and/or anticipated use of a product, system or service.

Note 1 to entry: User experience includes all the users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use.

Note 2 to entry: User experience is a consequence of brand image, presentation, functionality, system performance, interactive behavior and assistive capabilities of the interactive system, the user’s internal and physical state resulting from prior experiences, attitudes, skills and personality, and the context of use.

Note 3 to entry: Usability, when interpreted from the perspective of the users’ personal goals, can include the kind of perceptual and emotional aspects typically associated with user experience. Usability criteria can be used to assess aspects of user experience.”

User Experience Cut to the Chase

User Experience Design provides an easy, clear, intuitive, and elaborate design. All essential elements are exactly where visitors expect them to be. In short: Usability should be as high as possible. To get the best out of your site, conduct surveys, tests, and study your target group and competitors.

Service and Support

Service and support are often underestimated, but they have a great influence on customer loyalty. This is your chance to create a unique selling proposition.

An Example of a Good User Experience Design

Foundation-UX-Design
Foundation Framework

The Foundation Framework website is a good example of a well-made UX design. It has a simple and clear flat design and draws the visitor’s attention to two areas by using sound contrasts: the call-to-action button for the download and the menu bar on top of the site. You’ll quickly get your bearings. The website loads fast encouraging the visitor to stay on the site. Images are used to support the actual content and don’t distract.

Use images only to support content and guide users through your website.

Develop Your Design Strategy

design-strategie

Start With the Color

When you develop a design strategy for an ideal user experience design, it might be a good idea to begin with the color. A minimalist theme, for example, looks beautiful with a monochromatic layout without crushing contrasts.

Trichromacy is currently the most popular combination. A neutral background in white or bright gray is combined with a highlight color for tabs, buttons, and elements you want to stand out. This is how a modern website could be designed in black and white with a colored header or a hero graphic area that doesn’t distract.

Run some tests with users or heat maps to find out how to direct the user’s view to the relevant areas of the website. To get an optimal UX design, it’s important to understand your users, so you can give them what they want or expect.

A small splash of color on a white background certainly draws attention. This works well for forms and product images. Combined with contrasting call-to-action buttons, you’ll create a calm and clear overall impression.

Effects and Menus

Once you’ve chosen a color scheme, think about the effects you want to build into your website. And keep in mind: less is more! Effects can be used for validating data in forms, which brings a real plus in terms of usability. If applied correctly, icons can also improve the usability.

foundation-menu

The menu should stand out from the content and catch the user’s eye. Take your time with labeling the menu items and try out different versions. Again, heatmaps and test persons can be helpful. Critical menu items can be highlighted with a different color as call-to-action buttons. This makes it easy for users to understand what they are expected to do.

Minimalist designs are getting more popular. They work equally well on desktops, smartphones, and tablets. Some of the biggest brands have switched to a minimalist flat design. What works well for big names should also work well for you.

Important:

Keep in mind that a computer monitor only reflects a part of the overall experience. You want to provide the best possible service within a short time to users. But an optimized website is only the beginning. Only when users can navigate quickly and intuitively from the homepage to the filled-out and sent payment form, you have an optimally structured website.

But user experience doesn’t stop with that. Service and support are vital factors for customer loyalty. We can learn a lot from Americans who are said to be the champions in terms of friendliness and service.

Conclusion

A superb user experience design is nothing you can realize in no time. It requires extensive tests, research, and continuous improvement of the status quo to get optimal results. But the hard work will be rewarded with more sells because the better users get their bearings, the more likely it is that they will buy something.

IMG_1519.JPG

XPRS – A New WordPress Beating CMS?

The Internet has changed beyond recognition since WordPress was first released back in 2003. When the WordPress CMS was first released it was hailed as the answer to everyone’s prayers; a free content management system with hundreds of free visual themes to choose from.

XPRS – A New WordPress Beating CMS?

Hindsight is always 20/20. We now know that free themes rarely have any support beyond a users’ forum. Their speed is often unacceptable and sometimes themes are incompatible with new WordPress releases.

Progress is incremental. Today’s software designers build on the mistakes of the past, learning from them and offering a better user-experience.

What mistakes?

Even the most fervent WordPress supporter will admit that there are problems.

WordPress is a committee-driven project. There are always compromises whenever a group of people with different opinions and priorities is working on one piece of software.

Third-party plugins have both advantages and disadvantages. They extend the functionality for users who need additional functions, but there are often compatibility issues. The core WordPress program has everything you need to build a basic website, free plugins can fill in some of the missing features. Support via forums for free themes and plugins is adequate in most cases, but users who want to speak to a real support person are often going to be disappointed. Finding the right plugin amongst the host of similar ones can take time.

Security continues to be a major issue with WordPress, partly because enhanced security is not built in as a core feature.

WordPress might be free, but if you try to build a website using free themes and plugins you will soon run into problems unless you are code-literate. To get the site you want you will need to pay for premium products and to pay a designer to personalize your site.

XPRS – a New CMS

XPRS is the new de facto standard against which all content management systems are being judged.

Everything in XPRS is unified into one seamless simple-to-use website design program that is so simple a child could use it. There is no need for any coding knowledge whatsoever because you build your website using blocks called Polydoms (patent pending). In the same way that your children use Lego© bricks to build cars, houses and spaceships, you can use polydoms to build websites.

Polydoms

There is no need for third-party add-ons such as themes, plugins or widgets, because everything you need is built into the program. You will never have compatibility issues or clashes because everything has been built by IM Creator to work together.

You never need to worry about how your site will look on tablets or phones because XPRS is fully responsive and always looks good.

Website Building Fun

Code is definitely NOT poetry to most people, so modifying a WordPress theme is not something most people are happy about trying. Even changing fonts and colors requires knowledge of CSS that most people do not possess. In contrast XPRS allows you to build a site just by adding pre-made blocksand to change colors and fonts very quickly and easily without getting into CSS or HTML.

Building website is fun with XPRS

You can build a professional-looking page in a few minutes using XPRS much more easily than when you have to code every slight change.

Anyone can build an awesome spaceship using Lego© bricks without any special aeronautical engineering skills or knowledge. Anyone can build an awesome website using XPRS without any special knowledge of HTML, CSS or Javascript.

XPRS – Bottom Line

XPRS is free to students, artists and non-profits. Any school could source a new website design by holding a student design competition using XPRS. Even the hosting for the site is free using XPRS and the only on-going cost would be the domain name.

A single commercial-use site on your own domain costs $ 7.95 per month including hosting.

Website designers and others who want multiple sites can pay $ 250 a year for unlimited site licenses, including clients’ licenses. Again, this includes hosting for every site.

Every plan includes an e-commerce facility without the need to pay extra monthly fees. Schools can sell uniforms or sports kit, students and artists can sell their work and businesses can sell their services without any further expense.

Conclusion

“But WordPress is free,” you might be thinking. It is only free in theory. Nobody ever built a professional-looking site using a free theme and free plugins. Hosting is also an ongoing expense with any WordPress site and the cost of your hosting alone will be around the same figure as an XPRS Commercial Use Plan.

XPRS unleashes your creativity and removes the need to code whatever your designer mind creates.

XPRS really is a Do-It-Yourself solution. Most coding amateurs who try to design their own site using WordPress or native HTML end up having to pay a designer to fix the mess they make of it. With XPRS you know that there are no other costs.

WordPress sites also need weekly updates of core WordPress software, themes and plugins. Every time you update any component of your site you need to back it all up to disk, just in case the updated component crashes it and you need to go back to the way it was working before.

bd252_tutorials_chartistjs-teaser_EN

Chartist.js Creates Responsive, Animated Charts with SVG

Numbers and statistics are usually bone-dry and sometimes not really clarify but obscure even more. By visualizing data with charts, you can attract much more attention. The JavaScript library Chartist.js from Zurich turns as many numerical sequences as you like into easy to understand bar, line, pie, or other charts. They not only look good but are also responsive and can be jazzed up with animations.

chartistjs-teaser_EN

Easily Generate Simple Charts

Chartist.js is a project by Swiss Gion Kunz available under a DWTFPL. I’m not going to write what this abbreviation stands for. What I can say is that you can use Chartist.js for whatever you want. Gion Kunz doesn’t care about it ;-)

It doesn’t take much to get started: First implement the JavaScript and the stylesheet file of Chartist.js. The JavaScript file is necessary for the functionality and data entry. The stylesheet file contains the different chart types. Use HTML to add a container element to the

which we will then fill with the chart. Attach the class

for the basic layout and a class that specifies the chart’s aspect ratio on the container.

Besides a quadratic ratio (

) or the classic 16:9 (

) and 3:4 (

) ratios, you can also choose the golden section (

). There are 17 different aspect ratios in total you can choose from.

In the example above, we created a

element with a 3:4 ratio. Then add the numerical sequences and chart labels to the container.

The example illustrates the population of the three biggest German cities with a pie chart. We assigned the numeric values and labels as object literal to a variable (

). The label of each numeric value is defined in the

array; the numbers are defined in the

array.

Pie chart

Then a pie chart is created by

. Chartist.js expects two parameters: the class of the

container for the chart and the object literal

with the chart values.

The chart is an SVG graphic with the width of the parent element. The height depends on the aspect ratio specified in the container.

Charts with Several Numerical Sequences

Besides pie charts, you can also create line and bar charts that can visualize several numerical sequences. It is important that each numerical sequence – even though it’s only one – is assigned as a separate array to the

array. Otherwise, you would fail to display the chart.

The example illustrates the population of the three biggest cities in 1990, 2000, and 2010 with a bar chart. Chartist.js draws for each year three bars on the x-axis – one bar for each city. Unfortunately, it’s not possible to label each single bar, so the chart itself doesn’t clearly say which bar stands for which city; however, the bars of each row are colored automatically with different colors.

Bar chart

If you want to turn a bar chart into a line chart, simply change the

into

.

The example then visualizes the data with a line chart.

Line chart

Chart Options

Depending on the chart you chose, you’ll have different setting options to adjust the look of it. If you prefer a chart with fixed dimensions, you can configure those.

Assign all options and the chart data as object literal to a variable.

Then allocate the options as a third parameter to the Chartist object.

The setting options depend on the chart type. You can, for example, define maximum y-axis values for line and bar charts, so that the chart will display a certain area.

In the example above, the displayed range of the y-axis is limited by

and

to values between 1 and 4 millions.

Pie charts can also be displayed in the form of a donut.

Just set the parameter

to

. To define the width of the donut use

. You can also display only a part of the donut rather than the whole one. Half donuts are common when it comes to distribution of seats in a parliament e.g.

For such charts, you will need to choose a start angle (

) for the donut and the size (

) of the displayed data. If the

value is identical to the sum of the numerical sequence, the data will be displayed as a full donut. If the total value is double the size of the numerical sequence’s sum, the data will be displayed as a half donut.

Half donut chart

Customize the Look

Chartist.js automatically colors each line, bar, and pie piece. You can, however, change the look and choose different colors by defining own classes for each segment.

In the example above, each segment got its own class by allocating arrays with two values for each number to the

array –

for the number and

for the class.

Responsive Design

If you don’t use a fixed width and height, you have a good basis for a responsive design as the chart always adjusts to the width of the parent element. At the same time, the chart won’t be statically scaled down. The line strength and the font size of line charts always stay the same. The amount of values displayed on the y-axis is reduced with smaller charts so that lines won’t be too thin, and fonts won’t be too small.

But this is not always enough. Especially smaller visualizations of complex charts can lead to situations where it’s hard to recognize any detail.

Therefore, Chartist.js offers specific settings where you can add media queries to be called up depending on the size of the browser window/display or device orientation.

In the example above, the lines of a line chart are masked out at a resolution of 640 pixels and less. Instead, you’ll see the curve’s surface. You can set as many media queries with the appropriate options as you want. This is how you can adjust the look for different resolutions and device orientations.

Animate Charts

Charts can be easily animated using the

method. You can, for example, animate bars starting from zero to the top. To do so, call up a function through a

event as soon as the chart is ready.

In the example above, we assigned each chart bar to a function using

. These are defined by the SVG element

.  We want to animate the height of the bars which is defined in the property

of the

element.

The option

lets you define a time delay when the animation should start. The parameter

defines the duration of the animation in milliseconds. The options

and

define the values for the beginning and the end of the navigation. At the beginning

should have a height of zero. This is achieved when the properties

and

have identical values.

As all SVG elements and attributes of a chart can be manipulated, you can create unique animations. Just take a look at the SVG source code of the chart.

Browser Support and Related Links

All major browsers support Chartist.js (including Internet Explorer 9 and higher, however, with some restrictions). To check compatibility of your browser, see the support table.

The library provides some good and useful setting options and works especially well with modern browsers on mobile devices. There are, however, some things that could be improved – which may, of course, happen in the future. Taking everything into consideration, you can say that Chartist.js is a pretty good solution for visualizing data with modern and beautiful looking charts. The fact that it’s free and can be used for any legal purpose is a plus that should be kept in mind.

IMG_1294.JPG

Bounce – The Fastest Way to Add a Banner

Bounce is a script that allows you to publish beautiful banner bars on your site with no coding required. Target bars to users based on where they came from, what page they’re on and whether they’re blocking your ads.

You can show a bar to users who have an AdBlocker installed. Ask users to turn off AdBlock or promote alternative ways to support your site. These bars won’t be shown to users who don’t have an active AdBlocker. You can also display different bars based on which site a user was referred from. These bars display your custom message by checking the referrer that visitor came from to help convert users.

bounce

Requirements: –
Demo: http://bounce.bar/
License: License Free

IMG_1324.JPG

Startup Launch List

Startup Launch List is contains all a​rticles you need to read before launching a startup. They are written by​ ​founders, designers, investors and thought leaders.

“Make sure you read all of Paul Graham’s essays.” This little app sort of follows that thought. It’s a place where you can read essential articles from respected folks like Jason Fried, Derek Sivers, Brad Feld, Mark Suster, Sam Altman, Fred Wilson etc.

startup-launch-list

Requirements: –
Demo: http://startuplaunchlist.com/
License: License Free

IMG_1278.PNG

30 Stunning Premium Parallax WordPress Themes

Parallax scrolling is one of the most popular web design trends because of the beautiful effects it contributes to the website as a whole.

Although the technique has been around for years, using it as a website effect was first used by Ian Coyle when he designed the Nike Better World website in 2011. It gained further popularity when Apple announced the iOS7 using parallax background. Here are our hand-picked best premium parallax WordPress themes, including their best features and why we like them. 2015_06_25_10_16_46_DynamiX_powerful_multi_purpose_theme

1. Dynamix – Business / Corporate WordPress Theme ($ 58)

Dynamix is a beautiful WordPress theme with a powerful admin which allows you to customize each individual page of your website. This fully responsive theme runs beautifully across all devices including all the sliders and content with an option to disable. It is also very easy to install using the visual page builder where you can drag and drop all elements into the page as well as edit it. The theme is ideal for almost any type of website whether it is an eCommerce shop, a personal portfolio, or a one-page website. Dynamix Theme Best Features:

  • WordPress 4.0 compatible
  • Multi-site compatible
  • 8 highly configurable stunning galleries
  • JW Player 6.x Integration with Audio / Video
  • WPML Multilingual Plugin + qTranslate compatible and Translation Ready

View Demo and Purchase Theme Here 2015_06_30_15_48_34_Parallax_Demo

2. Parallax ($ 14)

This single page theme wins through lovely animations and beautiful design coupled with amazing features which include amazing features, such as custom header for each page and scrolling effect. There is also an infinite scroll option which allows you to load numerous posts in your blog. Another great feature is its expandable portfolio which enables you to showcase multiple images per portfolio item. On top of that, Parallax has six custom widgets where you can display your social media photos, posts, and more. Parallax Theme Best Features:

  • More than 600 Google fonts
  • Custom social icons
  • Drag and drop page builder
  • Compatible with multiple browsers and devices

View Demo and Purchase Theme Here 2015_06_30_15_52_04_Evolve_Multipurpose_Wordpress_theme

3. Evolve – Multipurpose WordPress Theme ($ 58)

If you want to create corporate websites, eCommerce sales pages, portfolio galleries, or even a simple blog, Evolve is an ideal theme to use with its amazing and dynamic parallax scrolling effect. It is fully responsive as well, which means it works well on mobile devices, too. The theme has been created using the latest HTML5 and CSS3 techniques according to the latest coding standards set by WordPress. For more of its parallax features, Evolve allows you to use advanced parallax blocks and text rotation over parallax images to give your website a truly stunning and elegant look. Furthermore, its mega menu option allows you to add images, texts, widgets, and other items as well as split columns through the admin panel. Evolve Theme Best Features:

  • Unlimited colors and pattern variations
  • Drag and Drop web page builder
  • More than 2000 scalable vector icons
  • Google and Adobe fonts integration
  • 5 Built-in sliders
  • Custom skin creator

View Demo and Purchase Theme Here 2015_06_30_15_54_52_Bridge_Creative_Multi_Purpose_WordPress_Theme

4. Bridge – Creative Multi-Purpose WordPress Theme ($ 58)

At first look, Bridge theme seems like a very complicated theme. However, its dummy content and detailed documentation makes it easy for you to set up a web page using this theme. This highly customizable theme is ideal for education-related websites, but it can also be used to build websites for real estate, fashion, cafe, or an app landing page. With 24 layouts to choose from and other amazing features, the theme has more than 24K sales and has received a 4.76 percent 5-star rating. One of its users has this to say about the Bridge theme:

Evolve Theme Best Features:

  • CSS3 animations
  • 100 Demo sites and 24 layouts
  • Qode Slider
  • Powerful but easy-to-use admin panel
  • Fully customizable headers and title areas
  • One page sites

View Demo and Purchase Theme Here 2015_06_29_11_16_39_Fragrance_

5. Vortex – One Page Parallax Flat WordPress Theme ($ 43)

Vortex is a flat-metro WordPress theme perfect for making a portfolio page, a personal blog, or a corporate website. This is a well-thought out one-page parallax WordPress theme with a smooth parallax scrolling effect that complements its smooth and modern layout. It a fully customizable theme which allows you to customize each section according to your preferences. Vortex Theme Best Features:

  • Supports image and video post types
  • Logo and background uploader
  • Flat design
  • Live color changer
  • 3 layout headers
  • Google fonts
  • Flexslider

View Demo and Purchase Theme Here 2015_06_30_15_57_25_The_Flavour_Just_another_WordPress_site

6. The Flavour – Restaurant WordPress Theme ($ 53)

The Flavour, as its name suggests, will surely bring justice to your restaurant, cafe, food cart, deli, or any food industry-related website. It has a clean and crisp layout that is highly customizable, 100% responsive, and retina-ready. To further make your food website standout, it is loaded with restaurant specific icons as well as reservation and events calendar. The Flavour Theme Best Features:

  • HTML5 animated slider
  • Automatic color picker
  • Sticky navigation menu
  • Mega menu
  • Built-in page layouts
  • Unlimited sidebars

View Demo and Purchase Theme Here 2015_06_30_16_02_28_Cleanlab_Creative_Multi_Purpose_WordPress_Theme

7. CleanLab – Creative Multi-Purpose WordPress Theme ($ 58)

CleanLab is a multi-purpose theme which is great for creating agency or freelancer portfolios, eCommerce websites, and digital marketing agencies. It contains powerful features, such as 5 gorgeous header styles, fully integrated with Google fonts, 900+ icons, unlimited sidebars, and 10 amazing homepages. It also has a a front-end page builder that helps you arrange the position of certain theme elements using the drag and drop functionality as well as  History Timeline to arrange posts or contents in chronological order, so you won’t have difficulty tracking them. CleanLab Theme Best Features:

  • Front-end Pagebuilder
  • Unique Page Layouts
  • Maintenance mode page
  • 404 Error Page
  • History Timeline
  • Over 900 icons included
  • More than 100 pages of documentation
  • Masonry galleries

View Demo and Purchase Theme Here pond

8. Pond – Creative Portfolio / Agency WordPress Theme ($ 43)

Pond is a minimal yet very creative and well-designed WordPress theme with a demo importer, which allows you to easily build a professional creative portfolio. Pond has a multi-page or one-page option, so you don’t have to worry if you still have a limited portfolio. If you opt for a multi-page, two of its amazing features include impressive split sections and multiple header style options. The one-page option is in no way lesser with its amazing hover effect and a very distinct vertical orientation. Pond Theme Best Features:

  • Full typography control
  • Viewport Border
  • Background Parallax Video
  • Revolution Slider
  • Page Builder
  • Ready for WP 4.1+
  • Video / Audio support
  • Ajax Contact Form

View Demo and Purchase Theme Here sonnet

9. Sonnet – One Page Parallax Multipurpose Portfolio ($ 14)

Sonnet is a minimal one-page WordPress theme loaded with a powerful core power, which includes easy customization, flat color, clean content placement, and professional coding. One stand-out feature is the Visual Composer, which is one of the best drag and drop layout builder on WordPress. Its modern and flat design is perfect for creating personal portfolios, product showcase, company profile, or product and photo gallery. Sonnet Theme Best Features: 

  • Megafolio, a responsive grid portfolio plugin
  • Zilla shortcode
  • Pricing table manager
  • Automated plugin management
  • Demo importer

View Demo and Purchase Theme Here 2015_06_30_16_16_08_Ktye

10. Kyte – Flat Onepage Responsive WordPress Theme ($ 43)

Kyte is the theme for creatives, combining the powerful code and awesome features of Twitter Bootstrap, coupled with an amazing parallax styling and other unique features. Fully responsive, Kyte looks awesome across different devices. One of the users have this to say about Kyte:

Kyte Theme Best Features:

  • Drag and drop page builder
  • WP 4.2+ Ready
  • Localisation Ready, Comes with .PO file
  • Multipage and Onepage
  • Retina-ready graphics and icons
  • SEO-friendly
  • Filterable portfolio
  • Google Fonts

View Demo and Purchase Theme Here 2015_06_30_16_29_40_Expression_Premium_Photography_WordPress_Theme

11. Expression Photography Responsive WordPress Theme ($ 58)

Expression is the theme for photographers and other creatives, but can also be used to build other types of websites. It is powered by Pexeto panel, which consists of powerful features to manage and modify every part of your website. Some of these options include  flexible AJAX gallery with awesome jQuery animations and effects. Expression Theme Best Features:

  • Unlimited skins
  • Font management
  • Advanced styling buttons
  • Extensive documentation
  • Additional sliders

View Demo and Purchase Theme Here 2015_06_30_16_34_43_Scalia_WP_Theme_Just_another_WordPress_site

12. Scalia Multi-Concept Business, Shop, One-Page, Blog Theme  ($ 58)

One client who gave Scalia a five-star rating have this to say about the theme:

Scalia is a very versatile parallax WordPress theme filled with innovative features and comprehensive documentation. It is also fully responsive, working seamlessly across different devices. Packed with 150 fully functional demo pages, which you can use to create your own stunning website. Customization is also easy since it is filled with numerous customization options which you can access on the Administration panel. Scalia Theme Best Features:

  • Beautiful Designs From Award-Winning Designer Kontramax
  • Over 150 Demo Samples With Awesome Sliders Included
  • More than 400 Customizable Font Icons Included
  • Lazy Loading Animation
  • Drag´n´drop Page Builder Visual Composer
  • More than 40 Custom Shortcodes

View Demo and Purchase Theme Here 2015_06_30_16_44_17_EPIC_Home_Parallax

13. Epic – Responsive Multi-Purpose Theme ($ 48)

Epic is a sleek and modern WordPress theme with a one-page or multi-page option. Each graphic element of the theme is retina-ready, while the layouts are fully responsive and work flawlessly on different devices and screen sizes. The theme comes with 8 pre-made skins in various color schemes to maintain the uniqueness of each website you build. It also has 4 different header layouts to make your branding more unique, Ajax masonry on your portfolio, and parallax effects which you can add to every section of your page. Epic Theme Best Features:

  • PSD included
  • 100% modular giving you full control over all contents
  • 8 color schemes
  • Multiple home versions
  • Video parallax
  • Sticky navigation

View Demo and Purchase Theme Here 2015_06_30_16_49_51_Skrollex

14. Skrollex – Creative One Page Parallax ($ 16)

Skrollex is a modern and creative one-page parallax theme. Fully responsive and retina ready, it has a light and dark option which are both sleek and creative – perfect for freelance portfolios, landing pages, and many more. Some of its noteworthy features include animated parallax backgrounds as well as video backgrounds. Its scrolling animations and hover effects will also add more distinction to your website. Skrollex Theme Best Features:

  • Unlimited Color Customization
  • Slick Slider
  • Full screen menu and sections
  • LESS stylesheets
  • W3C Valid HTML Code
  • Fully responsive

View Demo and Purchase Theme Here 2015_06_30_16_52_44_

15. Blink – Parallax One Page HTML Template ($ 16)

Blink is a one-page HTML template which has a modern and bold feel. Each detail is carefully designed for optimum user experience across all types of devices and browsers. Blink comes with a modern presentation grid and 5 projects variations to showcase your creativity and style. Aiming not just to become another ordinary template, Blink offers two main navigation styles – the regular menu and the full screen navigational menu powered by a trendy burger icon; parallax backgrounds which allow you to place image backgrounds in each section and enhance them using the parallax effects; and pure CSS content animations for your images, text blocks, heading, and video sections. Blink Theme Best Features:

  • Revolution slider
  • Parallax backgrounds
  • Modern navigation
  • Premium homepage slider
  • 6 Predefined color schemes
  • CSS3 content animations
  • 4 blog page styles
  • Ajax contact form

View Demo and Purchase Theme Here 2015_06_30_17_01_02_Parasponsive

16. Parasponsive WooCommerce WordPress Parallax ($ 58)

Parasponsive is a WooCommerce WordpPress theme which has undergone many updates and is now in its version 5.0, loaded with powerful features to power up your eCommerce store or online shop. The theme has a powerful admin panel where you can access popular shortcodes, the homepage layout builder, the portfolio gallery, and many more. It is also multi-lingual ready, so you don’t have to worry wherever your customers come from. Parasponsive Theme Best Features:

  • Bootstrap framework
  • More than 650 Google fonts
  • Social sharing buttons
  • Isotope portfolio
  • Flexible settings
  • Custom widgets
  • Powerful admin panel
  • Parallax layer slider

View Demo and Purchase Theme Here jkreativ

17. JKreativ – Multilayer Parallax MultiPurpose Theme ($ 58)

With more than 2000 sales, JKreativ is one theme loaded with awesome effects that would surely liven up your website without compromising its professionalism. For one, JKreativ is considered as the first multi-layered parallax theme with unlimited layers of parallax for super smooth scroll effect as well as complete control. It also has different portfolio and gallery options including Masonry, Ajax, and Justified layout. Other noteworthy features include slider revolution, 360-degree image slider, and content animation effects. JKreative Theme Best Features:

  • 3 Built-in fullscreen sliders – parallax slider, fullscreen text slider, split slider
  • Music background on every page
  • 3 Types of page loader
  • Smooth scroll
  • Parallax video
  • Custom drag & drop builder with shortcode generator
  • WPML compatible

View Demo and Purchase Theme Here 2015_06_30_17_08_05_Status_Theme_Just_another_WordPress_site

18. Status – Parallax and modular Theme ($ 43)

Status is a new parallax WordPress theme yet it has already reached more than a thousand sales with a 4.14% average of five-star ratings. What makes this theme popular is its features and functions which has been built on solid backend framework. Ideal for either business or portfolio websites, Status has parallax layout with scroll effect, layout shortcodes, modular layout sections, unlimited color schemes, 12 custom widgets, shortcode generator, and post sliders. Status Theme Best Features:

  • Theme can be used without scroll effect
  • Font selector/custom typography – 52 fonts available (web-safe fonts and Google webfonts)
  • Full width jQuery slider (Flex slider),
  • Custom posts: Layout, Services, Portfolio, Clients, Pricing tables,
  • Unique Mosaic section for Blog and/or Portfolio posts,
  • 7 Posts formats: standard, video, audio, gallery, image, link, quote,

View Demo and Purchase Theme Here 2015_06_30_17_10_36_Nature

19. Nature Responsive WordPress Theme ($ 48)

Nature, like its namesake, is a clean and bold theme, fully responsive, and perfect for any types of websites, but focused solely on activism. The theme offers beautiful gallery pages, which uses masonry to display the images with directional rollovers and lightbox built in it. There is also a special section found in the donation homepage template which allows you to update or set up a target. You also have unlimited layout and styling options using the built-in color picker for unlimited color schemes and column short codes. Nature Theme Best Features:

  • Full suite of pages, including right side bar template, full width template, contact […]
IMG_1318.PNG

Infragistics Indigo Studio: Real Rapid Prototyping for Web, Mobile, and Desktop

Rapid prototyping is an essential way of saving time in our modern age where billions of apps compete for the customer’s attention. Is the great idea you had for just another app actually that great or is it just another failure among the millions of failures in app stores and the web worldwide? Apart from that angle rapid prototyping has always been the easiest and at the same time most impressive way of showing a customer a functional demo of the project you are trying to sell him. Whether it’s development for the web, for mobile or the desktop, you shouldn’t do it without having done a working prototype. Infragistics Indigo Studio is a software that can help you do just that…

indigostudio-teaser_EN

The History of Prototyping

I have created websites since the early nineties. And I have worked with countless clients from different industries around the world. What always was the hardest part in any given project, was the design discussion. Just like any other designer I knew then, we used to squeeze out a quick Photoshop mockup to show it to the client.

These mockups were sent by mail, and feedback was given in the same way, except that the client more often than not had imported the mockup into Word. That bloated document then got sent back and forth until both me and the client lost track. With clients nearby I hopped into the car, drove over with printed-out versions of what I thought was the latest version. Then we sat together around the conference table and scribbled onto the prints.

This was extremely time-consuming and despite the effort not very reliable. In the late Nineties, I turned to Microsoft’s Powerpoint to solve another problem that had arisen. Clients wanted to see a working version of their site-to-be. But I didn’t mean to produce actual markup and waste time on a design that was most likely far from final. Powerpoint allowed me to link mockups together via hotspots, very similar to clickable URLs. The result could be exported in a way that no Powerpoint at the client side was needed.

Then a company named Macromedia came up with a product called Fireworks. I left Powerpoint without looking back and turned to Fireworks. With this software, we could produce mockups just like we could in Photoshop, but with a better focus on web production. Fireworks enabled us to create graphic prototypes with clickable URLs directly integrated. We would then export the project to HTML, upload it to a web server and be presentation-ready.

Adobe bought the company, did not do much to keep Fireworks updated and eventually left the software behind. You can still use it as a Creative Cloud subscriber, but there’ll be no more updates and enhancements. A substitute is utterly needed.

Infragistics Indigo Studio for Mac and Windows

To call Infragistics Indigo Studio that substitute for Fireworks is right and wrong at the same time because Indigo Studio delivers less and more than Fireworks. When it comes to features of image editing and manipulation, Indigo Studio is in no way comparable to Fireworks as these features simply do not exist. Well, we have Photoshop, Pixelmator, our hands, paper for that.

indigostudio-workingonscreen

When it comes to the prototyping features, Indigo Studio leaves Fireworks far behind. Building a prototype or wireframe (if you prefer) with Indigo Studio is a pleasant experience I would call almost intuitive.

Indigo Studio is a software you will need to install to your local machine. It is not one of those hyped web apps but more the conservative kind – not the showman, more the worker. The software is available for Windows and Mac OS alike. No designer is left behind

Differences to Other Solutions

Before we take a look at the prototyping process let me work out the most significant differences to other tools I came across during the years.

As I already mentioned image editing is not a core feature of Indigo Studio. This does not mean that you can only build simple wireframes with it. The sketching functionality is excellent and the possibility to import from your favorite editors is given. You will not miss a thing.

Indigo Studio does not only let you build wireframes. It also cares for the user story around the app you are trying to create. You can design storyboards lining out the use case of your idea and how it interacts with reality. Take a look at that video in which Infragistics sketches out a car support app from a real-life situation.

Other wireframing prototypers let you create a bunch of screens, and then allow you to connect them. That’s the way I was used to working with Powerpoint in the late Nineties. Indigo Studio calls its approach seamless. In Indigo Studio, you produce the different screens while you lay out the app. Start with the initial screen and proceed from there. Screens are added as needed. You do not need to think the whole app through beforehand but can evolve from any state you are working on.

Indigo Studio can add some pizazz to the prototypes. To amp things up and have your project look more lively and appealing, you can add animations and transitions to the different screens and screen parts you create. Especially prototypes of mobile apps benefit from that feature. Flash users will recognize the timeline functionality and like the software just because of that

Although you can build just about any prototype of any interactive project you can think of, Indigo Studio sees itself as a specialist in UI design. It offers a solid feature set to support UI designers with a bunch of ready-made elements and more. Creators of artsy web pages might not feel at home with Indigo Studio, but designers and developers of feature-driven websites will. Software architecture is what Indigo Studio does best.

indigostudio-landing

If you like what you just read, stick with me and let’s take a quick look at how it’s all done.

Before you read on, please note that Indigo Studio is no free offering. You can download it for free and use their 30-day trial, however. Should you be convinced afterward, and I suppose you will be, the software costs a one-time fee of 495 USD. This does sound a lot at first sight but is not that much more compared to Fireworks and much less than other tools we use on a daily basis.

What you need to judge for yourself is whether you got enough projects that need prototyping. If you do more than two or three larger wireframes a month and bill usual rates, Indigo Studio should make itself paid in a month already. But this depends largely on the way you run your business.

Indigo Studio: Starting Out

Indigo Studio is one of the most intuitive software I know. This may tell you more about me than about the software, but I tend to think that my approach to things is not too far away from the industry’s average.

Indigo Studio starts into an overview of your latest projects and their different states. From here you can open and save them, start new ones and access the support areas. Getting started with the software is accelerated by a few samples they deliver, among them a blog project and an app for searching flights. Working with these samples gives you a good idea of what to do how.

indigostudio-startscreen

The start screen of Indigo Studio reminds me of the start screens of modern Microsoft software such as Office. I suppose this is no coincidence as – besides Indigo Studio – Infragistics has a lot of software tools for Windows developers in store.

If you want to delve into the software quickly, there are two ways. The first thing to do is to watch the six videos they have to introduce you to all the main functionality. You can either view them via YouTube or access them from the splash screen of Indigo itself. These small films take up about half an hour of your time, and these are very well spent 30 minutes. I did feel right at home with the software afterward.

indigostudio-splash

Once done look into the sample projects Indigo Studio installed onto your local hard-drive to get going quickly. I estimate it will take you less than half a day and you will be up and running with Indigo Studio. The 30-day trial period will definitely suffice to let you judge whether or not you want to use the software for your business.

Indigo Studio and the First Prototype

Starting a new project with Indigo Studio is pretty straight-forward. As soon as you click the “New” button, you are prompted to choose whether you want to create a screen, a screen part or a storyboard.

indigostudio-startingout

I already mentioned storyboards above. I am not a storyboard scribbler, but if you are, this feature will make you fall in love with Indigo Studio. You can drop all your digitized hand-drawn scribbles onto the stage. Scribbles of the app can even be framed with fitting surroundings such as a hand carrying a smartphone on which screen your scribble resides. This is great and simple and fast – a pity I never use this way to start a design project

indigo-storyboard-image
Storyboard for an App

Screen parts are – well – parts of the screen you want to reuse in your designs. Of course could you just copy and paste the reusable parts but with the dedicated feature changing and managing these parts becomes much easier and more convenient. Think of it as a library item linked to more than one destination.

Screens are what represents the UI of any given project. This is what you will create first thing. Derive screen parts from the screen and derive different states from the initial start screen. As I already mentioned you will not need to draw all the screens individually then link them together. That’s how I did it with Powerpoint in the Nineties.

Instead you go ahead and create the start screen. Then you add more screens or screen states (same screen with slight alteration) to it. The growth of your prototype is represented by a tree view showing you the connections between given screens or states. That’s what Infragistics calls a seamless process. Add whatever necessary when you find it necessary.

I know that some purist might now intervene and object that this is not a clean development process but remember, we are talking about rapid prototyping. The aim is to put a functional model out as quickly as possible. And Indigo Studio really lives up to this challenge.

Adding Beauty: Indigo Studio’s Animations and Transitions

This one is mostly for (mobile) app design. We know that plain functionality usually does not look that sexy at all. Presenting numbers, charts, texts is not bound to induce euphoric oohs and aahs with anyone watching. With Indigo Studio, your prototypes will be far from boring. To achieve that, you will want to add animations and transitions.

Doing so is easy. If you have ever worked with Adobe Flash, where everything is about animation and the timeline is the single most important software feature, you will feel familiar with Indigo Studio, too. Just like you are used to from Flash, you will add different states of the same element, then stretch in a timeline on which you will animate the transition from one state to the other.

This might not be a necessary part of the prototyping process but if you are still on the way of selling the project to someone, be it your boss, your client or any other stakeholder, this might make all the difference.

Share Your Prototype Easily

Testing your prototypes is always only one click away. The button “Run” sits right above the working area and does what you’d expect it to. Click on it and see your prototype in motion. While working on individual screens the button is named “Run Screen” and runs this individual screen only.

While this is all fine during work on the project, presenting the prototype to other people needs different measures; especially when your client sits overseas. That’s where “Share Prototype” comes into play. The sharing feature is two-fold.

indigostudio-shareprototype

For your overseas clients, you could choose to publish the prototype to Indigo’s service under Indigodesigned.com. You could add a description, limit access and more to make sure the prototype explains itself.

Do you want to present the prototype locally or on your own server space you would choose “Share on your desktop”. That way a functional project would be exported into an appropriate folder structure with all the CSS and JavaScript needed, leaving you with an index.html to call in any browser you like to be presentation-ready. Alternatively you could as well upload the folder structure to your web host and have it called from there, even by the overseas client.

Is your prototype only representing a fragment of the intended feature set as a whole or is your project not so easy to understand, feel free to make extensive use of Indigo Studio’s annotate functionality. Tell your users where to click or tap to achieve what and make sure to handle potential errors that way. The annotate feature is a good way to guide users through your design.

Conclusion

Infragistics Indigo Studio for Mac OS and Windows is a user-friendly software for real rapid prototyping. I got a grip of how to achieve what in less than an hour time and was able to get productive the same day. Are you looking for a fast way to get that wireframe out and approved, Indigo Studio might end your search. With its 495 USD one-time fee, it is not exactly cheap but the feature set is extensive and will not leave you with post-decisional regret once you made the purchase.

Make sure to check out the 30-day trial that comes entirely free of charge and with no strings attached. All you need to offer is a functional email address to receive the download link. That’s all. No payment or personal data is required. What are you waiting for?

indigostudio-start30daytrial

2200e__02-animated-x-svg-icon-hamburger-menu

Trends & Examples of SVG Animation in Web Design

Animation on the web has transformed radically over the past 5 years. SVG animation is one of the newest techniques to manipulate graphics on a webpage. Although SVG has been supported for a long time, it only recently gained support in a majority of web browsers.

 

With greater support comes a greater audience and more safety for developers to test out cool ideas. Over time these ideas turn into common trends as they’re adopted by hundreds of designers. I’ve picked out a few examples that best demonstrate these SVG animation effects and how they can be applied to website layouts.

Navigation Effects

Website headers & nav menus are the perfect areas for dynamic SVGs. Vectors can work as both icons and text which leaves plenty of room for improvisation.

Most designers would agree that usability comes before aesthetics. Form follows function. This means you shouldn’t go crazy with the effects, but if you can enhance the interface it’s worth the effort.

bjango animated svg navigation

One of my favorite examples can be found in the Bjango navigation. Each link including the logo is designed as an SVG. When hovering the links you’ll get a nice bounce effect coupled with a unique color. The logo actually displays a unique gradient to capture more attention.

While some developers may be against the use of SVGs for text-based elements, the effect really does add a snap into the design. Even though it’s pretty simple the animation clearly stands out.

Navigation icons are another use for SVGs. Some designers incorporate unique icons above links while others use icons to connect with the navigation. One example is the popular hamburger 3-bar menu icon connected with sliding drawer menus.

hamburger three bar icon svg

This CodePen snippet exemplifies the beauty of an SVG animation. It turns into an X with a circular ring around the icon. It not only captures attention but also delivers a message without using any words.

If you want more dynamic icons you could fit them into sub-headers or internal navigation sections. For example Zoook’s musicana page uses music icons to delineate product categories.

svg animated music notes

Notice that the primary music icon is an SVG with subtle animation effects. Music notes play out of the speaker and give a sense of life to the page.

There’s no need to force unwanted SVGs into a page header – but when used appropriately they can add a certain vibrancy to the layout.

Custom Vector Backgrounds

We’ve all heard about fullscreen images and video backgrounds on the rise. Both trends have become widely adopted to bring attention into certain areas of a webpage.

Custom graphics have always been popular as background features. Unfortunately not all designers have the skillset to implement custom-designed graphics. But with the rise of free tutorials and vector editing tools it’s never been easier to create animated vector backgrounds.

Some graphics are meant to blend with the company branding while others are designed to be more “realistic”. Take a look at the homepage for Cleverbridge.

cleverbridge svg animated background

The top page section uses a bright orange map with fractal elements jumping along to different countries. The animation is meant to represent eCommerce and how the Internet makes it easier to purchasing anything from anywhere in the world.

Some folks go for the more aesthetic background to give off a certain mood. On the booncon PIXELS homepage you’ll find a block featuring motion graphics in the form of flat vector shapes.

booncon agency animated svg background

If you inspect the code you’ll realize this isn’t a single image, but rather a full SVG element in HTML code. Animated elements are contained in separate groups like the ferris wheel & hot air balloon.

You can imagine how much work is required to both design and code this animation. Since booncon is a digital creative agency it fits nicely in their portfolio. It also matches up with their slogan “pretty code – smart design”. Definitely worth the effort(in this designer’s opinion).

why do buses bunch svg animation

One other example isn’t technically fullscreen but it is part of the background. Setosa is a data visualization site and one page is dedicated to explaining why buses bunch up. There’s a small area for content along with an animated track to display how buses move.

As you can tell from these examples, SVG animation can be aesthetic or even educational. And backgrounds are the perfect way to add graphics without taking up more space on the page.

App Demos and Sample Previews

Every so often you’ll find a landing page with live previews of the software. Many of these demos take the form of videos or screenshots while others are created using SVGs.

The purpose of an SVG demo is to show how the program works. Obviously SVGs can’t include a lot of detail, so the interfaces are slimmed down and more straightforward. Square Cash has a great example on their homepage.

square cash ui animated svg

An SVG browser appears with some basic features of the site. This animation explains the purpose of their software and why you might use it. Plus you’ll find other animated SVGs in different areas of the page that tie into this same design style.

inline hq svg animated website

Inline is an online design tool kinda like a simplified version of Photoshop. You can share your designs with others and keep them stored in the cloud for easy access.

On their homepage you’ll see a quick demo mockup created using SVG animation. Everything from the mouse cursor to the browser interface are separate SVG elements.

This effect primarily works on landing pages made for desktop or web software. It’s definitely not ubiquitous but it’s a trend growing in popularity.

Featured Icon Animations

SVG icons have been around for a while and recently gained support from a majority of web browsers. But featured SVG icons can also be animated either by themselves or by user interaction like a mouse click or hover.

threader pally icons svgs

On the homepage of Threader you’ll find three SVG icons lined up with features. As you hover over each icon you’ll notice an interesting animation. In this case they only animate once but you can set the animation to behave any way you like.

animated svg line icons

Authentic Form & Function has a different approach to SVG icon animation. Take a look at their services page and scroll down to each section.

A few illustrations are animated to describe features or particular services provided by the agency. The animations are triggered by scrolling into view which is also a unique effect.

SVG & Canvas Icons

Advanced web developers have been testing out the canvas element in conjunction with SVG animation. HTML <canvas> is like a container which can hold multiple SVGs or even bitmap images.

This allows developers to animate multiple elements on the page in many different directions. Take for example the landing page for Hell’o Baby. Each SVG is contained within a canvas element for greater control over the icons.

hello baby app svg icons

For most designers this would be going too far. Canvas is primarily useful when designing HTML5 games for 2D/3D graphics. But as this spec evolves I think we’ll see a lot of great animation tricks that rely on canvas.

For now it’s just another tool in your SVG animation toolbelt.

The Future of SVG

Even though most browsers support SVG it’s still a trend that’s gaining momentum. Designers who learned to build websites 10+ years ago may not have time to learn about these newer methods.

Typical CSS3 animation is still gaining traction so you can imagine CSS3/SVG animation has a few years before really going mainstream. But with increased browser support and emerging design trends there’s no doubt that SVGs are the future of motion graphics for the web.

IMG_1292.JPG

Outline – The Clean Responsive CSS Framework

Outline is a simple CSS starter responsive boilerplate for any new web project, created by Matt Harris. It’s a modular, mobile-first framework which includes todays best practices for responsive design and core components I use on every project. Outline is designed to be a starting point. A solid foundation for your project, leaving the creativity up to you.

outline-framework

Requirements: –
Demo: http://www.outlinecss.co.uk/
License: MIT License

IMG_1313.JPG

26 New Photoshop Free PSD Files for UI Design

Highest quality UI design Free PSD Files download for commercial graphic design projects. GDJ is a best place to download freebies vector graphics, mockup designs and free PSD files. Here, we have a fresh collection of useful free PSD files created by professional designers, which can save your same time and money. These PSD files are very useful for graphic designers.

Fresh Free PSD Files for User Interface Design

GDJ is one of the best Graphic Design blog to download highest quality freebies, web and graphic design resources like vector graphics, free fonts vector graphics, and UI design elements. In this collection we put to gather free Photoshop PSD files which are very helpful for designers to design beautiful UI with amazing UX.

Free Metalic Style Logo Mockup
Free Metalic Style Logo Mockup

Download PSD File

Free Minimal Resume Template
Free Minimal Resume Template by Mats-Peter Forss

Download PSD File

Free Verve UI Kit for iOS Photo & Social App
Free Verve UI Kit for iOS Photo & Social App by Oleg Bolshakov

Download PSD File

Free Dispenser Bottle Mockup
Free Dispenser Bottle Mockup

Download PSD File

Mega Collection of Free Infographic Vector Elements
Mega Collection of Free Infographic Vector Elements

Download PSD File

Sweetcozy Hotel & Restaurant Logo
Sweetcozy Hotel & Restaurant Logoby HevnGrafix Design

Download PSD File

Minimal E-commerce Free PSD Template
Minimal E-commerce Free PSD Template by NIKITIN

Download PSD File

Free Macbook Workspace Mockup
Free Macbook Workspace Mockup by Bruno Marinho

Download PSD File

Newsletter Subscription Form Mockup
Newsletter Subscription Form Mockup

Download PSD File

Free Vintage Rolleiflex Badge
Free Vintage Rolleiflex Badge

Download PSD File

Modern Admin Dashboard UI Template
Modern Admin Dashboard UI Template

Download PSD File

Sushi Talk Logo
Sushi Talk Logo by HevnGrafix Design

Download PSD File

Free Cream Jar Mockup
Free Cream Jar Mockup

Download PSD File

Free Psd web mockup
Free Psd web mockup

Download PSD File

Free Smart Brochure Mock-up
Free Smart Brochure Mock-up by Hasibur Rahman

Download PSD File

Free Comming Soon Landing Page PSD Template
Free Comming Soon Landing Page PSD Template

Download PSD File

iPhone 6 Mockups PSD Template
iPhone 6 Mockups PSD Template

Download PSD File

Free Portfolio Brochure Template
Free Portfolio Brochure Template

Download PSD File

Square smart watch mockup
Square smart watch mockup, based on Samsung Galaxy Gear

Download PSD File

Free Creative Business card Template
Free Creative Business card Template

Download PSD File

Freebie – Bolod One Page PSD Template
Freebie - Bolod One Page PSD Template

Download PSD File

Free Photo-realistic Mock-up pack
Free Photo-realistic Mock-up pack

Download PSD File

Free Web Developer Business Card PSD Template
Free Web Developer Business Card PSD Template

Download PSD File

Freebie Tri-Fold Corporate Brochure
Freebie Tri-Fold Corporate Brochure

Download PSD File

Free Landing page PSD Design Download
Free Landing page PSD Design Download

Download PSD File

Pakistani Heroes and fearless warrior
Pakistani Heroes and fearless warrior

Download PSD File

IMG_1312.PNG

Spectacle – A ReactJS Presentation Library

Spectacle is a React-powered presentation library. With Spectacle you can write slides with JSX. It supports tags like <Deck>, <Slide>, and there are even layout tags for making text appear in the right place without too much fiddling about with CSS. It even supports a presenter view, so you can see the next side and the current time. If you’re currently addicted to React then this will probably be preferable to messing around in Keynote/PowerPoint/etc.

spectacle

Requirements: ReactJS
Demo: http://projects.formidablelabs.com/spectacle/#/
License: MIT License

IMG_1274.JPG

ExpandJS – Built with Polymer & Google’s Material Design

ExpandJS is a modular library with 80+ custom elements and 350+ utility functions to kickstart your Web Applications. The elements are built upon Polymer and follow Google’s Material Design guidelines, allowing for beautiful and responsive interfaces. The utility library is an extension of lodash, adding more functions and introducing checks for unexpected arguments. It is released under BSD-3-Clause License.

expand-js

Requirements: javaScript Framework
Demo: http://expandjs.com/
License: BSD License

IMG_1279.PNG

Top 50 Free Web UI Kits and Templates

As you would expect, the vast majority of recent and free UI kits and templates have been designed in a flat-style, but after this year’s release of iOS8 with it’s elegant ‘line-style’ UI, and the introduction of Google’s gorgeous Material Design, we have seen many templates being freely released that have incorporated both of these exciting styles.

So if you’re looking to design a website or a mobile app in a unique modern style, these templates should give you a good base for starting your next project.

The GUI templates are available in many different formats, with PSDs, as expected, being heavily represented, but there is also a noticeable increase in the number of templates that are available in Sketch format. All of the templates are free to download and most will allow you to use them in both personal and commercial projects, but please do check the license before you do use them.

Here are the templates…

WakeApp Mobile UI Kit (AI, EPS, PNG)

WakeApp Mobile UI Kit AI, EPS, PNG

WakeApp Mobile UI Kit Download Page →

Spot UI Kit (PSD)

Spot UI Kit PSD

Download Page →

(PSD)

Flowchart Kit (Sketch)

Flowchart Kit Sketch

Flowchart Kit Download Page →

Material Design UI Kit (PSD)

Material Design UI Kit

Material Design UI Kit Download Page →

Arise Creative Agency UI Kit (PSD)

Arise Creative Agency UI Kit PSD

Arise Creative Agency UI Kit Download Page →

Epic UI Kit (PSD)

Epic UI Kit PSD

Epic UI Kit Download Page →

Creative Mind Blogging UI Kit (PSD)

Creative Mind Blogging UI Kit PSD

Creative Mind Blogging UI Kit Download Page →

Player Complete UI Kit (Sketch)

Player Complete UI Kit

Player Complete UI Kit Download Page →

OSX Yosemite UI Kit (PSD)

OSX Yosemite UI Kit

OSX Yosemite UI Kit Download Page →

Zen UI Kit (PSD)

Zen UI Kit

Zen UI Kit Download Page →

UI Kit Based on Bootstrap (PSD)

UI Kit Based on Bootstrap

UI Kit Based on Bootstrap Download Page →

UI Kit from Shakuro (PSD)

UI Kit from Shakuro

UI Kit Download Page →

Mini UI Kit (Sketch)

Mini UI Kit

Mini UI Kit Download Page →

Flat UI Kit (PSD)

Flat UI Kit

Flat UI Kit Download Page →

Joocy UI Kit (PSD)

Joocy UI Kit

Joocy UI Kit Download Page →

Modern Simple and Elegant UI Kit (PSD)

Modern Simple and Elegant UI Kit PSD

Modern Simple UI Kit Download Page →

Bootstrap 3 Vector UI Kit (AI & Sketch)

Bootstrap 3 Vector UI Kit AI Sketch

Bootstrap 3 Vector UI Kit Download Page →

Flat UI Kit (PSD)

Flat UI Kit by Connor Murphy PSD

Flat UI Kit Download Page →

Rampy Flat UI Kit (PSD)

Rampy Flat UI Kit v1.0 PSD

Rampy Flat UI Kit Download Page →

Data Analysis UI Kit (PSD)

Data Analysis UI Kit PSD

Data Analysis UI Kit Download Page →

Minimal UI Kit (PSD)

Minimal UI Kit psd

Minimal UI Kit Download Page →

Summer Ui Kit (PSD)

Summer Ui Kit psd

Summer Ui Kit Download Page →

UI Kit (AI & EPS)

UI Kit by Ahmed Mu ai eps

UI Kit Download Page →

Modern UI Kit (PSD)

Modern UI Kit psd

Modern UI Kit Download Page →

Awesome UI Kit (PSD)

Awesome UI Kit

Awesome UI Kit Download Page →

UI Kit For News (PSD)

UI Kit For News

UI Kit For News Download Page →

Dashboard UI (PSD)

Dashboard UI PSD

Dashboard UI Download Page →

Designer-naut UI Kit

Designer-naut UI Kit

Designer-naut UI Kit Download Page →

Atom Modern UI Kit (PSD)

Atom Modern UI Kit

Atom Modern UI Kit Download Page →

Flat Ui Kit (PSD)

Flat Ui Kit by Andrew McKay PSD

Flat Ui Kit Download Page →

Dark and Light Ui Kit (Sketch)

Dark and Light Ui Kit by Mateusz Dembek

Dark and Light Ui Kit Download Page →

Modern UI Kit (PSD)

Modern UI Kit

Modern UI Kit Download Page →

Redlight Complete Friendly User Interface (PSD)

Redlight Complete Friendly User Interface

Redlight Complete Friendly User Interface Download Page →

Eye Candy UI Kit XL (PSD)

Eye Candy UI Kit XL

Eye Candy UI Kit XL Download Page →

Edge – Customizable Component Based Web UI Kit (PSD)

Edge - Customizable Component Based Web UI Kit PSD

Edge Download Page →

Mountain Flat UI Kit (PSD)

Mountain Flat UI Kit PSD

Mountain Flat UI Kit Download Page →

Material Design UI Kit (PSD)

Material Design UI Kit by UltraLinx

Material Design UI Kit Download Page →

Material Design UI Template & Icons (Sketch)

Material Design UI Template & Icons by Kyle Ledbetter

Material Design UI Template & Icons Download Page →

Material Design UI Kit (Sketch)

Material Design UI Kit Download Page →

Flat UI Kit (PSD)

Flat UI Kit PSD

Flat UI Kit Download Page →

Flat Ui by NAS (PSD)

Flat Ui by NAS

Flat Ui Download Page →

UI Kit by Kamal Chaneman (PSD)

UI Kit by Kamal Chaneman

UI Kit Download Page →

Modern Flat UI Kit (PSD)

Modern Flat UI Kit

odern Flat UI Kit Download Page →

UI Kit by Jakub Kosewski (PSD)

UI Kit by Jakub Kosewski

UI Kit Download Page →

Winter UI Kit (PSD)

Winter UI Kit

Winter UI Kit Download Page →

Coloro UI Kit (PSD)

Coloro UI Kit

oloro UI Kit Download Page →

Sven ModernUi Kit (PSD)

Sven ModernUi Kit

Sven ModernUi Kit Download Page →

Elements UI KIT (PSD)

Elements UI KIT

Elements UI KIT Download Page →

Ultimate Infographics Pack (AI)

Ultimate Infographics Pack

Ultimate Infographics Pack Download Page →

Flat UI Kit (Sketch)

Flat UI Kit

Flat UI Kit Download Page →

IMG_1291.JPG

Awful Website Navigation Mistakes You Should Avoid

A website’s navigation is one of the most important elements in a site’s design. Visitors need to use navigation to make their way through the website and find the information that they are looking for quickly.

If the navigation is confusing or if it trips up the user in any way, you run the risk that they will grow frustrated and leave the site altogether. Simply put, website navigation should be clear and intuitive. To achieve these traits, I outline 7 mistakes that you really need to avoid in the design of your website navigation.

1. Too Many Options

Give a person 15 options to choose from and it will take them longer to make a choice than if you had only give them 8 options. The fewer possible choices that someone can make, the quicker they can evaluate those choices and then make a decision.

Unfortunately, when it comes to website navigation, many companies try to cram everything possible into their site’s primary navigation bar so that visitors have immediate access to all page options.

This may sound like a good idea since making content easy to get to is a worthwhile goal, but an overload of navigation links will actually end up backfiring. Instead of allowing visitors to easily see what pages are available, they will become overwhelmed by the breadth of choices and unable to quickly make a decision as to what to do next.

The minute those people start to question what they should click next, you run the risk that what they will actually do is click is the “Back” button that takes them away from your site and its confusing navigation scheme.

When planning and designing a site’s primary navigation, be aggressive in editing that menu down to the fewest, most important options possible. By presenting fewer options up front, you will actually encourage people to make quicker choices and go deeper into your site.

2. Wrong Options

Another mistake that people make when planning a site’s navigation, especially when they start deciding what to leave in the primary nav and what to move to subsection navigation, is that they cut the wrong items and leave in links that are not important to a site’s actual audience.

Remember, a website needs to be designed for the needs of the people who will use it. As such, the content or features that are important to them are what should be focused on.

A link like “Message from the President” may be important to a company’s CEO, but if that company’s customers are not looking for that content, then placing it in the navigation row is misguided, especially if it is in there instead of a link that actually is important to the site’s customers!

3. Go Big or Go Home

Today’s websites are being visited on a variety of devices and screen sizes. The days of only giant, desktop monitors being used to access web content is long over, so to succeed on the Web today, sites and their navigation need to accommodate this wide range of screens.

Navigation schemes are too often designed solely for large screen monitors. On smaller screens, including tablets and phones, that navigation will break down and become unusable. This is why websites need to be built with a responsive approach to multi-device support.

With a responsive site, navigation can be redesigned for different screen sizes to ensure that it is always clear and easy to use. A platform like Webydo, with their pixel perfect responsive editor, is a great way to design different navigation schemes for the various sizes that a website will display at – and with Webydo’s code-free development platform, once the navigation and pages are designed, they can be easily published as working webpages!

4. Fly Out Menu Mayhem

As you work to edit the number of options down for a site’s primary menu, you will begin to find links and pages that are better presented as submenus. For instance, the primary nav may have an option for “Our Company”, and underneath this button/section you may have other options that, while necessary for the site, are not important enough to warrant primary nav placement. These could include:

  • Company History
  • Leadership Team
  • Testimonials
  • Careers

One of the ways you can present these submenus is with a dropdown or a fly-out menu. This is where a menu appears once you hover your mouse cursor over a top-level link. This treatment, while common, can prevent some challenges, however.

For instance, on touch screen devices where there is technically no “hover” state, you want to make sure your links are still accessible to users. You also want to avoid fly out menus that have 3 or more levels. It is often difficult to navigate menu systems that have fly-outs that come from other fly-outs, so avoid these unwieldy menus in any site you design.

If you would like to learn more about which navigation type is best suited for your site, The Importance of Navigation Design Patterns discusses the the various types of navigation systems using examples from some of the hottest websites and web apps.

5. Inconsistency

Once a person figures out how to use your navigation menu and they are comfortable with where everything is, do not change that on them! Websites should have consistent navigation through the entire experience, regardless of what page they are on. Submenus may change from page to page, but the primary nav or controls should be set in stone.

6. Too Long

Editing a site’s navigation options to present fewer choices is important, but you also need to make sure that the text label for the choices that remain are short and sweet.

A link that says “All About Our Company” is unnecessary when just “Our Company”, “Company”, “About Us”, or “About” would all work just fine. This may not seem like a big edit, but we have gone from 4 words to just 1 or 2.

If you edit like this across an entire navigation bar, you will have effectively cut the amount of text that people have to process in half while still conveying the proper content for those links.

7. Wrong Tone

Every website has a tone. That tone could be loose and friendly, it could be professional and straightforward, or any number of other possibilities. Whatever the tone of a site is, the language of the navigation should reflect it.

If a website is meant to be friendly and helpful, a link that reads “How We Can Help” may be more suitable that one that simply says “Services”. By understanding the tone of a site’s message, you can design navigation that is consistent with that tone.

Yes, in this instance the first text is much longer than the second, which seems contrary to other tips presented in this article, but remember the goal is not necessarily to make the text as short as possible, but to make the right choices overall. This does include the proper text length, but it also includes the right tone, options, and more.

In Closing

The design of a website’s navigation can make or break an experience. By ensuring that the navigational structure is clear and easy-to-use, you encourage visitors to spend some time on a site and you help direct them to the content or features that are important to them and important to your business.