vectorgraphics

Every Designer is Using Vector Graphics. Here’s Why You Should Too

If you are still sticking to the age-old traditions of using bitmap or raster images excessively in a website design, it is about time you made some changes in your web design approach because there are better graphic elements to use on a website than images.  It is perfect to use bitmap images as embedded files and logos or headers but when it comes to inserting resolution independent images on an available space, vector images come in handy and here is why.

  • i) Because vector graphics are basically mathematical definitions, each line is a combination of points interconnected together and are defined by height, width, ratio, proportion and curve.  Although they are not easy to get, they are affordable and are available in all variations.
  • ii) Vector images are very easy to edit and this is something that most designers appreciate about these graphics.  If you buy vector images from a graphic designer, you can edit them to meet the specific style of the website as you see fit and it doesn’t take too much effort either.
  • iii) Unlike Bitmap images which can be as much as several megabytes in size, vector images are compact and their file sizes are dependent on the complexity of the design.  Every vector file is hundreds or thousands of times smaller than an image file of similar display quality.
  • iv) Vector drawings are easily scalable since they are designed mathematically.  These graphics phased out raster and bitmap images use because they can be scaled to be larger or smaller without a slight distortion or loss of quality.
  • v) Because of their scalability and detail properties, vector images are perfect for use in website interfaces as well as detailed instructions.  Vectors are basically lines and are easier to use even in high resolution images, illustrations, presentations and animations.
  • vi) Besides looking great on screen, vector images can also be printed out on paper and it will still look as sharp and clear as on screen.  This means that websites built with vector images can easily be printed out without worrying about optimizing images for print.
  • vii) The aesthetic value of a website built with vector images is far much more superior to those made with ordinary bitmap image files.  The lines on vector images are clear and fine and even logos look stunningly beautiful and crisp.
  • viii) Another reason to use vector images in web design is that these images will help speed up load rate of a website.  Because the images are small in size, the pages load at tens to hundreds of times faster than similar websites using bitmap images instead of vector graphics.
  • ix) Vector graphics cannot be used to display realistic pictures, in such a case bitmap images work best.  It is important to know that converting a bitmap image of a vector image is very difficult to do well, it is best to buy professional vectors rather than designing your own.
  • x) Where can you find vector graphics?  Well, there are many places you can download them online, but you can search for some samples online and read more on how these graphics are created and how they are supposed to be used.
responsive-design

Are Responsive Icons The Next Big Thing in Web Design?

When I first learned of responsive icons, the first image on my head was an icon asking a website visitor where he can be directed.  Responsive icons do not talk back, I am afraid, if you are not familiar with the phrase, it basically means that a website is designed with icons that can change size, color or position in reaction to a user’s action such as hovering and clicking.  The idea of a responsive icon took the iconography business a big step further and has now been adopted as the best way to interact with website visitors without text.

The difference between responsive and traditional icons

Despite their popularity and efficiency, responsive icons have their downsides including file size issues and is likely to clutter a page if they are not used right or if the right icons are not used.  When placing responsive icons on a website, the size of the web page does not dictate the size of the icon displayed, the icon is displayed the size it’s presented in.  The size of the screen is insignificant, the size of the icon is all a web developer needs to be concerned with.  The only difference between responsive icons and other types of icons is their quality and the level of detail.  Responsive icons can be displayed as large as 500px X 500px meaning it has a lot of room for detail.

Why are responsive icons important?

The popularity and wide adoption of font icons, minimalistic, and Holo designs and the use of vector images instead of Bitmap in various areas of web design has seen the rise of faster, cleaner and more functional websites.  Responsive icons just takes these a step further – with websites that are ‘alive’ to the user.  The top benefit of using responsive icons in web design is that they offers the designer absolute control on where and how to use icons and because the icons come in different sizes, fitting them in a page is not as difficult.

Responsive icons are often optimized by the creators for different devices, different grid sizes and for use in different types of websites, it is essential that a web designer understands how and where to use different types of responsive icons to take full advantage of their benefits.  Besides, responsive icons offer an aesthetic consistency on a website because the icons, unlike vector graphics, are image files and not mathematical elements.

There have been mixed reactions to the use of responsive icons on websites, with many designers choosing to revert to static icons because that’s what the users are used to and because they feel that a website visit is not just an event to gain information but an experience.  Responsive icons could confuse users who can easily press on the wrong icons and because the designers have to create sets of icons every time, they can be costly, an expense that will be passed on to the client.

What do you think of responsive icons?  As a web designer, do you use them on client websites?

Cette entrée a été publiée dans Icons le par .

Why Icon and Symbol Fonts are here to Stay

Icon and symbol fonts speedily became popular years ago but their benefits had not been realized before they were fully accepted for use in website design.  The internet revolutionized over the years with the most notable times being when we got rid of tables, in-line markups and spacer gif images and instead embraced CSS and the ideas of reducing page sizes while separating website layout from styles.  Symbol fonts can easily pass as our leaders to the next generation in website design and online communication and especially when it comes to optimizing website performance.  Symbols embedded in fonts as tiny icons come with tons of benefits and here are the reasons they will be around for long.

Smooth Browsing Experience

The best thing about Icon fonts is that they provide a kind of smooth and seamless browsing experience to a visitor hence the reason more and more websites are adopting the use of icon fonts.  The best example of a site that uses icon fonts is github.com which is currently using a single custom symbol font file also called Octicon.  Since the site started using Octicons, the website loading speed and general user experience has tremendously improved.  Icon fonts are designed to be used as decorations, glyphs and of course as icons on a website and unlike an Octicon which is a single font file, they icon fonts are made up of many tiny icon files.

Clearer, crisp look and feel

Icon fonts are here to stay because its merits overshadow the few drawbacks.  One of the most important benefits of using them is that they provide crisp, clear and consistent reading for the user because these fonts are made of smooth vector images in HTML and not the blocky raster images. The raster images are bulky yet cannot be properly resized without quality distortion. especially when it comes to enlargement.  Since vectors don’t have this problem, it is much more advisable that web designers make use of icon fonts in their websites.

Simplified character to image conversion

Icon and generally symbol fonts cannot be used as images because of their small sizes but they fit quite well as fonts.  Most of the earliest symbol fonts are still mapped to a graphic letter on the ASCII chart and pressing letters on the keyboard will produce an image e.g. pressing ‘M’ gives a picture of an envelope.  This means that users can now easily convert letters to symbols by simply typing.

Although icon fonts have their downsides, their benefits extend beyond what I have mentioned here.  For instance, icon fronts has made it much easier to embed graphics into HTML, they are easily rendered by browsers including IE6 and later because icon fonts are basically vectors and because they have ligatures, the text typed is much clearer and readable where there are double letters.  If you would like to see some examples of icon fonts and know more of its benefits, you can check out the free icons Fontastic lets you download.

thinking

Effective Web Design: Know How Users Think

Being a brilliant web designer takes a lot more than what you may have learnt in lectures and what most tutorials cover.  In order for you to design just the kind of website that will benefit your client, it is essential that you understand the target audience and know how they think as well as learn their basic behavioral patterns to give them just what they want.  So, I will answer the question of how users think here to help you know how to create websites just for them.

  • Most users are rarely ever interested in text or reading, most times as soon as a page loads they peruse through quickly, scrolling down and up and try to find something clickable.  As soon as they find something more interesting or looking so, they will click and head off the page.  As a web designer, you must offer visitors something interesting on page load.
  • Users notice and appreciate credibility, uniqueness as well as quality and effort that designers put in a website.  Even when they don’t leave a comment, most users can judge the quality of services or products based on the quality of the website design.  Therefore, providing high quality content in a meticulously designed webpage is exactly what the visitors are looking for.
  • The vastness of the internet has bred a crop of very impatient internet users who rarely ever read something, they just scan through and make quick judgments based on what they see.  The simple principle to follow here is that a designer will have failed in his job if a website page has a high cognitive load and r a less intuitive interface including navigation and page layout.
  • Don’t expect website visitors to make optimal choices when they load a web page.  Truth is, users will not search for the best possible way to find information they need, they will go with the first simple option they have which is often a result in search engines.  Optimizing websites for search engines is hard but it starts with how the designer plans the website.
  • Another important tip every web designer must bear in mind is that a majority of web users often have to muddle through a web page instead of reading what’s on there.  The reason for this is that humans generally look for what works and don’t care about how it works as long as it does.  If the users can benefit from the website, then your job as a designer is done.
  • Users want to be in control.  Most web users want to be in full control of their browsers and expect a consistent data representation throughout a website, even when they navigate to other pages.  As a web designer, you should provide this consistency and give the power to control what’s good to the visitor.
  • Finally, users are first attracted by color and fantastic graphics but eventually, what they learn or get on the website is more important.  A good website is one that can attract the attention of the visitor to the right areas of the site and keep them interested long enough to pass information or convince them to perform an action.
nicewebsite

Effective Web Design: How to Develop the Most Effective Website

They say that humans are the laziest creatures and that’s why we always find easier and faster ways to get things done.  This is true, so as a web designer, to truly build a website that the users will love you need to understand them and know what makes them tick.  The objective of every website is to inform users, maybe even convince them to perform an action.  Here are some things about a typical web user you need to know.

  • Web users do not like to think, so as per Krug’s first law of usability, when you create a web page everything should be presented in an obvious and self-explanatory manner.  A web designer’s job is to pass information in the easiest and simplest way – to answer the question marks using various elements including icons, text, images, illustrations and other multimedia types.  Therefore, when you design and build a website it must first be simple to use and navigate around.
  • Another obvious personality trait of a typical web user you are building websites for is lack of patience.  Most users make up their minds whether they can find what they want on a website within 30 seconds of page load and it is up to the designer to make the 30 seconds count.  The most effective website is one that delivers information to the user in a user friendly manner and users can find the information they want where they look.
  • For a website to be considered very effective and perfectly designed, it has to be able to capture the attention of the visitor and direct them to the right links and content they came for.  Achieving this is not so easy but using eye-catching images, minimalistic designs and thematic layouts will make the user recognize edges instantly and will easily map the page to know where the fun stuff are.  A designer must make full use of the user’s sense of orientation to capture attention.
  • Most websites are criticized to be poorly designed largely because of poor approach to user guidance.  It is advisable that a website make everything simple and easy to digest for the visitor using simplified directions and guides.  For instance, a website can have huge buttons numbered 1-2-3 to guide the user to registration then confirmation and finally subscription management.  Users want information already digested ready for ingestion.
  • Finally, a good web designer should strive for simplicity – both in design and information presentation.  A simple easy to use website is one that clearly presents the information to the user without causing confusion and has a user friendly organized layout and navigation designs.  The biggest hindrance to simplicity in today’s website are excessive use of graphics, poor placement of advertisements and improper placement of text and other media.

As a web designer, most of what you believe attracts and retains a visitors attention is based on your experience.  To be good at what you treat you must wear your patient’s shoes.

icons

How to Choose the Ideal Icons for a Website

One of the toughest lessons I have ever had to learn was when I learnt that when it comes to web design, the smallest details that often hide beneath a fantastic design are the most significant.  To necessitate the smooth flow of information and to streamline exchange of information on a website, a designer must know what things are the most important and how best to use them on a website.  A good example is the use of different types of imagery and icons including icon fonts and mini fonts which, though difficult to create, are available online for free or at a low price.  Here are some important considerations to factor in when looking for ideal icons to use on a website.

Icons need to be appealing and readable

The icons you choose must be beautifully designed not just functional, although they need to have a purpose.  When you set out to find the best icons, visual appeal should be the most important thing as the icons must match the theme or style of the client website you are designing as icons, being one of the many graphical elements in a website, must be beautiful enough to be remembered by visitors and should serve the purpose of informing.

Consistency

The icons chosen for use on a client website must also be consistent, you cannot pick icons from different places on the web just because they are appealing individually and expect them to look great on the website together just because they look great individually.  Inconsistency in the use of icons in web design breaks the flow of information and makes the website have a generally cheap and patched up unprofessional look.

Icons must be universal

Though not a written rule, the use of minicons and icon fonts is generally accepted as a new trend in using graphics to supplement text in passing information to website visitors.  It is perfectly fine to use famous minicons and font icon packs such as icons with a wrench or gear for settings, an envelope for email and a cell phone for mobile phone number.  The secret here is to think of the website as a road and icons as road signs, no one should misunderstand them!

The icons must be functional

Just as I mentioned before, the icons used on a website must be functional, otherwise they would do more harm than a website without icons would.  The quality and design of image files shouldn’t overshadow their true purpose of informing.  So, the next time you are choosing icons, this is among the top considerations to remember.

Complement Motif

Finally, ideal icons to be used on a website must be visually compatible with the website’s motif.  When selecting the icons, ask yourself how the site will look like and what moods, emotions or thoughts it is supposed to invoke when a visitor loads the page.  The answer to these questions should help you select the most appropriate icons for website design.

Cette entrée a été publiée dans Icons le par .
Raster-Girls2

The Difference between Vector and Raster Images in Web Design Context

Choosing the right types of images for use on a website is crucial largely because there are several options available and each has distinct pros and cons.  Of late, the trends in web design favor vector images more than raster images and this is expected because these two types of images are very different and each has its own upsides and downsides as we are going to see.

Vector images

A vector image is basically a combination of millions of dots in a mathematical algorithm.  The images are drawn using special software and Wikipedia defines them as a combination of various geometrical elements including curves, shapes, polygons and points.

Vector images have tons of benefits when used in websites, the most notable being that because a vector file does not need to store its color or location of every pixel in a picture, the files are often very small – the smallest compared to all other types of images of the same quality and dimensions.  Because of this, websites with vector images load faster and use minimal bandwidth.  Secondly, vector images are actually very simple despite the complex creation and this makes it easy to scale them without distortion or loss of quality.

Another reason to use vector images in website design rather than raster images is that the former can easily be customized by the designer without the need of complicated software used to create it.  This means that a website will have thematic colors and images created from algorithms rather than static fixed bitmap images.

Just as it has its benefits, vector images has a number of notable downsides including the need for images to remain simple in order for them to be properly rendered by browsers and that the images are rarely free.

Raster images

Most of the pictures you see on websites and what you have on your phone and computer are raster images.  Raster images are basically image files taken on camera, created from an application or drawn.  To best define raster images, they are image files made from colored blocks called pixels arranged together.

Because raster images are files you can find on your computer or easily take with a camera, they are easy to find and to use because it only needs to be uploaded and fitted on a frame.  They are the most effective image types to use where the images don’t have to be resized or where the type of browser would not hamper the visitor’s view of the page whatsoever.  Raster images make the clearest, most life-like images that you see on web pages and are perfect for use when a high resolution image has to be used on the website.  The most common raster images include

The right image to use on a website depends on what the image is, what purpose it serves and where it will be placed.  To choose between vector and raster images, web designers have to understand the basics about them and know their pros, cons and applications.

minicons

Finding the Best Minicons for Web Design

Minicons have been around long enough to be so popular as to evolve into very effective elements used to attract the attention of a web user while passing a message through imagery.  The true purpose of icons is to direct a user, but minicons have expanded the capabilities of these objects of art and communication over the years.  If you are a web designer who is not using minicons in web design, you are missing out.  This post provides a few tips to help a web designer choose the most suitable minicons to use on a website.

How should minicons be used?

Most designers find iconography to be a slippery and complicated subject unlike other areas of web design such as coding and imagery.  This, to some extent, is true but it doesn’t have to be a hindering factor in using icons or minicons.  Icons and minicons can easily be interchanged although capabilities make minicons more suitable for different website uses.

Minicons can be used for many purposes but they are mostly used for two purposes today: enhancing the aesthetic value and promoting theme and branding on a website and communicating to the visitors.  The important factors to remember when using minicons on a website is that there must be consistency in icon design and style e.g. all must be Holo or 3D in design, not a mix and they should all be of the same color scheme.

How to choose the right minicons for a website

The more expanse the scope and set of minicons, the more diverse they need to be.  Although minicons, just like icons, should have a very close conformity to promote consistency, it is acceptable to bend the rules when there is a large set of images.  An excellent example is this  set of minicons on Webalys that contains over 1,500 vector icons.  The minicons that should be used on a website also need to harmonize with the rest of the website design, it is therefore crucial that one finds a theme that matches the minicons or vice versa.

In order to make minicons conceptually effective, they need to be easily understood by anyone visiting the page.  The minicons must be standardized if possible and they should be consistent in the concepts they communicate.  The important thing is that the icons you look for must attract the attention of the user to the right section and should direct them where they want to go or present the information the user is looking for.  The best thing is that minicons, unlike traditional icons, are very effective in directing the attention of the visitor while adding to the aesthetic and thematic values of the website design.

Where to find minicons

I cannot tell you where the best or most diverse minicons can be found because there are just too many designers making amazing minicons every day.  However, to have a look at how they look and get a baseline to compare others with, check out what Webalys  has on offer.

Cette entrée a été publiée dans Tips le par .
Inspiration for webdesigners

Top 5 Sources of Web Design Inspiration

Your source of inspiration to develop amazingly unique websites should not be other websites already designed by someone else, or a combination of features from two or more existing websites; as a web designer, a client will come to you rather than install the easy to use DIY website templates online because they want a product customized for them and is well designed enough to turn heads.  Where do you get your web design inspiration?  Here are 7 sources of inspiration most web designers admit have helped them at least once or twice.

1. Old items such as buildings, train stations and trees

Many naysayers would tell you how much they hate old rusty places and how every design should be classy with metallic or neon look or something along those lines.  A successful web designer is one that can draw inspiration from almost anywhere, including old abandoned buildings and rusty cars.  The color combinations can be quite wonderful and can help one think of the use of imagery in websites from a whole new angle such as using sketch lines.

2. Food

The hipsters posting all their meals on Instagram are not just annoying and idle people, these images often go far in helping those people who care to have an open mind.  You could be eating food or an image could have been shared online and the colors, texture and tone can inspire you to create a website with a unique feel and look coupled with unique imagery use.  You don’t have to use the actual food images but they can inspire you to design a site that invokes a delicious taste.

3) Nature

Nature is the de-facto source of inspiration for almost everything creative – from movies and pictures to websites and fashion.  When you are out on holiday this season, you will come across many beautiful sceneries that you can draw color, texture and feel inspiration from for your next website.  Some people love flowers while others prefer to draw inspiration from distant skylines, rivers and extreme weather.  Which are you?

4) Art

Another very common source of inspiration for web designers is art.  I know a friend of mine who specifically liked a Facebook page that posts unique art images just to get inspiration every once in a while.  Art in this case can be anything from a drawn object to a silhouette image you see at sundown on your porch.  Such an image is a wonderful source of inspiration for someone with an eye for things catchy.

5) Product packaging

The most creative minds derive their inspiration from the most unlikely places.  As delivery companies and manufacturers fight for the market, web designers can source inspiration from the great packaging that these companies come up with.  If you think this is not practical, imagine how different the current site you are working on will be if you used a design with colors and images of the last package you received.

I hope you find inspiration to create dazzling websites everywhere you look.

Web fonts

7 Expert Tips on How to Choose the Best Web Fonts for Web Design

The expert font tips contained in the Computer Arts Collection: Typography are regarded as the most important tips a web designer could come across on how to choose the most suitable fonts to use on a website.  The 7 most important tips are:

  • 1. Picking the right font type is not easy because there are many considerations to factor in such as the theme of the site, the content type, mood and tone etc.  As a web designer, you need to be selective and choose a font type that is appropriate for the site content first.
  • 2. The typography comes first.  As soon as you can use non-traditional web fonts on a website, you should look for the best font types based on the traditional ones you are familiar with such as Georgia, Verdana, Cambria and Times New Roman.
  • 3. Take your time trying different font types, swapping them to see how well they fit and getting opinions from different people if possible.  Do not rush font selection as it takes time to logically compare font types to select the most appropriate seeing the wide selection of available fonts.
  • 4. Explore more, get to know what is out there.  Go to fantastic.me and check out the wide selection of available fonts and font types but remember this is just one site, tens of thousands of font types are available to choose from.  Remember to first determine a theme to make it easier to swap almost similar fonts or font types even after the website is up.
  • 5. You should also not forget that the font type you choose should not overload the page, the size of the font file size.  A typical web user expects a page to load fast and any signs of lagging or bulk is a total turn off.  Before you settle on a font type, check the file size to make sure it has only the necessary characters browsers recognize.
  • 6. Most fonts today have been standardized to display clearly and accurately across all browsers but as a designer it is your job to ensure that this is actually the case.  There are fonts that cannot be used on certain browsers, know them.  Also, check compatibility whenever there is a minor or major browser update on all major browsers.
  • 7. You can also get font type suggestions from various sources including forums and blogs like this.  A good web designer should stay up to date on any new developments and trends in the web design industry especially since it is their job to present businesses and products to a public that is seemingly very difficult to please.

These 7 points are meant to guide a web designer choose the right font types but they cannot be used as definite rules.  The whole idea behind creativity in web design is being different and rules should not hinder this, but just like everything else, there are some crucial tips experts discovered long time ago and it is time you use them.

Cette entrée a été publiée dans Fonts le par .