Designbeep http://designbeep.com Free Resources for Designers and Developers Mon, 02 Mar 2015 05:07:10 +0000 en-US hourly 1 10 Ridiculous Web Design Blunders to Avoid at All Costs http://designbeep.com/2015/02/28/10-ridiculous-web-design-blunders-to-avoid-at-all-costs/ http://designbeep.com/2015/02/28/10-ridiculous-web-design-blunders-to-avoid-at-all-costs/#comments Sat, 28 Feb 2015 10:55:29 +0000 http://designbeep.com/?p=55801 If you are serious about your online credibility, the first thing you must do is get a good website designed that impresses your audience. However, if you are making web design mistakes during the course of the web design process, you are definitely going to hurt the reputation of the business the website represents.

There are mistakes, and then there are blunders. While visitors tend to ignore certain mistakes, they don’t like designers making blunders.

Let’s talk about 10 ridiculous webs design blunders that will repel visitors and result in your business profitability taking a beating:

Content Clutter

content-clutterTake a look at this website. All you can see is a large collection of text, links and navigation buttons coming together on the page; these seem to have no specific purpose whatsoever. There is no white space between two lines and low quality images are scattered throughout the site. Did you like what you see? No! That’s not a surprise because visitors don’t like cluttered content on a site.

It seems the designers weren’t very concerned about the impression this site would make on its target audience; that is why they designed the website for themselves and not for users!

Actionable Insight: Use a white background and increase the space between two lines. Focus on better fonts and bulleted lists so that readers grasp important information at a glance.

Bad Navigation

bad-navigationYou have a great looking website and good content but if the navigation is confusing, it won’t do any good to your online business.

Look at Goop.com (this is Gwyneth Paltrow’s website) – the navigation bar in the top header is dotted with vague categories like “go”, “be”, ‘do”, etc. It is so frustrating for visitors because they will have no idea what the categories are.

Do not commit that mistake in your website and give your visitors the opportunity to ask questions like:

  • Where am I?
  • Where can I go next?
  • Where will I get what I am looking for?

Actionable Insight: Stick to accepted web navigation conventions and use elements that are easily recognized. Do not invent visual text.

Colors Repel

colors-repelColors have a special place in web design. If you know how to use the right color at the right place, your job as a web designer is half done. But if you use it the way Penny Juice has done, your visitors will have to use goggles to surf your website!

The color contrast is very harsh and not easy on the eyes. Your eyes strain to read white colored text against the dark coloured background. There is a chance the designer got carried away and decided to use rainbow colors, to terrible effect.

Actionable Insight: Use primary Red, Green and Blue (RGB) colors and analogous and complimentary shades to create matching and contrast color shading wherever required.

Too Much Advertising

too-much-advertisingLings Cars is a fine example of a website that has gone overboard with advertisements. It is difficult to differentiate between content and ads. The entire page distracts and is “good” enough to give you migraine if you focus too hard on the content.

If you find the site has high bounce rates and abysmal ranking in search results, don’t be surprised.

Actionable Insight: Replace advertisement clutter with content that provides insight and incorporate bigger images. Keep one or two ads per page and spread content across pages rather than bombarding it on a single page.

Typos and Grammar Errors

typas-and-grammar-errorsNothing appears more unprofessional on your website than glaring typo and grammar errors. Look at that headline – Our Specialty: Let us put youselves on the super information Highway!

Was the owner in such a hurry to launch the website that he forgot to proofread the webpage?

Actionable Insight: If you cannot afford a professional editor at least ask your friends, family members or customers to review and provide feedback before the website is launched.

Slow Load Time

slow-loading-timeDoes your website load so slowly that visitors have enough time grab a cup of tea and cookie?
If this is true, be prepared to face an unsavory truth – your visitors will definitely enjoy their tea and cookie; not at your website but your competitor’s.

Same thing maybe happening at the nicolawalbeck.com; new visitors will definitely move to some other site, the moment they see the slow ticking loading icon on the home page. Many will punish the site by quitting, which leads to higher bounce rates that will also earn the wrath of search engines.

Actionable Insight: Remove unnecessary graphics, links, images and choose a good hosting company to speed up loading time. 3 seconds is an ideal loading time.

Long registration forms

registration formVisitors are wary of giving away their personal information on the internet. So if you are asking them to fill up a long registration form on your website or blog, do not expect many of them to sign in. Keep in mind, lengthy registration forms act as conversion barriers because it takes time to fill them and the task is quite boring.

Look at the registration form of READOZ, an online publishing company. It is asking for lots of information instead of limiting the registration form size to two fields- email or username and password. Remember, users visit a website to acquire information and not to share information (unless they think it is a good idea).

Actionable Insight: Avoid a long registration form or use social logins to enable visitors to log into your website with their social accounts.

Too many Images/Animations

too-many-animationsImages and animation are used to capture visitor attention but too many of them can backfire and turn off visitors.
Too much of anything is a bad thing.

When you visit the above website, you will have to wait patiently for the home page to display all its images and show off the animation in its attempt to woo you. But I think you will prefer to have a cup of coffee in that time and come back once the home page finally loads.

If you have that kind of patience, you might not find anything wrong with this website! If not, it will just leave you frustrated and irritated.

Actionable Insight: Stick to a minimal numbers of relevant images and use animation only when absolutely needed.

No Search Box

I searched the website Afterlife, from top to bottom for the search box but could not find one. Imagine a website without a search box. How do you search such sites, especially those websites that are packed with information?
Maybe the designer got too smart and thought there was no need for a search box when you (I mean visitors) will fly from hell to heaven along with the website.

Actionable Insight: Put a search box where it is easy to find.

Website is Directionless

Super Web Solutions
directionless
The home page of this site gives you a feeling that Batman might pop up on your screens any time (look at the logo). For quite some time, you will be unaware of what the website actually offers because the space for text is taken up by pointless animations and senseless music.

Most visitors will stay away from such directionless websites and spend their time wisely somewhere else.
Actionable Insight: Get the right content on board and remove unwanted animations and navigational links. Look like a professional company.

The Wrap

My apologies for taking you through some nerve-wracking, migraine inducing websites; but it’s important that we should all learn from somebody’s mistakes. I hope you will not make all these mistakes on your website.

]]>
http://designbeep.com/2015/02/28/10-ridiculous-web-design-blunders-to-avoid-at-all-costs/feed/ 1
Impress.js – A presentation framework based on the power of CSS3 transforms and transitions http://designbeep.com/2015/02/28/impress-js-a-presentation-framework-based-on-the-power-of-css3-transforms-and-transitions/ http://designbeep.com/2015/02/28/impress-js-a-presentation-framework-based-on-the-power-of-css3-transforms-and-transitions/#comments Sat, 28 Feb 2015 10:50:45 +0000 http://designbeep.com/?p=55777 It’s a presentation framework based on the power of CSS3 transforms and transitions(positioning, rotating and scaling them on an infinite canvas) in modern browsers and inspired by the idea behind prezi.com

Additionally for the animations to run smoothly it’s required to have hardware acceleration support in your browser. This depends on the browser, your operating system and even kind of graphic hardware you have in your machine.

impress

For browsers not supporting CSS3 3D transforms impress.js adds impress-not-supported class on #impress element, so fallback styles can be applied to make all the content accessible.

[gpp_button color=”blue” url=”http://bartaz.github.io/impress.js” title=”presentation framework” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”https://github.com/bartaz/impress.js” title=”presentation framework” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]GitHub[/gpp_button]

]]>
http://designbeep.com/2015/02/28/impress-js-a-presentation-framework-based-on-the-power-of-css3-transforms-and-transitions/feed/ 0
5 App Development Tips To Help You Get Started http://designbeep.com/2015/02/28/5-app-development-tips-to-help-you-get-started/ http://designbeep.com/2015/02/28/5-app-development-tips-to-help-you-get-started/#comments Sat, 28 Feb 2015 10:45:39 +0000 http://designbeep.com/?p=55795 App development has become an increasingly important part of helping businesses stay connected to their customers. Luckily, building a simple app isn’t that difficult. Before you get started, think about how you can use these five app development tips to help your product succeed.

mobile-application-development

Keep Your Interface Simple and Smart

Designing an app isn’t like creating software for a desktop or laptop computer. Mobile devices have smaller screens that demand simple navigation. If you try to include too much on the screen, users get confused. A complicated interface could also make it difficult for users to touch buttons. That will make your app fairly useless.
You don’t want to go too simple with the interface, though. Make sure each element has its own unique appearance so users know what they’re pressing. Contrast plays a large role in this. Find a background that complements your icons without blurring their edges.

Make Icons Easy to Touch in All Environments

Now that people stay connected at all times with mobile Internet and are on reliable 4G LTE networks, developers need to think about the wide range of places where users may want to access their apps. Small icons, buttons, and fonts might work perfectly well for a person sitting at a desk. That could change quickly when that person gets on a crowded commuter train.
Make icons, fonts, and buttons as large as possible without crowding smartphone screens. The easier someone can use your app in all types of environments, the more likely they are to rely on it daily for longer periods of time. If they feel frustrated, they may abandon it for options that they can use more easily.

Spend Time Developing a Unique Aesthetic

Whether you’re developing a game, exercise, GPS, or productivity app, you face a lot of competition. A simple interface will help attract more users, but you also need to distinguish your app from those made by other developers.
Developing a unique aesthetic helps your app stand out. When given the option between otherwise equal apps, most people will choose the more visually attractive option.
A unique aesthetic can also help improve brand recognition. This might not mean much if you’re building your first app, but it will make a big difference once you start releasing more. Ideally, you can create an aesthetic that people will recognize across several apps. That way, they will recognize your other apps as soon as they see your style.

Make a Unique App for Each Operating System

In Q3 2014, Android commanded over 84 percent of the market while Apple had 11.7 percent and Windows Phone had just under three percent. Some app developers may look at those numbers and think they should conserve effort by focusing on Android. That’s a mistake. You need to build a unique app for each operating system to reach as many users and make as much money as possible.
Despite Android’s dominance, iPhone users spend more money. People who buy Android devices are often looking to save money. They want great smartphones, but they do not want to spend a lot of money on an Apple product. Those who don’t mind spending more money on iPhones are more likely to also spend more when downloading apps.
If you ignore one segment of the market, you stand to lose your market share and competitive advantage.

Test Your App on Several Devices

Screen size and resolution plays an important role in how people use apps. Just a few years ago, developers could get away with testing their apps on a handful of devices. Today, there are considerably more options. The options will only continue to grow as companies release new devices while some users hang on to older models.
Test your app on as many devices as possible to make sure users have a positive experience. If you don’t, you could unintentionally ostracize a whole segment of your audience.
Using these tips could help you develop a useless app that more people want to download. You can also use your own experiences to help you design better apps. What features have given you a positive or negative experience when you use apps developed by other people?

]]>
http://designbeep.com/2015/02/28/5-app-development-tips-to-help-you-get-started/feed/ 0
Free Font Of The Day : geomanist http://designbeep.com/2015/02/28/free-font-of-the-day-geomanist/ http://designbeep.com/2015/02/28/free-font-of-the-day-geomanist/#comments Sat, 28 Feb 2015 10:40:43 +0000 http://designbeep.com/?p=55780 Here on Designbeep,we also aim to help designers to find free yet high quality resources whether for your web design projects or graphic design projects.Who doesn’t like freebies?
Well,although we bring together free font collections time to time we decided to share a free font everyday and today’s free font Geomanist is designed by atipo.

Geomanist has a contemporary sans design, clean and elegant, with a combination of geometric shapes and humanistic beat.

1.Free Font Of The Day  geomanist

2.Free Font Of The Day  geomanist

3.Free Font Of The Day  geomanist

4.Free Font Of The Day  geomanist

5.Free Font Of The Day  geomanist

6.Free Font Of The Day  geomanist

7.Free Font Of The Day  geomanist

8.Free Font Of The Day  geomanist

9.Free Font Of The Day  geomanist

10.Free Font Of The Day  geomanist

[gpp_button color=”blue” url=”http://www.geomanist.com/” title=”free fonts” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/freebies/fonts-freebies/” title=”free fonts” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Fonts[/gpp_button]

]]>
http://designbeep.com/2015/02/28/free-font-of-the-day-geomanist/feed/ 0
Modern Flat Preloader Set http://designbeep.com/2015/02/28/modern-flat-preloader-set/ http://designbeep.com/2015/02/28/modern-flat-preloader-set/#comments Sat, 28 Feb 2015 10:35:40 +0000 http://designbeep.com/?p=55792 A fresh set of 12 animated flat preloaders from Pixelbuddha.com. It’s unique and individual, they will be able to improve your App of Website user experience.

Preloaders were made using trendy flat colors, so they will perfectly fit any modern interface. Every animation presented in 3 size: 32×32, 64×64, 128×128. Also in the package you will find AEP files, so you can modify, scale and change colors of preloaders as you want using Adobe After Effects (CS6, CC).

preloader

[gpp_button color=”blue” url=”http://pixelbuddha.net/freebie/modern-flat-preloader-free-set” title=”preloader” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

]]>
http://designbeep.com/2015/02/28/modern-flat-preloader-set/feed/ 0
Inventive – Single & Multipage WordPress Theme http://designbeep.com/2015/02/28/inventive-single-multipage-wordpress-theme/ http://designbeep.com/2015/02/28/inventive-single-multipage-wordpress-theme/#comments Sat, 28 Feb 2015 10:30:47 +0000 http://designbeep.com/?p=55774 INVENTIVE is a clean and modern Multi Page WordPress theme. The theme uses the powerful Twitter’s Bootstrap 3 and takes advantage of its features: grid system, typography, elements and more.

INVENTIVE is modern, bright, clean and professionally crafted wordpress theme. It has single page and multi page layouts. This template suits for any type of portfolio, personal website, business, corporate, design studio etc…Theme has a universal design, it thought every detail and animation effect. Its just as easy to customize to fit your needs, replace images and texts.

Single page WordPress Theme

[gpp_button color=”blue” url=”http://themeforest.net/item/inventive-single-multipage-wordpress-theme/full_screen_preview/10348606?ref=cinim” title=”best wordpress themes” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”http://themeforest.net/item/inventive-single-multipage-wordpress-theme/10348606?ref=cinim” title=”wordpress theme” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

]]>
http://designbeep.com/2015/02/28/inventive-single-multipage-wordpress-theme/feed/ 0
Inspiration for Button Styles and Effects http://designbeep.com/2015/02/27/inspiration-for-button-styles-and-effects/ http://designbeep.com/2015/02/27/inspiration-for-button-styles-and-effects/#comments Fri, 27 Feb 2015 08:30:31 +0000 http://designbeep.com/?p=55770 This is a collection of fresh button styles and effects for your inspiration by Codrops. CSS transitions and pseudo-elements have been used for most of the effects.

The current “button trend” is quite exciting since there are a variety of design details in use which allow for a great diversity of styles. There are lots of thin lines but also bold typography and vice versa. The transparent button with a slightly rounded border seems to be quite popular on sites with image backgrounds. But there is no limit to roundedness, everything goes these days, which is great for creating fitting buttons for any design. What they all have in common is simplicity and effect subtleness.

ButtonStylesInspiration

[gpp_button color=”blue” url=”http://tympanus.net/Development/ButtonStylesInspiration/” title=”Button Styles and Effects” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”http://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/” title=”Button Styles and Effects” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

Some of the styles are a bit bolder — they might fit into some special designs.

]]>
http://designbeep.com/2015/02/27/inspiration-for-button-styles-and-effects/feed/ 0
Free Font Of The Day : Elcsa http://designbeep.com/2015/02/27/free-font-of-the-day-elcsa/ http://designbeep.com/2015/02/27/free-font-of-the-day-elcsa/#comments Fri, 27 Feb 2015 08:25:33 +0000 http://designbeep.com/?p=55766 Here on Designbeep,we also aim to help designers to find free yet high quality resources whether for your web design projects or graphic design projects.Who doesn’t like freebies?
Well,although we bring together free font collections time to time we decided to share a free font everyday and today’s free font Elcsa is designed by Asclê de Oliveira.

free font

2.Free Font Of The Day  Elcsa

[gpp_button color=”blue” url=”https://www.dropbox.com/s/y0exydn8w001bzh/Elcsa.rar?dl=0″ title=”free fonts” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/freebies/fonts-freebies/” title=”free fonts” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Fonts[/gpp_button]

]]>
http://designbeep.com/2015/02/27/free-font-of-the-day-elcsa/feed/ 0
Jade – Flexible Multi Purpose Responsive Theme (30+ Different Layouts) http://designbeep.com/2015/02/27/jade-flexible-multi-purpose-responsive-theme-30-different-layouts/ http://designbeep.com/2015/02/27/jade-flexible-multi-purpose-responsive-theme-30-different-layouts/#comments Fri, 27 Feb 2015 08:20:35 +0000 http://designbeep.com/?p=55763 Jade is the first of it’s kind mega-purpose WordPress theme. It allows everyone to create simple or advanced themes without any trouble with Live Composer plugin. Simply with Jade you can create your pages in the Front-End, just drag and drop. You will be able to change every property of every element and this lets you create any kind of page. There are no limit with possibilities in Jade, for example you can create a fun Disco/Clubbing theme or a serious Law/Agency theme.

Multi-Purpose-Responsive-Theme

[gpp_button color=”blue” url=”http://themeforest.net/item/jade-flexible-multi-purpose-responsive-theme/full_screen_preview/9333003?ref=cinim” title=”best wordpress themes” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”http://themeforest.net/item/jade-flexible-multi-purpose-responsive-theme/9333003?ref=cinim” title=”wordpress theme” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

Ease of creating pages with Jade is It’s one of the best features. There are more than 100 modules available and each module can be directly styled and put anywhere you want. Also these modules can work with WordPress posts, so for example you have many choices to present your portfolio content.

]]>
http://designbeep.com/2015/02/27/jade-flexible-multi-purpose-responsive-theme-30-different-layouts/feed/ 0
WOHOO – FREE Retina Ready Mobile UI KIT http://designbeep.com/2015/02/26/wohoo-free-retina-ready-mobile-ui-kit/ http://designbeep.com/2015/02/26/wohoo-free-retina-ready-mobile-ui-kit/#comments Thu, 26 Feb 2015 12:03:45 +0000 http://designbeep.com/?p=55758 Today’s free design resource Whohoo mobile Ui kit is designed and released as a freebie by Zippypixels.

This Mobile UI kit beautifully crafted to help you design your next top iOS 8 app with ease. It’s retina HD Ready and 100% vector and component based.

Pixel Dimensions:

  • 1242 x 2208 (iPhone 6+)
  • 750 x 1334 (iPhone 6)
  • 640 x 1136 (iPhone 5S)
  • 1.mobile ui kit

    2.mobile ui kit

    3.mobile ui kit

    [gpp_button color=”red” url=”http://zippypixels.com/product/mobile/ui-kits/wohoo-free-ui-kit/” title=”free fonts” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

    ]]>
    http://designbeep.com/2015/02/26/wohoo-free-retina-ready-mobile-ui-kit/feed/ 0