Category Archives: Technology

RIA Development: Great Typography

Remember, Engineers are not designers!

Typography

Typography in terms of web design is basically, text, composed to create a readable, coherent, and consistent look which works for the reader.

This arrangement of text involves –

  1. Typefaces
  2. Line height
  3. Font Weight
  4. Text Colour
  5. Letter Spacing
  6. Character Spacing
  7. Measure

An arrangement of these which suits the clients requirement and also appeals to the user ,makes it visually appealing and attractive

You might probably think, ‘Hey! I can just pick a random font and a random color and it should be alright right?’

If you want your app to look like a 3rd grade school project you could go with the above idea, or else it’s time to change your user interface and, your attitude towards UI.

I’ll be illustrating some examples with CSS because it’s the easiest to understand and works with any website and also Flex. You can find most of these options on the Photoshop ‘Character’ panel or whatever you are using.

Typefaces usage guidelines:-

  • When designing logos and headings try to stick to simple serif fonts rather than funky bitmap, calligraphic fonts, unless your client demands so specifically
  • As a general rule of contrast – Light text on Dark backgrounds and Dark text on light backgrounds, so that a user can read the text comfortably without strain on the eye.
  • Try to cater to the larger audience. Use system installed fonts like Arial, Helvitica etc which are universally available on every machine and are cross platform. List alternatives by using the Font-Family statement instead of sticking to a single font, in case of CSS.
  • Remember not to use fonts which you have downloaded directly on to the webpage without embedding them in some form.
  • Consistency: – Try to stick with one style of font for all your pages, don’t use for example Comic Sans for the heading, then Arial for the menu and Courier for the content. You may vary font weights and sizes where needed.

 

Getting the best out of simple fonts with CSS

People feel their creativity is limited when you tell them to use in-built system fonts. I’ll explain how this is not true with some examples

Example of Styled Fonts

Example of Styled Fonts

Here the first paragraph is the default rendering in Internet Explorer with no style

The second paragraph has some minimal styling applied to it as follows:-

Styling Applied to Paragraph 2

Styling Applied to Paragraph 2

 

As you can see these three properties dramatically alter the default rendering. A few variations of this could be adjusting just the four properties: –  letter-spacing,line height,font-weight,text-transform

Example of how built in fonts can be styled using CSS

Example of how built in fonts can be styled using CSS

Text Colour

  1. Make sure your text is readable and also matches with the template or color theme of the program. While doing this make sure you know the background color of your text, what I mean to say is for example don’t put light grey text on a cream background webpage which is very hard to make out. 
  2. Test out the colors on either paint or photoshop to see that they complement the overall theme of the page.
  3. Do not use colors on the fly randomly without first thinking of a color theme
  4. Do not use contrasting colors or vivid colors on the web page that hurt the eye.
  5. Use font weights to assign priorities to the text under consideration. For example, if there is an alert or a warning next to normal text content make sure both of them do not have the same weight (bold). Give the warning a higher weight than the text

Letter Spacing/Word Spacing/Line Spacing

            Make sure the letter spacing and word spacing are proportionate. Do not try to fit maximum content in the minimum amount space. Don’t give the user an impression that you are throwing something at him and be like “Here is everything. Now figure it out”.

 

Deciding a color theme

There is no single answer to the question “What is the best colour theme to use?”. The truth is there are millions of them. How do you come up with something that suits your requirement?

In many websites the colour theme is adjusted according to the content. For example if the images in your slides/pages have a lot of purple in them, the theme will be oriented in a “purple varaints” fashion

The other way is to go by the colours of a logo. Usually you have logos ready before you start a page or a program. If your logo is light, you want a dark backround and vice versa. Also the website colours must complement the logo or the product for the webpage.

If you still aren’t getting it, try Kuler from Adobe (http://kuler.adobe.com) where you can play around colour themes people have already made and use them directly on Photoshop or Dreamweaver.

Adobe Kuler

Adobe Kuler

Content Padding

            The padding clears an area around the content (inside the border) of an element.

Make sure you use proper padding and margins everywhere so similar containers or text don’t get too close to each other like it’s a trashcan where everything is thrown in!

The image below should give you a clearer picture about how paddings and margins work.

 

Some Examples of great typography

That finished the typo part. Hope this will help you at some point of your life when you design good scalable applications or RIA’s.


Create your own trance,rock,pop songs! Professionally on your computer! Without a single Instrument!

Ever listened to Armin Van Buuren , Dj Tiesto trance songs and wondered if you could try ? Ever wanted to create your own songs but never had the cash? Here’s just the thing for you!

Logo

FL Studio 9 by Image-line!

This is the most amazing piece of software I have come across by far. This software will allow you to create, edit, mix your own drum samples, make your own loops for techno/trance songs. You can use built in drum-loops or make your own. It has support for a lot of musical instruments. If you ever fall short you can always download your own sound samples or plugins from their website.

The basic layout is somewhat like this –

Main FL Studio Window

On the extreme left you can see the Browser window which allows you to see all the files and sound samples available as also plugin presets.

In the middle you can see the Pattern Sequencer. The sound sample can be triggered on or off by clicking the switch-like buttons.

Pattern Sequencer

You start off with a basic Kick,Clap,Snare,Hihat. After that you add your own channels according to your requirements.

You get a piano-roll interface to find the exact notes. There are Bassline synthesizers built in. You just have to play around a little to get the beats right. If you try the one above you might get an idea.

The TS404(or any other) will sound a bit boring alone on its own. So try and send it to an ‘FX’ channel, and apply different effects.

Effects/Send Window

The easiest to start with for a techno preset are the Fruity Delay Bank which gives a nice delay effect. Recorded vocals can use the Vocodex plugin.

If you have a MIDI compatible keyboard at home you can enter your notes directly into fruity loops. Dont have one? no worries! Just type with your normal keyboard and hit record.

Also you can use the Hardcore Plugin to experience real AC/DC guitar like-effects. Just like the real ones.

Hardcore Plugin

What are you waiting for? Navigate to http://www.flstudio.com/ and download your free trial!

Dont believe me? Try listening to this http://www.youtube.com/watch?v=E0yuzb1ysnU&feature=related created on Fruity Loops.


Apple to PC (Hackintosh) on my HP530

After Stumbling upon a lot of posts about Apples Operating System ( A lot of people still dont know it exists ). Mac OS X (10.5) Or Leopard as they call it, I wondered why people were so desperate to get it installed on their PC’s. Okay I got that it costs more but till now all I heard about it was “Its crappy and it does not run any windows software”. I would like to dispel both these myths.

Firstly I would like to tell you that Apple’s Operating system is not supported on any other platform except their own. Their Mac Book Pro’s or Airs come preloaded with this software.There is no “retail” version for the PC that you can go buy at a store.

The differences between the hardware used in PCs and Macs require various patches to be installed before Leopard can run.Fortunately two groups of people have been successful in hacking the kernel and making it into a bootable dvd that can be installed on any PC without much knowledge of terminals etc.These packages are referred to as iATKOS and Kalyway.

Legal Issues:

There are various legal issues invloved as Apple’s agreement limits the software only to Apples computers.However you may able to download a copy of the DVD. Check iatkos.wikidot.com for the latest version. You can think of it as a “demo” version before you buy the original licensed copy.

I wont be writing about how I did it because basically all you have to do is download it, burn it to a dvd and run the installation and partition one of your drives and format it to be used with Mac’s version of FAT.There are many guides available for that. You may have a problem with the drivers (or kexts as they call it) Trial and error will give you the right ones. Barring a few exceptions you can have a fully functioning Operating system.

The difference between Mac and Windows

The Mac was the first computer really to have a “Graphical user Interface” or GUI. Microsoft copied it into Windows 95. Steve Jobs still gloats about it.A lot of fonts were also designed on the Mac before windows copied all the features.

Why I liked the Mac better?

1. Firstly it boots up WAY faster than windows XP or vista or 7. I’ve seen this practically with the dual boot on my computer.

2. The installation takes only about 20 minutes where it ranges from 45 minutes to an hour for Windows Vista or 7 depending upon your RAM and other things

3. The interface is extremely easy to use. Any idiot or anyone with hardly any knowledge could use a Mac (provided they were not used to Windows first that would just irritate them). The dock at the bottom and the huge icons help for quick access

4. Websites open up much much faster in Apples version of explorer or an internet browser called “Safari”.  Hardly any crashes or scripting errors like you get in explorer

5. The names that they give to their applications and products are very appealing. What sounds better? the dull old “internet explorer” or “Safari” ? “Windows movie maker ” or iMovie? “Windows Media Player”or iTunes. Microsoft Office or iWork.

6. Switching between applications is very easy. The Expose application allows you to see all your running windows at once and Spaces allows you to use multiple desktops and switch them.

7. The iChat application. I love chatting with it. It connects to Gtalk,AIM. When I get an incoming message the blue ichat icon starts jumping at the bottom. Yes literally “jumping” and makes a really cute sound and a small dialog box pops up with the message in a baloon. The alternate left-right arrangements also look beautiful

8. Overall the OS works Really Really Fast as compared to windows.

It runs Windows Software. Yes Everything

Everything from Explorer , Office, Word to Call of Duty ,Warcraft almost everything works with Mac. You have to install a simple 3rd Party application. There are various ones available. Im listing a few.

Crossover Mac – www.codeweavers.com/products/cxmac

Wine – (free open source) http://wiki.winehq.org/MacOSX

Virtual Machine from Parallels. – www.parallels.com

All these applications create a ” fake” or emulated windows environment where any windows program can run. You need to install windows on it though first. Then you have XP/7  running in a separate window inside Mac.

Time for change!

The reason why we cant adopt a Mac now is because of Windows. Microsofts strategy of allowing piracy (unofficially) helps them gain control of the worlds market. Like a virus outbreak. Everyone starts using windows. Now the scenario is such that apple has only 10% of the worlds market while Windows dominates. Windows has paralysed everyone to sticking to it. Life had become unimaginable without windows. Every household in India has a pirated copy of windows along with their Pc. Im sure most people are still not aware you need to purchase  a “legit” copy of windows.

For all of you people who think its okay to use pirated windows and if you think Microsoft cant find out about it you are wrong. They know exactly how many people use pirated copies. They just wont take action because suing individuals isnt really affordable. They catch the big fish  – Companies and Industries.

Its time for change people. Adopt a Mac!

How I did it – short summary:-

1. Downloaded Kalyway 10.5.2. Installed on stock kernel / drivers.

2. Drivers(Kexts)  for Intel GMA 950 – http://www.mediafire.com/?2mgnmznzqcz

3.  Audio – Mic / Out everything works – http://voodoohda.googlecode.com/files/VoodooHDA.kext.zip

4.Wireless – (Causes Kernel Panic many times) http://iwidarwin.googlecode.com/svn/trunk/iwifi-osx10.5/iwifi.dmg

5.PS/2 Controller – VoodooPS2 – http://www.insanelymac.com/forum/index.php?showtopic=175372&st=0 (Disable the apple on first or you are screwed)