Sonic Fire Development

Website & Software Development

The 5 Fundamentals Of Good Web Design

Photo Attribution: fc00.deviantart.net

Anyone can design a website, but not everyone can do it well. There are several things a web designer must keep in mind when designing a website. Your website needs to load quickly as well as be very easy to read. Visitors are not as likely to remain on a site that is not pleasing to look at, and a website that is unprofessional will completely diminish the credibility of the content, regardless of how accurate it is. Examples of websites that have a poor design include those that have blocks of text that don’t have a sufficient amount of white space in order to relieve the eyes, layouts that must be scrolled horizontally, colors that have poor contrast or are very bright as well as pages that have too many high resolution images. If you are interested in designing for your website, you should be aware of the five fundamentals of good web design.

Keep Your Design Simple

Though an unusual and elaborate design can be very artistic, effective websites tend to stick to simple modular layouts that have static headers as well as sidebars. The reason is very simply; this layout is what works. The less amount of time your visitors have to spend focusing on the layout of your site, the more time they will spend on reading your content. You should try to avoid imagery that is intricate and make sure the font is contrasted well with all of the rest of your page. Dark text against light backgrounds will read naturally. Remove all of the badges that don’t directly relate to your content or the message your website is trying to convey. When you cut back on the extra elements it will reduce the loading time.

Only Use Standard Code

Photo Attribution: us.123rf.com

It is very easy to use non-standard code accidentally on a website. Despite its not being the standard, most of the HTML coding will work. For example, the CSS for recoloring scrollbars is not standard code and it only works with Explorer. This should be avoided. The tag is another example; it was standard for styling fonts, but the tag has now depreciated. Instead, you should consider using CSS in order to style the design on the website.

Date The Content

Dating your website content is a step that will go a very long way in making a website seem even more credible. When you make sure your copyright notices and footers are up-to-date, as well as leave a line about when the page was updated, you are telling all of your visitors that the website is well-maintained. This shows your visitors that the information is current. If the website is a blog, you should make sure blog entries display post dates.

Use Legible Fonts

Photo Attribution: tiptopsigns.com

The truth is, your font matters. The text of the website is most of the content and the visitors will have a very hard time reading the website if your text is styled poorly. Try to use fonts that give strong enough contrasts with the background. Make sure that it is very easy to read, by making the text large enough for every screen resolution. You should try to avoid script or decorative fonts, like Blackadder or Lucida Handwriting, as they tend to be difficult to read; not everyone is equipped with the same fonts on their computers. You should stick with sans serif fonts. Avoid the Comic Sans. Though it is a simple and effective font even its creator, Vincent Connare, said that he didn’t intend for it to get widespread use.

Balance The Content

A website can have a bit of everything: images, videos, text and embedded music. You can incorporate all of these things if you balance them so your visitor’s eye will flow from one element to the other naturally. Make sure your text is not bunched together. You should make sure there is enough white space. You can do this by using breaks in your paragraphs between each section. Paragraph breaks are used in order to insert empty lines between each group of words. Enough space should be set around your images and videos. This element is referred to as “padding”. This will ensure your text does not run along the edges of the other content.
off
August 17, 2012 Articles, Being Creative

How the Design of your Website Reflects on you and your Business

Considering the fact that a mere 21 years after the first website was put online, it is mind boggling to me that there are now literally billions of websites for a multitude of different purposes, floating around on this virtual network we call the internet. Your website can be thought of as a virtual shop window, especially your home page. This is important as your website home page needs to grab the attention of the visitor and hold them long enough to hopefully turn them into a paying customer. Just like with any design process, what you put in that shop window comes from you and is hence affected by your personality and tastes. As a result, the fonts, colours, text and images you use on your website say something quite personal about you, whether you know it or not. It is known and understood that different colours and symbols have different meanings to different cultures, but if anything, this knowledge only serves to highlight the fact that your design DOES have an impact on how your website is received.

In this article, we will look at what different colours and fonts potentially say about you to visitors from the Western world and how you can use those elements to create the impression that you want to create with your design, rather than accidentally creating an impression which you have no control over due to lack of knowledge!

Font

It is funny and maybe even a little hard to believe that simply the style of text used on a website can convey an impression to the visitor! Below are some of the most commonly used fonts and what they project to readers.

-Arial and Times New Roman: These are conformist and kind of boring, some would say even a little unimaginative! They are best reserved for use on things like spread sheets and tables rather than a website home page with the objective of grabbing the attention of the visitor.

Photo Attribution: exchange.silexlabs.org

-Comic Sans: Participants in study described this font as fun and youthful. It is probably best placed on children’s websites and children’s party invitations.

Photo Attribution: edhenninger.files.wordpress.com

-Impact: Sadly, this font did not impress participants either! It was described as boring and overtly masculine. It should be used sparingly, if at all and maybe for certain subject headings.

Photo Attribution: luckymanpress.com

-Verdana: Straight to the point, practical and geeky. This font may be best suited for power point presentations, computer programming, online tests and maths documents.

Photo Attribution: identifont.com

-Gigi: Although attractive, this font reads as kind of impractical. The loopy text suggests flexibility, creativity, exitement and femininity while at the same time suggesting an unstable, impractical, youthful passiveness! This font may be best reserved for funny greetings cards rather than website home pages. It could get confusing!

Photo Attribution: fonts.radio-electronics.co

 

 

Colours

-Red: Red is my favourite colour! The colour of passion and fire. It’s use suggests these qualities in a person. It is a strong colour which acts as a stimulant to the senses. The amount of red you use on your web site is directly proportional to the amount of energy the person viewing your site receives. Use red in small doses to draw attention to particular elements on your website which you want the viewer to focus on.

-Orange: Orange is seen my some as a fun, refreshing and energising colour. People seem to love it or hate it! It is strongly related to red, but red gets the job done better in terms of focusing the eye of the viewer and no I am not being biased!

-Yellow: Bright sunny yellow! It communicates optimism and vibrancy. Life! Using yellow accents can spark creativity and suggests a creative, happy, optimistic mind. It is a good colour to use on creative websites.

Photo Attribution: homeworkshop.com

-Green: In terms of overall favourite colours to the general population, green comes second. The first is blue. It is a fact that the colour green takes up more space in the visual spectrum of colours than any other colour on the human colour spectrum! We are used to seeing it everywhere and it communicates calmness and serenity. It is a good colour for interior design. However, it is important to note that the more natural, darker greens can be associated with negative connotations to do with the government, hospitals and officil things like green cards. Pick your green wisely!

-Blue: As stated before, blue is the most common favourite colour in the colour spectrum. This may be due to the fact that it is everywhere! Blue sky, blue ocean… Blue communicates calmness, serenity, trust worthyness. There is even a theory that blue actually causes the body to produce chemicals which calm us down! Again, be careful of the blue you pick if you wish to go for this colour as different shades ellicit different responses. For example, electric blue is dynamic, dramatic and exhilarating, whereas more mute shades of blue can appear to be void of emotion!

Purple: Purple is a popular colour among teenage girls and evokes a combination of red and blue responses, since it is the mixing of these two primary colours which results in purple. It is often favoured among musical and creative people and it tends to take on the characteristics of its dominant undertone. For example, if the dominant undertone of the purple you use on your site is red, then the impression you give to the viewer and the effect it will have will be very similar to the effect that red would have. If you wish to appeal to adolescent girls and creative people, you may want to consider purple accents.

-Pink: Pink is a carefree and fun colour, with all of the passion of red, with less of the aggression.Pink appeals to overworked women who long for the carefree nature of their youth! Consider pink accents if you want to appeal to working women and mothers.

-Gray: Gray communicates refined tastes and sophistication! It is elegant and classic. Designers often use it as a background colour because it portrays a sleek, conservative, yet stylish image. It conveys authority and commands to be taken seriously!

-Black: Void of colour, black represents authority and sophistication. Power! Black can be overwhelming if used to excess on websites, so perhaps use it for accents if this is the message you are trying to portray.

-White: Cleanliness, purity, calm. Just some of the adjectives that come up when you see the colour white. This is the reason why doctors and brides wear white! Think about if this is what you are trying to portray before using an abundance of white in your site.

-Brown: Brown evokes trustworthiness and dependability. It is the colour of the earth and all things natural. This is why you find the colour brown on so many whole food and organic food websites.
off
August 16, 2012 Articles, Career Growth

The Golden Ratio Explained

 

Photo Attribution: pbmo.files.wordpress.com

The golden ratio, also known as the golden mean or mean of Phidias, and represented by the Greek character phi (?), is an ancient piece of mathematical, scientific, and design knowledge. A proper understanding of the golden ratio can be invaluable to all manners of design work – from architecture, to sculpture, to painting, and, yes, to web design. The golden ratio is embodied in nature, from macroscopic elements like the arrangement of branches on a tree all the way down to microscopic things, like the formation of crystalline structures. The world is built on the golden ratio. So, then- let’s break down just what the golden ratio is.

In purely mathematical terms, the golden ratio is a ratio of ((1 + ?5)/2):1. For a simpler explanation of what that means – the ratio of the sum of both elements to the larger element must be equal to the ratio of the larger element to the smaller element. The classical “golden rectangle” is a good example of a figure that follows the golden ratio. Take a look around; many of the objects in your home or workplace will follow the golden ratio. Postcards are typically golden rectangles, as are postcards or light switch plates. Many of these aren’t even designed with the golden ratio in mind; it’s just a proportion that comes naturally. That makes perfect sense- the golden ratio is present in nature down to the atomic level! It’s the pattern on which everything is organized. The golden ratio is the proportion we look for, because of that fact. It’s not even limited to visual matters; many pieces of music maintain the golden ratio between notes.

What does this mean for you, as a web designer? It means that you can easily exploit knowledge of the golden ratio when designing pages, allowing you to create designs that just click with viewers. Every possible element of a webpage can be designed on the golden ratio, as can their relations to each other. The size and shape of a button; the relation of a menu to a content section; the proportions of an image and its placement on the page; the list is literally endless. No doubt you’ve experienced a situation wherein two elements looked great on their own, but together they just didn’t quite work. Something subtle- a situation where it was hard to make out quite what the problem was. But it was definitely there. This is the kind of thing that can emerge without an understanding of the golden ratio; at a primal level, a design just doesn’t mesh with you, and it won’t mesh with viewers either.

Photo Attribution: creativeautomaton.com

Bring the offending elements into line with the golden ratio, and often that nagging sensation in the back of your mind will simply vanish. You have only to check out this no no hair removal reviews site to see a perfect example of the golden ratio in action within website design. Notice how the header and the container perfectly intersect with each other…

This may sound stifling to your own aesthetic sense- but it’s not; indeed, the golden ratio is an integral part of your aesthetic sense. Think of it as a guide. Not everything needs to be perfectly in accordance with the golden ratio, mind you; you can easily do great things without feeling constrained by the golden mean. But a deviation should be purposeful, meaningful, a conscious decision; where you haven’t elected to defy the typical design wisdom for the sake of a page design, following the golden ratio is an invaluable piece of design wisdom that makes things much, much easier for you.

It’s easiest to think of the golden ratio in terms of rectangles- but everything can be expressed via ratios. Following the golden ratio roots a more esoteric design in the familiar, and lets you take risks that you couldn’t without such an understanding. The golden ratio governs patterns in all their forms; you can build pages around unusual geometric motifs, such as a spiral or a starshape, while using the golden ratio as a tool to make these shapes appealing to the human eye.

It’s common for people to insist that aesthetics and mathematics are two distinct entities, and that under no circumstances can one be applied to the other. But humans are ultimately governed by mathematics, just like everything else in the universe; our sense of aesthetics is similar. By considering the golden ratio in your web design, you can make use of fundamental aspects of the human aesthetic sense; it’s a tool without par.
off
August 15, 2012 Articles, Techie Stuff

How To Overcome Web Designer’s Block?

If you are a web designer, then there will be days when you will have to put in very little effort to crank out remarkable web designs and days when nothing will seem to work. In fact, there will also be days when you will feel that all your talent is gone and that you will never be able to make another good web design again. However, there is no need to panic because this is natural. This is simply known as a web designer’s block that almost every web designer has to face at some point or the other. Fortunately, if the web designer’s block is coming down on you, you can conveniently overcome it and get your muse back by considering the following tips.

Photo Attribution: web-designtutorial.com

1. Stopping

If you are facing a web designer’s block, then the first thing you should be doing is stopping everything you. Put aside whatever you are trying to work on and review what kind of input (colors, logos, etc.) you have. Color inverse them, flip them, invert them, rotate them and zoom in. Look for patterns, themes or make up a color pallet if one is not available.

2. Getting up, walking away

This is an easy solution to overcome a web designer’s block. Calm down by getting up and going outside for a walk down the street or getting a drink. Taking in the sounds, smells, the sight away from your work environment will also help you overcome a web designer’s block. You should try mentally clearing your head, resetting yourself. You might get some very excellent ideas while driving around or in checkout queues. You might to spend some time if you want to come up with a good solution.

3. Visiting other websites

Another way a web designer’s block can be overcome is by taking a look a favorite designers work, taking a look at a few inspirational designs, or visiting a few CSS galleries. You certainly get some nice ideas, but keep in mind that you should only take inspiration and not steal anything.

4. Starting. Just doing it

Photo Attribution: fivetechnology.com

The wireframe is a good starting point for a web designer and if you have it then you should get started. If you don’t, then starting with a rough sketch is fair enough as well. Even if you are facing a web designer’s block, just doodle and throw in a couple of thumbnails together. Now is the time you should get in there, put pencil to paper, and play around until you end up drawing something meaningful. Even if you make a mess on the page, you will find something that will bring you out of the web designer’s block and into the designing process.

5. Setting a deadline

Often, web designers find themselves unable to come up with new designs not because of a web designer’s block but because of procrastinating. If you need to kick start yourself and get out of this web designer’s block or avoid procrastination, then you should put a deadline in place.

6. Changing media

When a web designer’s block is coming down on you, playing some console games, watching a music video or movie can also help. In fact, the different media might end up giving you some inspiration. Music is an excellent block breaker. Feeling the vibe of the music and allow it to entrance you will inspire your imagination to quite an extent. Certain types of music will help you design themes more effectively and easily.

7. Word play

Taking random words and content themes from a website, mixing them up and selecting a few randomly, is one more way of getting out of a web designer’s block. You should get started from the design and emotion reflected by those words.

8. Taking time

Photo Attribution: theawall.com

Sometimes time is all you need to get out of a web designer’s block. If you have time and a deadline is nowhere near, then there is no harm in taking your time, loosening up, thinking out and planning how the web design should look, and then picking up from there. At times, being under pressure because of time constraints can also send you into a web designer’s block.

In conclusion, a web designer’s block is inevitable, so there is no reason to be upset and frustrated. Rather, you should find ways of overcoming the block and setting yourself in the right direction to design another marvelous web design.
off
August 14, 2012 Articles, Being Creative, Techie Stuff

A Few Design Trends To Watch Out For Over The Next Year

So far, some remarkable changes in internet technology and design have occurred in the year 2012. Web development has become a process that is easy to learn and the process is being streamlined by the endless source libraries. Yet it appears that the worldwide design community will not be throwing in the towelany time soon.

Web Design Trends For Over the Next Year

Following are 15 web design trends that I would like to introduce, which are already quite trendy and are expected to grow very rapidly over the next year. Graphics and web design techniques are encompassed by these trends which will probably play a major role as we move into 2013. You might have possibly seen a couple of these throughout your favorite websites.

Fortunately, the methods of implementing these features have become much slimmer in code and easy to understand.

1. Responsive Interface Design

Photo Attribution: jquery.com

When designing a website, probably the most integral aspect that needs to be considered is the experience of the average user. You want to make sure that page elements behave as expected and respond quickly to mouse/keyboard input. Drop-down boxes, fly-out menus and popup windows are some examples. Animating these features and a lot more has also become easier because of popular JavaScript libraries like jQuery and MooTools. This code is supported by a majority of modern-day browsers. Ultimately, the main goal is to ensure the user feels comfortable whenever interacting anything in the design. Similarly, data checking and form input should be taken into consideration.

2. Touchscreen Mobile Devices

In the last few years, it has become apparent that even non-tech enthusiasts have started supporting smartphones. However, a significant boost in the number of mobile-specific templates and mobile sites occurred ever since 2012. Since Android-powered phones as well as iPad and iPhone devices have become quite popular so this means that visitors will be using touch commands to fully interact with your pages. Considering the trends in mobile web design, the best way to get excellent results is to build an absolutely separate mobile theme. This way, all the content can be kept in place on the main layout while a simpler version of the site can be served up to mobile users.

3. CSS3 & Standards

Photo Attribution: blogs.microsoft.co.il

Throughout 2012, an ever-growing following has been accumulated by both CSS3and HTML5. Semantic web designers have been waiting for years to make use of CSS-only designs to render drop shadows and rounded corners. Additionally, a lot of support has been garnered by W3C from the most renowned browsers. Good things can be seen for the future of CSS3/HTML5 web development. In today’s field, designers working at the front-end are often overlooked, yet they play a major role in the whole composition process. Developing in jQuery and Java has become a lot easier thanks to new standards. Developers have already been sharing and developing their CSS3/HTML5 project code online. Much of this is expected to be noticed as we go into the next year.

4. Premium WordPress Themes

A range of long-awaited features like unique article images and custom post types are included in the final release of WordPress 3.0. Yet, the premium WordPress themes seem to be the most thorough changes that are coming from WordPress. After a theme is purchased, the installation process is the same to any other. Yet, including custom, plug-in functionality, new admin menus, child themes, and a many other features is now possible directly from within the theme. The premium WordPress themes that are currently standing out include ElegantThemes, Rocket Themes and WooThemes.

5. Dynamic Typography

Photo Attribution: goboxy.com

Fonts area major part of the sphere that encompasses web design tradition. Arial, Georgia, Helvetica, and Trebuchet MS are included among the most noted fonts. Although a deep purpose is served by them, numerous options for webpage typography are available. For instance, a few lines of code are required by Typekit to be included in the document head. Good Web Fonts is another alternative, which functions just like Typekit. @font-face media query by CSS3 is also another option.

These were merely few of web design trends that you should keep your eyes open for, over the next year. However, over the course of the next year, you can expect to see a lot more changes and new web design trends are expected to emerge. We will just have to watch out for them.
off
August 13, 2012 Articles, Design Trends