Typography, mobile-friendly and killing the forms that can kill your biz!

Typography is one of the most important elements in web designing. And it’s not just about the type of font that you use but it’s overall contribution to the look. Composition plays a major role when it comes to choosing the perfect typography.

 

17 Examples of Beautiful Typography in Web Design

 We will show you more examples of text over images, and also other approaches to making beautiful typography choices in web design. From pretty clean and simple designs to colorful and bold ones, there are certainly some good type inspiration here to spark your imagination.

typography 1 edit

Click here for more ‘beautiful typography on web design’.

I don’t know about you, but before I got into all these, when I’m being asked to fill out something, I take to heels and flee. First of all, I don’t like having to go through form-filling before I can get into the information that I searched for. It’s like, when it gets too hard, go find something else that would be easier.

 Forms Kill People

Using forms to create conversions on websites has been around forever, but so has low conversion rates. Often they are seen as a necessary but ineffective element in a companies online marketing. It’s kind of like the way we view having a land line… if you live out in the country… where there is bad cell reception. In that situation you might choose a land line so that you have a way to avoid being completely cut off from the world.  It’s not great, fun to use, nor does it fit in your pocket. Forms are not fun, but a very common tool in the marketing toolbox.

Here’s a list of really good reasons why you should think twice about adding forms into your sites.

Making your website mobile-friendly with responsive web design

responsive-portfolio_0

A June 2013 study shows that over half of all local searches and 21% of total website traffic now come from tablets and mobile phones.

This marks a 50% increase in the number of people using their tablets, iPhones and other mobile devices to browse the web since 2012.

So making sure your website works properly on mobile is a necessity.

Read more on ‘responsive web design’ here.

It all really boils down to usability and accessibility. A great lookin’ website will earn you some points, but it’s when they can actually max that website for their needs that those points will possibly translate into sales. Oh, and please, think hard about those forms!

Advertisements

Learning from mistakes in web designing

In this dog eats dog world of designers, it’s easy to compromise real education and skill upgrades and demote these into just ladders to get to the corporate goal. Sure, we acquire skills, but sometimes, in the process of it, we overlook the essentiality of matters, like learning from the misses and not just on the hits.

You’re Doing It All Wrong

When learning how to code, design or ship anything of note, it quickly becomes apparent that there are a thousand different ways to get to the same end product. No designer uses Photoshop in the exact same way and most developers have different frameworks, environments and strategies to solve the challenges at hand.

While it is important to stay up on current technology, it should never take more time than actually building something. Chances are you’re doing it wrong and that’s perfectly okay. In fact, I would encourage you to do more things the wrong way. Doing more things that are imperfect can be liberating.

We can get caught up in the technology without “seeing” our art objectively. We worry about Sass, Bootstrap, Backbone, Node, and Compass, or even worse, we take up valuable time learning them just enough to be on top of the industry. It’s not about the technology. Technology exists to make the creation of art easier. It’s not designed to be a constant distraction and deflector of real work getting done.

Read more on why doing it wrong can be good once in a while.

Anyway, you probably know by now that I’m a ‘learn HTML’ advocate and I’ve been posting this really good tutorial blog for HTML beginners as it comes out. Here’s the one on titles, headings and paragraphs:

HTML for Beginners: Titles. Headings. Paragraphs. (Part 3)

One of the things that you should realize when working with HTML is that it is not just a markup language that you need to use in order to create a Web page. HTML is highly readable and understandable, even though you are just looking at its code. For the most part, you would see how everything is structured just by looking at its code.

So looking at the source code, you would be able to look at an HTML document and understand how a page would look like.

With that in mind, you should be able to work pretty well with titles, paragraphs and headings.

Since Responsive Web Design is an ongoing trend for many web development. Here’s something for you to add to your shelves:

Complete Website Design

Pure: What, Why, & How?

Citing the Pure website, it is a set of small, responsive CSS modules that you can use in every web project.As said before, the complete library is really light, being only 4.2KB minified and gzipped, but to keep your website even lighter, you can include just some of the available modules. Basically, it’s composed of the following modules: Base, Grid, Forms, Buttons, Tables and Menus.

More on Pure here.

 There you go, I hope I’ve been able to help you in one way or another. As we all know, learning is an everyday thing. Any new thing, however useful or not, is a good thing to learn.

The untold love affair of design and purpose

Passionate colleague and friend posted a familiar Steve Jobs quote the other day. It goes –

“Design is not just what it looks like and feels like. Design is how it works”. And that just made me wonder where we all are at this point.

The Design of Everyday Things, Keeping it Simple 

The Design of Everyday Things

A while back we posted a list of 8 Books Every Designer Should Read, and among those books was a book I believe is a “must read” for every designer: The Design of Everyday Things by Donald A. Norman. In my opinion the book wrote by Donald A. Norman should be mandatory reading in all design related classes because it shows us amazing examples of good and bad designs, besides explaining through psychology and cognitive science why people like some things and dislike other. Even though the book was published in 1988 (its first version) it is still a masterpiece. His explanations of understanding something to use it seamlessly are really nice.

Since I believe that to deliver better designs we need to understand how people think and what they expect from things, I really liked to read about all Donald’s concepts. It doesn’t matter if you are a web, graphic, product or package designer, you can certainly take some good information from the book.

After reading the book I started paying attention to “everyday things” designed in a simple and minimal way. Things as cutlery, pans, mugs, tables, chairs, etc. Things we know how to use and we know that they don’t need “extra elements or details” to work. Things we know that may be super simple and deliver the same result. This is why I had the idea to gather some everyday things beautifully designed to inspire you.

Why Designers and Content Strategists Need to Work Together

Design and content are two sides of coin. They are both necessary for an effective website.

Imagine yourself in a grocery store searching for a package of flour. On the shelf, side by side, are two bags. Both bags contain the identical type and amount of flour. Both bags cost the same amount of money. But one bag is beautifully designed with an eye-catching graphic. The other bag is plain beige and the only design element is the word “Flour” in a plain font.

Which bag would you be most likely to notice?

Read the rest on ‘Why Designers and Content Strategists Need to Work Together’ here.

Moss Industry Florist

Moss Industry Florist - Choc Chip Digital

A florist website that uses a simple slideshow to highlight the beautiful arrangements and art that is showcased in this Barwon Heads store.

The Key to Being Productive

I’ve been in this game for a hot minute now, and I have to say that momentum is one of the most crucial aspects in deciding whether or not a project succeeds or fails. The momentum is built upon two notions: getting inspired and staying inspired. Accomplish these two things by keeping things moving forward and shipping as quickly and as often as you can until the project is done.

This may mean shipping something ultra-simple and mind-numbingly stripped down at first, but it’s an honest approach that keeps your momentum while allowing your customers to continually be involved in the quick evolution of your product.

That’s how you get things done. That’s true productivity, and it doesn’t even require software to disable your twitter or facebook feeds. Just build it.

What is the drive behind the designs we do? It’s easy to get caught up with being creative, but at the end of the day, any creativity amounts to nothing if detached to purpose. Something to think about.

 

(via Vandelay Design)

On Beauty, Usability and Interactivity

So here I am wondering, are you interested to stack up on more of this? Sometimes, we do need things like this for motivation.

The Web Designer’s Idea Book Vol. 3 Giveaway

Featuring more than 650 examples, this third volume of The Web Designer’s Idea Book is packed with visual inspiration for creating top-notch web design. Web design expert Patrick McNeil, author of the popular Web Designer’s Idea Book series, is back with the latest examples of the best design on the web today.

 Arranged thematically, this guide puts important topics like technology, design styles, elements, site types and site structure at your fingertips. This new volume also includes a detailed discussion of the various content management systems available to help you find the best platform for your project.

Usability’s a big word on the web nowadays. Go over this checklist and see if what you’re working on adds up:

 Vital Website Usability Checklist You Can’t Ignore

Some would argue that the majority of a website’s usability is determined by site navigation alone. Think of it this way: If your customers are too confused by your layout to navigate your site efficiently, then they’re going to get frustrated and leave rather quickly! Lots of visitors will just leave the site if they can’t locate what they want in just a matter of a few clicks.

No matter where prospects go on your site, you’ll want to ensure that they always know where they are. This means that it’s a good idea to consistently and prominently display your company logo and brand name on every webpage, always in the same place. Consistency is a hallmark of super-effective navigation.

Read more on ‘usability’ here.

And check out this example on standard usability:

G1

It might help, too, to look up on these as well:

 Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Megadrop

In the previous tutorial we built a simple responsive contact form, which demonstrated how Foundation’s form elements could be used. Now let’s implement some more elements to add a new layer to the form. We’ll do this by adding stages to the submit button; we’ll take the standard click of the send message button, add a progress indicator, a success message and clear the inputs once the email is sent.

As I am purely showcasing Foundation features this is not a functional form, although you could add a php based send script and use ajax to make the form post without navigating away from the page. Take a look at Submit A Form Without Page Refresh using jQuery for further instructions.

Let me end with these words by Emile Zola – “The artist is nothing without the gift, but the gift is nothing without work”. Something you and I should take a minute to ponder on.  A good weekend to us all!