Tag Archives: design

hybrid

Web/Hybrid mobile Apps

There is an evident abundance of native applications in the market which suggests a persistent trend of development and rightfully so, since native apps are obviously way smoother than your average mobile or a Hybrid application. Yet every platform has it’s perks depending upon the situation, such as the type of resources, time availability etc . If you want to build the next Foursquare, using geolocation and providing a means for displaying data and updating data, a hybrid app is a perfect solution and enables you to build it once, publish it through app stores, and have it work on several platforms.

User Interface/Experience Design for Web/Hybrid apps:

Every OS has its own signature user experience that transcends throughout the ecosystem, and meddling with that would mean betraying the user’s confidence and you might end up making the user feel stupid. The user’s are mostly accustomed to the general rules of the OS, like the gestures, controls and other such elements and an app designed keeping that in mind would maximise any learnability for the userUX Comparision.

 As displayed above, the comparison shows how the two platforms have different real estate to  put  similar options

When designing a user experience for a Hybrid/Web application, we have to cut through these issues and make sure that we present a UI that lessens the learning part and make the experience more intuitive.

Tips to minimise trade-offs when designing a Hybrid/mobile app:

1. Know your platform:

Like any project you have to know what your working with, which means that you need to make sure know the pros and cons of the platform that the UI will be based upon. There are plenty of platforms that can help you build a great web/hybrid application but knowing there weakness and strengths will help you understand and let you make informed decisions, like designing controls ad navigations that are more feasible and easily implemented without any lag issues.

2. Do your research:

While on the drawing board, start sketching out different styles with wireframes and test them. You can come up different variations of the UX and prototype them with the help of different tools available online such as Flinto, Launch and POP etc and put it in front to users belonging to different breeds (OS users). This will help greatly in concising the sort of controls and gestures you can use to better the user experience of the application.

3. Don’t pick sides:

As a designer you should act as a neutral party and avoid any favorites while designing the User interface since this might cloud your judgement. A lot of times you might see an extensive use of iOS styled controls/gestures or the latter(android) implemented in a hybrid mobile application which might be one of the greatest sin since this might confuse the user’s or make it difficult to perform certain tasks in flawless fashion.

There should be no apprehension in experimenting with customised or even hybrid controls/gestures in a way that they have a higher learning curve.

4. Keep it Consistent:

Consistence is very a important factor to maximise the learnability which can be achieved by using design elements such as colors (for indication or used as markers) and real estate that is consistent throughout the app. This way the user will have a very smooth learning experience and easily be able to grasp the UI without having trouble figuring out anything.

 

Following are some of the major Hybrid/mobile platforms available:

 

Titanium SDK (CPNS): The Titanium SDK compiles JavaScript to native code. Titanium claims 60%-90% code reuse when supporting multiple platforms.

Xamarin (CPNS):The Xamarin framework provides a .NET environment for your application to run on. The application is written in C#. Porting between platforms requires some complex development work.

Oracle ADF Mobile (Hybrid): Oracle Application Development Framework (ADF) mobile is a combination of Oracle ADF (JavaServer Faces (JSF)) and PhoneGap. This solution is ideal if you already have a large JSF deployment.

 

Pros and cons of mobile platforms:

Pros (Cost)
• A cross-platform solution allows the same code to be run on multiple platforms, reducing development and maintenance cost.
• PhoneGap and ADF provide excellent support for existing Web content.

Cons (Third Party)
• Components sometimes look and feel incongruous with the device’s native UI.
• Not all new device features are immediately supported.
• Developers are dependent on a SDK to make things work.

googleio

Is “Material Design” a good thing for Google?

Advent of this year has brought us some really exciting developments in to the tech industry. First WWDC 2014 unveiled some promising new developments such as the OSX 10.10 Yosemite and interesting new development features and advancements with forthcoming iOS 8, moreover 2014 seems to be a exciting year for wearable devices as well. Google’s I/O 2014 did not disappoint us either some key announcements which hint a pivotal change to the Google with wearables, cars and TVs etc.

Google has shifted towards synchronising its interface and making the overall user experience in to a well balanced eco-system. The google devices such as android TV, Android wear etc will be a very well synchronised system if everything turns in to fruition and we might be living in an android world, atleast if we let Google’s vision do the talking. 

Android L & Googles new “Material Design”:

Google’s new design approach is a profound change to its current User interface and experience. If we focus on the UI/UX, It is sort of mix between windows 8 and iOS7 with similar design approach yet with an added flavour of Google in it. Also google is now setting the stage for 64-bit devices with the anticipated release of Android L expected to hit the market by year end. This clearly means that Google paced up to compete toe-to-toe with the 64-bit market segment against Apple with much pounding from Apple.

“Apple changed the timing for everybody when they came out with the 64-bit iPhone,” said Nathan Brookwood, principal analyst at Insight 64, who is happy to see 64-bit finally reach Android.

During its I/O keynote, Google announced its new design vision that will debut with Android L alongside its other Android-related initiatives, including Android Wear, Android TV and Android Auto. Android L will be featuring in the upcoming android devices and other web products which will signify a cohesive user experience across all platforms/products.

Android-L-Material-Contacts

The New Look

The above picture highlights how the contact info screen will look like in the new Android L. It is pretty safe to say that this is a huge change from Google’s so called “Holo UI”. The design is not just focused on simplicity but also making sure to keep things interesting and not to make the experience drab. That is one of the reasons why we guess the UI/UX is so focused on smooth transitional animations and flows.

784016517781023812

So why is it called Material design, you’re asking? As we saw Mattias Duarte explain today, this new playbook is all about three-dimensionality: Thinking of pixels not just as 2D spots of color, but as 3D cubes with depth and weight.

Material design is a breakthrough in at-least to a philosophical point as it shows in the behaviour of its User interface. It is sort of a next step in the realm of minimal user interfaces where it advances the ideology of skeumorphism and rather mimicing the look it is based upon creating a behavior where every piece/element of the UI and actual weight as if it was an actual object and the same goes for shadows and animations.

784004148062208688

 Web & Beyond

Flat design was all about getting rid of extra visual crap that cluttered up our screens. Which was great. But it also got rid of some very important details that make screens easier to read and interact with; shadows, for example.

“The fundamentals of light, surface, and movement are key to conveying how objects interact,” Google’s team explains in a manifesto of sorts available here as a PDF. “Realistic lighting shows seams, divides space, and indicates moving parts.”

784014790090986666

Conclusion:

Google’s new philosophy might change the entire order of how we interact with the digital environment and also the cohesive user experience will add  to that. A unified experience seems like it might create a Google world with a well synced ecosystem of apps & devices.

784004148401452208 784043276521435465 784004148653086896

Check out the following link for more info and designer resources:

https://www.google.com/design/spec/material-design/introduction.html

Fonts

Digital Fonts

What is a font?

The question is not as straightforward as it might seem. The word font has

come to be a general term for everything from the software to the typeface

design. In this article, the word font is used for the software for which

a user can buy licenses and which enables a machine, like a computer or

printer, to display and/or print images of a typeface design.

(Description courtesy: Linotype.com)

 

What is a font family?

A font family is a group of fonts which can be linked together for convenient

use. The most common font family consists of the plain, italic, bold and

bold italic weights. The link between these four fonts on a computer enable

the use of style buttons like those in Microsoft Word, for example. When

you are writing a text using the plain defined weight of the font and would

like to emphasise something with an italic, this link allows you to just press

the ‘I’ button instead of having to choose a new font (the italic weight) from

the font menu. (Courtesy: Linotype.com)

 

How Mac and Windows environments organise fonts differently?

On a Windows PC all fonts which are parts of font families are treated as

such. And because this family link eliminates the need to see all members

of a font family in the font menu, a PC font menu shows only the plain font

of the family. A Mac can organise fonts by family, but unlike on a Windows

PC, they can also be organised by their individual names. You can use

the style buttons to access the different fonts in the family, but when you

choose a particular font from the folder, you can see exactly which one it is.

On a PC sometimes bold or italic looks funny when you press the

corresponding style button in their program. This is often due to the

fact that only one font weight is on the computer. Some applications

can electronically alter a plain font so that it looks like an italic or bold

version, however, this is not the same as the italic or bold font itself. The

appearance of such electronically altered fonts, both on the screen and in

a printout, can vary, and some printers will not print them at all. When you

buy the full font family, you are buying fonts which have been designed,

constructed and mastered to fit harmoniously together, both on screen and

in printouts.

Another possibly confusing fact about font families is the way they are

listed in a program’s font menu. As explained above, a font family has one

font which represents the entire family in the font menu. For example, if

you instal Frutiger 45 light on your computer, you will see Frutiger 45 light

in the font menu. If you then instal Frutiger 46 light italic, you will still only

see Frutiger 45 light in a PC font menu. On a Mac you will have both style

links and a list of all fonts in the font menu, so you would see Frutiger 46

light italic in the menu. (Not all fonts are linked in families, in which case you

would see all font names in the font menu but could not use style buttons.)

And if you first instal the family version of Frutiger 65 bold, you will also see

Frutiger 45 light in the font menu, even if you never instal the font with this

name.

 

Characters and Glyphs

The difference between a character and a glyph is one to keep in mind

while reading through this feature, as it is essential to understanding

Unicode. A character is a member of a collection of elements (the alphabet)

which serves to organise, control and/or present data. A glyph is a

recognisable, abstract, graphic symbol. The typefaces Times New Roman,

Zapfino and Helvetica light all have a euro character, however, you will

see, that each typeface has a different glyph to represent the character.

Which means that all three typefaces mentioned above, have three different

glyphs to represent that one character, the euro. (Courtesy: Linotype.com)

 

Unicode Fonts

A Unicode font is one which is based upon and supports the Unicode

standard. The basic idea behind Unicode is the unification of all written

systems of the world in one character set. Unicode uses a 16 bit character

sets, that is, 216 or 65,536 bits. That means that each character is

assigned a unique 16 bit code. The euro currency symbol, for instance,

has the code 20ac. To go back to the paragraph above, each of the three

glyphs have the same code because they represent the same character.

The large number of places is needed to be able to include some of the

larger alphabets, like Chinese, Japanese or Korean.

The Unicode standard covers not only letters and numerals but also

diacritical symbols, punctuation, mathematical and technical symbols,

dingbats, etc. In the latest version of Unicode, 3.0, 49,000 codes are

already assigned and 6,400 are reserved for private use. For example, if

a choreographer has symbols which she uses for her work, but which,

because of their very specific use, have no code, she can assign these

reserved codes to the symbols. Although the almost 65,000 codes of

Unicode should be enough for the world’s written systems, the expansion

system UTF-16 offers even more, 917,476 more codes, with 131,068

reserved for private use.

As it becomes more and more important to communicate with people all

over the world, the benefits of Unicode become more and more evident.

It is a universal system which will cover all symbols of the world’s written

language systems and then some. This means that the platform, the

operating system, the software you use will not affect the content of

your document even if you send it to someone who works with another

platform, operating system and/ or software. In other words, language,

whether of the software, the system, or the document, is no longer an

issue. Unicode is supported by important software manufacturers like

Apple, Hewlett-Packard, Microsoft, IBM, Oracle, SAP, Sun, just to name

a few. It is also a requirement for modern standards like XML, Java,

JavaScript, etc. All modern browsers support Unicode as well as many

operating system, among others Windows 95 and up, Windows NT 4.0

and up, Mac OS 8.6 and up, Linux and other Unix systems.

Unicode also offers an efficient way to deal with text. Because Unicode

is based on characters and not on glyphs, the way a text looks is not

important, only its content is. Unicode will tell any system which is

interested that the word with which it is working is composed of the

characters t, y, p and e, in that order. Whether the text is set in Times

New Roman or Helvetica is irrelevant, Unicode deals only with pure text.

This increases the efficiency of computers working with the text, as the

information they send, receive and analyse has only one unambiguous

meaning. (Courtesy: Linotype.com)

 

What is the Difference between PostScript and TrueType?

PostScript Type 1

PostScript Type 1 fonts can also be called outline fonts. They are a special

form of the PostScript programming language, themselves building

programs of their own, namely the font software. A font in the PostScript

language contains an organized collection of procedures to describe

the glyph forms. Different font programs contain different amounts of

information, gathered together in the so-called ‘dictionary’. The dictionary

saves the obligatory and optional entries and serves the PostScript

interpreter as a data object in order to access all font functions.

PostScript font technology makes it possible to scale fonts, meaning

to create the forms of the font in all point sizes. The major advantage

in comparison to metal type or bitmap fonts is that the user needs only

one font weight to create the forms of all point sizes. In relation to digital

typefaces, the disadvantage of outline fonts compared to bitmap fonts is

that the rasterizing takes time to compute and that outline fonts in small

point sizes do not reach the quality of hand-drawn bitmaps.

All glyphs of Type 1 fonts are described from abstract, mathematical

outlines of lines and curves. Points on these outlines describe the curves

and are differentiated as on-curve and off-curve points. On-curve points lie

on the outline of a glyph and off-curve points are part of on-curve points.

They control the form of the curves which describe a glyph.

TrueType

The TrueType technology is made up of two components: fonts in TrueType

font format and the TrueType rasterizer. Both are necessary to display and

print TrueType fonts on computer systems. TrueType is compatible with

both Apple and Windows systems, however, the TrueType font file created

for each operating system is different. Macs can use a Windows TrueType

font file but Windows can not use an Apple TrueType font.

TrueType is an outline font format which allows the scaling of typefaces.

This means that all point sizes of a glyph are made from one and the same

outline. The file itself contains different data blocks or tables which are

accessed with a table directory. These tables contain information about the

glyphs, outlines, bitmaps and other typographic and font specific data.

TrueType has three glyph types: simple, combined and glyphs without

contour. Simple glyphs contain compressed outline and hinting data.

Combined glyphs, often used for accented glyphs, base their outlines

on other glyphs, whose components are again based on other simple

or combined glyphs. A combined glyph contains the hinting for each

component individually. Glyphs without contour, for example, the space,

define the behaviour of a text, have however no glyph of their own and

hinting cannot be applied to them.

 

Outlines describe glyph forms mathematically and are constructed of

on-curve points and off-curve points. Two on-curve points in a row will be

connected by a line; curves are defined by quadratic B-splines. Each spline

consists of a number of quadratic Bézier curves which are defined by three

off-curve points.

The user generally never sees the outlines of a font. This is because

both screens and printers use a bitmap matrix for display. The outlines

of a TrueType font are scaled to the desired size or turned to the desired

position and then converted into bitmaps. Turning a pixel on or off depends

directly on the outline and follows these rules:

1. If the middle of a pixel is within the outline of a glyph,

the pixel will be turned on and become part of the glyph.

2. If the outline falls exactly on the middle of a pixel,

the pixel will be turned on.

 

A Question of Format

So which of the two font formats is better? The answer is anything but

simple and must be seen from a variety of angles. Both formats, TrueType

and Type1, consist of algorithms or instructions with which an outline

font can be rasterized in pixels for display. The main differences between

the two formats are of technical and philosophical nature, as well as

dependent upon various corporate policies.

Technical

Regarded technically, the hinting process of the TrueType technology is

superior to that of Type 1 because it allows instructions in three directions,

down, up and diagonal. Type 1 only allows upward and downward hinting.

In connection with Apple and Microsoft it must also be noted that Type 1

fonts need the ATM while TrueType is an integrated part of both systems.

Philosophical

When TrueType and Type 1 fonts are used in the same situation, meaning

same operating system and same end machine, the differences are

minimal, usually even imperceptible to most users. The use of a particular

format is today simply a matter of user preference.

Corporate

PostScript Type 1 is a development of Adobe Systems and was accepted

for some time as the standard for scalable fonts. Adobe kept the format

a secret and therefore kept a monopoly on this format. Apple Computer

Corporation retaliated by developing its own outline font format, TrueType,

which was later purchased and further developed by Microsoft.

(an excerpt from: Ivir, Milo. ’Entwicklung digitaler Schrifttechnologien

und ihre Einflußnahme auf die Typografie im Zeitalter des elektronischen

Publizierens’ (The Development of Digital Font Technologies and their

influence on Typography in the Age of Electronic Publishing). Diploma

thesis, Institute for Technology and Print Planning, College of Art, Berlin,

1998)

 

 

EDU

Creativity and Education: Why it Matters

Adobe has released Creativity and Education: Why it Matters, a new study that sheds light on the role of creativity in career success and the growing belief that creativity is not just a personality trait, but a learned Adobe has released Creativity and Education: Why it Matters, a new study that sheds light on the role of creativity in career success and the growing belief that creativity is not just a personality trait, but a learned skill.

creativity_and_education_infographic

 

pro

Prototyping for users

As we all know, any design process consists of several steps and procedures that involve constant evaluation of progress.

The key to a good design is that it must acknowledge the constraints and limitations and be carved with an understanding of the end user (their psychological, social aspects) and the interactions.

Polaroid prototype similar to concept drawings for the "Model 5700" that was never produced. While this design was made by Walter Dorwin Teague Associates, the actual design was probably done by Teague's son Dorwin Teague Jr

Polaroid prototype similar to concept drawings for the “Model 5700″ that was never produced. While this design was made by Walter Dorwin Teague Associates, the actual design was probably done by Teague’s son Dorwin Teague Jr

Prototyping:

Prototyping plays a pivotal role in the determination of value and quality of the design at the same time creating more room for predictability, innovation and collaboration. Prototyping  is an efficient strategy to determine hard to predict events or outcomes.

What is a prototype?

A prototype is an incomplete version of your design that serves the purpose of reflective evaluation. A prototype is made not just to test and evaluate design but also to innovate and create a better product.

Features of a prototype:

A prototype can easily be retired to a new one and is an incomplete version of the final design. A prototype is not meant to be complete, for example; A prototype might be a wooden block, shaped in form of a smartphone that is under development to test the experience of holding it, mimicking usage, keeping it inside the pocket etc.

Although prototypes do not have to be exact size yet they can be developed for small and large scale products. Walter Dorwin Teague, a famous American industrial designer prototypes the interior of a Boeing 707 and made participants experience it.

Walter Darwin Teague inspects in the interior of a Boeing 707

Walter Darwin Teague inspects in the interior of a Boeing 707

In proportion to what we perceive there are usually far more ideas and options out there to be discovered on any given project, hence prototyping plays an important role in refining the product and collaboratively injecting new ideas efficiently.

The user factor:

User is one of the very vital elements that shape the final outcome of a product. Understanding the psychological and social aspects of the user is important to better judge the product’s abilities in order to facilitate their requirements, and make things easier and joyful. So for example, in terms of the user factor there are perceptual and cognitive limitations like a human eye is not able to see more horizontally in one position than vertically. Also all possible limitations of interactions should be taken in to account like the usage environment/model etc.

 

 

INSP

Inspiration…Can I get one of those?

So at the office today I felt kind of low and lacking any sense of motivation to do something awesome with my usual projects. I basically work as a print magazine designer/Creative and I kind of love the job to the perspective of responsibility that I have to make something that looks good to the readers. Yet I do not feel that thrust of enthusiasm a lot of days, so I started wondering “what the heck”… I have been in love with commercial art and design as far as I can remember, so what is it that is keeping me from being all so inspired on the daily basis with the projects I have.

Although I hate monotony, yet it is not something I completely despise when it helps me maintain a good balance with work and life so I bothered to study how few other good graphic designers out there tend to go about there daily work routine, not just trying to understand there work ethics but also how they keep their work environment and the workflow.

I got a few ideas and I can easily say this… there is no set rule on a carved stone that can guide every designer out there searching for their daily juice of inspiration. I believe that it is important for us individually to understand our key strengths and that might help us eventually finding out what will make us shine through. A few key basics that can guide a full time creative professional or a freelancer to my opinion can be,

Find your E-Spot: It so very important to find your enthusiastic centre, it is something that I feel is almost mandatory to go about the route of creating a  healthy experience while working and making good design happen. Now finding that very centre is not so easy, specially if your fresh, but you might still have a faint idea about it. So it needs to be something specific like if you have always loved photography…are you more interested in capturing topographic landscapes or maybe it is something about the insects that give you a sudden boost of creativity and inspiration. In short, find out what makes your mind and heart all lit up with ideas and jolts you to create something awesome.

WORK SPACE: Creativity bursts from the external stimuli, It is the experiences that feed our mind to help us churn out ideas, having said that, you need to create a working environment that best suits to your individual preferences in terms of what you like to feel like in your workstation and also what you mostly require. Although ideas can come from anywhere like if you are sitting on the toilet doing your business or just while your driving..but make sure your workstation feels like a home to your mind because that is the place where probably most of the ideas will take its tangible form.

Keep a record: Finally, you can always try keeping a habit of recording pretty much all of those thoughts that come to your head…let them be on a piece of paper or a sketchbook that you can keep around you. By doing so, I can surely claim that you will end up with quite bit of a vocabulary full of ideas of your own and maybe a guide that can help you out with those unfortunate times when you go through a creative block. Hence you will be able to continue creating fresh and original ideas.

On the end note…remember to work with a fresh mind and never try force feeding a design, It doesn’t deserve that. Instead let the inspiration come to you and when it doesn’t…..wait….after all we’re only human. :)

Good Luck!