Simple design rules for web developers

Designers. Can’t live with them, can’t live without them. More often then not, developers will have to work together with designers to create a website. Which most of the time means the designer will create a design and some HTML & CSS. Which the developer will then integrate and adapt to fit into his software to actually make the site work.

The problem however is; Developers normally didn’t go to design school and many of them have the artistic ability of your average garden rock. I’m certainly no exception to that. However, if you learn a few basic guidelines and rules, you can make the life of your designer buddy a lot happier by not screwing up his design.

So here are just a few general hints and tips to explain what is important when adding something to an existing design or when integrating it into the actual software of the site.

Aligning stuff

Stuff needs to be aligned, both horizontally and vertically. It must be aligned “visually” instead of accurately, which means that if you look at it, it should look aligned. Which could mean two pixels to the right or left of the point where two blocks were actually aligned.

however as a rule of thumb, you can pretty much align them accurately. The reason for aligning stuff is because it is visually pleasing for us to look at.

misaligned

aligned

In some few cases the designer might actually want to purposefully have a few elements be misaligned, so if your doubting, just look at his designs or simply ask him.

Whitespace

Where saying less is more. Whitespace, as the name suggests, is the empty space around objects. As with alignment, everything should have a little bit of white space and for the most part, the amount of whitespace should be the same.

Whitespace brings some calm into a design. A design will look far less crowded with ample use. Also, whitespace will often be used to emphasise certain elements within a design. This is where the amount of whitespace will differ. Headers, for instance, will often have more whitespace around them then paragraphs.

It is also always a good idea to make sure there is a lot of whitespace around important elements for your website. When there is a lot of whitespace around an element in comparison to other elements on a page, your average human will read that element first.

If you want to know a lot more about whitespace, read this article from a list apart that deals exclusively with whitespace.

Colours

Colours are not only pretty but also important. Often companies and brands will have very specific colours associated with them. Coca Cola red, UPS gold&brown, etc… Now designers could probably bore you for hours about colour theory and all that stuff. However, what’s important for us developers to know, is to never introduce new colours. A designer will have chosen a small select group of colours for use in the design.

You will have one or two base colours, and an accent colour. For instance, for the design of this site, the base colours are light grey and white. and the accent colour is blue, and perhaps black.

What this means is that if I should add some new element, it should be one of those colours. Not purple simply because I like purple. Your best bet, depending on the size of the new element, would be to use the accent colour. The use of the accent colour is to basically add some spice to design and use it to draw the attention of viewers.

When using colours, be precise. You might think, blue is blue. But if your designer used #7c95e7 in his design, then be sure to use #7c95e7 as well. You could even ask your designer to write down the used colours for you in HEX.

Ask your designer

question

Above are just a few general tips to watch for, but the best advice I can give is to simply ask your designer when in doubt or even just to verify. Because basically, It is like you created the software for the site and then some amateur takes it and start modifying it in small ways. I think most developers would at least like steer how those modifications are made, explain a bit what the thoughts were behind how it was written and such.

I have to say though, not all designers will like explaining it to you. But just remember, your not doing the above to please the designer, your doing the above to please the client, to make a better website. If that means having to bother your designer for 5 minutes, then so be it.

Please follow and like us:
error

Continue Reading →

Designing tips for global websites

It is perhaps an obvious thing to say, but the world wide web truly is a global phenomenon. Anyone with an internet connection can access your little corner of cyberspace – and yet the vast majority of websites are built with only one language and culture in mind as the target audience.

English remains the most widely used language on the internet (Internet World Stats) but still accounts for only around a quarter of all usage, and studies have shown that even multilingual web users prefer to use websites in their own native language.

A multilingual approach to website design will open up whole new online markets in the foreign language internet – but there’s more to the design process than simply throwing your content through a translation program.

topLanguages2019

 

Lost in translation

The issue of translation is, of course, vitally important and it can be achieved most cost effectively by building a translation widget such as Babelfish or Google Translate into your site. If you do go for machine translation for your content you should avoid culture-specific references and turn of phrase that may not translate easily.

Also, for purposes of SEO, you should never directly translate your keywords – this is because colloquialisms, abbreviations or other alternative keywords could all be more commonly used terms. Employing a native speaking professional translator will be more expensive, but will help avoid mistakes and retain nuance and context, as they can rewrite your copy in foreign languages – otherwise known as ‘Transcreation’.

Use the right tools

Cascading Style Sheets (CSS) allow you to keep your design and content separate, meaning the content can be altered later with relative ease and without having to redesign each page from scratch. Some languages, such as Arabic and Hebrew, are written from right-to-left. Navigation bars in left-to-right languages (such as English) are often positioned vertically on the left-hand side of the page and may need to be switched in order to retain a natural look for a right-to-left script. CSS makes it relatively easy to flip a page template or reverse the direction of text, but using horizontal navigation bars from the start will avoid the necessity for re-designing navigation bars.

You will also need a suitable character encoding tool. Unicode UTF-8 is compatible with almost 100 written languages or scripts and is supported by most common browsers. This will allow you to use non-Latin scripts such as Japanese and Cyrillic, as well as ’special’ characters in extended Latin alphabets like the Swedish Å, Ä and Ö or the German Ä, Ö, Ü, and ß.

earth

 

Cultural mores and design preferences

There are a number of considerations when it comes to the look and visual design of a multicultural website. An obvious one is to avoid images that might cause offense. Photographs of scantily-clad holidaymakers might be acceptable for a travel website in the west for example, but would be less suitable in some more conservative cultures. Colors can also have different connotations within different cultures. White, for example, often signifies marriage in the west but can be linked with death and mourning in India and China. This doesn’t mean a white color scheme couldn’t be used but it can have a bearing on the general mood and feel of a site.

Differentiation can also be made between the way people from different cultures process information.  Anthropologist and cross-cultural researcher Edward T. Hall proposed the idea of ‘high context’ and ‘low context’ cultures and various studies have since confirmed that the design of a website has an effect on the way it is viewed by people from different cultures.

High context cultures, such as Asian cultures, place a lot of importance on the whole look and ‘feel’ of a website, whereas low context cultures, such as Germany and the Scandinavian countries, prefer clearly expressed and explicit information. In practical terms, this might mean a more visually immersive design with much of the navigation achieved by clicking intuitively on images would work better in Japan, while a more minimalist design with concise lists and menus might be preferable in Sweden.

Translating the content of your site is crucial but it also helps to present your information in a way that people from the culture you are targeting find appealing to the eye.

Please follow and like us:
error

Continue Reading →

6 Key Characteristics of Proficient Web Designers

Of the many technology-related careers and professions today, one of the most exciting (and most lucrative) fields, is web design. Well, take a look around you, and you’ll see everyone logging online to do research, shop for groceries, pay bills, book airline or concert tickets, apply for jobs, run advertising campaigns, etc. This explains why small, medium and large companies are always on the lookout for web designers who’ll design, and maintain their online portals. Here’s a look at a few of the key characteristics of proficient web designers.

1. A Good Web Designer Has Above-Average Design Skills

One of the key characteristics of Website design Egypt experts is that they have in-depth HTML skills. Web designers who know how to write the HTML code by hand are sought-after because writing the HTML code by hand eliminates “code bloat”, which is notoriously created by programs like Dreamweaver and WordPress.

An expert web designer also knows CSS, or Cascading Sheet Styles, which controls font sizes, colors and does away with code bloat too. They’re also proficient at SEO, graphic design, social media marketing and networking, as well as setting-up mobile websites.

Design Skills

2. Expert Web Designers Create Clean-Cut Websites

Another key characteristic of seasoned web development Egypt experts is that they always churn out professional-looking and clean-cut websites. If the designer knows nothing but fill the site with obnoxiously flashing affiliate banner ads and other links at the top of the home page, then they’re just trying to earn a living through advertising, and not their web design skills.

3. They Reach Out To Clients And Always Find Solutions

Apart from being technically proficient, a good web designer always reaches out to his or her customers too. The web designer makes it a point to schedule daily or weekly meetings with customers, so they could both review the processes, and they can directly get feedback from clients too. Good web designers also know how to look for solutions, and not just settle for shortcuts.

4. They Are Proficient In SEO

Apart from building or designing websites, the web designer Abu Dhabi should also be armed with SEO, or search engine optimization skills. It’s because if he or she doesn’t know an inch about SEO, how are they going to make the website more visible, and search engine friendly? With SEO, a truly good-looking website will gain better online traffic, and will enjoy wider visibility too.

5. They Are Innovative, And Know Their Client’s Market

A skilled web designer always approaches a project with a fresh and innovative mindset. He or she also has a critical view of aspects like user interface and graphic design, and has a habit of pushing things forward, and exploring new boundaries. The designer also has ample knowledge of the industry or niche that he or she’s working for.

6. They Are Proactive and Collaborative

Even the most seasoned web designers will experience a couple of road blocks and hurdles along the way. But for seasoned web designers, there’s always a solution for any problem, and the best way for finding solutions is to ask fellow designers for advice and help.

A seasoned web design expert also keeps his or her co-workers and clients in the loop always. This means that they keep everyone updated and consulted, from day one to the final stages of web design and development. When hiring one, make sure you carefully check the designer’s credentials, so that you’ll get the best and brightest web design experts.

Proficient web designers are also ethical individuals. They use their special skills to maximize the website’s utility for its users, as well as to make sure that site visitors are offered the greatest ease of navigation. They also fully comply with local and international codes of conduct and standards, and do not use illegal methods or non-compliant software.

Please follow and like us:
error

Continue Reading →