1
the process.
3
PAGE OF CONTENTS
Who They Are
04
What They Want
06
Whom This Is For
10
brand study
briefing and re briefing
the audience
What Has Been Done case studies
What I Learnt
12
16
the grid system responsive design a few more things conventions & trends
What I Did With What I Learnt
28
wireframing typography visual language the small things screenshots
Conclusion
52
WHO THEY ARE // company profile
5
What do you do? We started off as an online marketing firm but soon expanded into mobile applications and website development. We do not promote our online marketing department - we only have 3-4 clients for SEO (search Engine Optimization) We only want to focus on Mobile applications (iOS and Android) & Website Development.
Define your company in two lines. We are a bunch of professionals who believe in delivering. We provide excellent customer service and personally work with each client in order to make sure that he is happy with our work.
Why did you start this company? I used to work for a firm Delhi based Web Solution firm. I worked there for 8 months and realized that there was massive chaos in the company. Business Developers were quoting random amount to the prospects, the delivery manager was almost always clueless about the project status and the quality of their work was just average. I knew I could do a lot better job than them and believed I could run a better company. When I started the firm I knew that I decided on two grounding premises by which I’d run it: - Deliver what I promise - Provide great customer support // I personally handle client relationships and I’m available to take the calls pretty much 24/7.
WHAT THEY WANT // the project brief
1.
a new professional tone of voice and image to better match their work ethics and business culture. 2. a virtual existence or a space on the world wide web to define who they are and help promote their company.
7
the strapline: leave IT to the geeks_ The thing that clicked for me was their strapline. I took it up from there. The intended verbal tone was great but only far disconnected from their visual one. That was the gap I was to bridge. So I tried to visualize everything around this sentence - From copyrighting their company profile, to choosing the visual library of colors and type. The keywords I pinned down on are as follows: friendly, conversational, professional, funny, eager and persistent.
when people use words like “clean”, “sophisticated” and “uncluttered” when they try to describe design they like, what they really mean is that they like brands that have focus. That have a clear message. That know themselves and their priorities. Design can express that, but design can’t decide what the company is and what it stands for. That’s our job. You can’t do a rebrand unless you understand the company. And often the research process forces you to understand the company better. On the left is a collection of references the owner sent me. Things they look upto, companies they wish they could be. and so on. This was helpful to streamline my research.
//their current identity. keywords - very 90’s. very dorky. Therefore the metamorphisis that I chose to identify was dorky ----> nerdy; ridding them of everything gradient, beveled and unoriginal.
how i see them
// one of the moodboards I designed as a visual process of redefining the brief to myself
9
friendly
conversational NERDY PROFESSIONAL
funny
eager quirky techie
WHOM THIS IS FOR // audience study
I think it’s essential to look into the people your clients cater to and the deliverables of the company. Helps you understand the company a little better. Below is a list of a few of their clients so far. And alongside is a screenshot from their portfolio - two of the mobile applications that they’ve designed and developed. Broadly, they cover businesses that need a digital intervention and anybody with an idea for an app.
11
innovators & techies
early adopters
early majority
late majority
laggards
area under curve represents number of customers
technology adaptation life cycle
// The technology adoption lifecycle model describes the adoption or acceptance of a new product or innovation, according to the demographic and psychological characteristics of defined adopter groups. The process of adoption over time is typically illustrated as a classical normal distribution or "bell curve." The model indicates that the first group of people to use a new product is called "innovators," followed by "early adopters." Next come the early and late majority, and the last group to eventually adopt a product are called "laggards."
1
The Partners, UK
// Case Studies
What Has Been Done
minimal/ responsive
is a constant visual language. clean/
translucent boxes on image for text
Treatments and technique -grey
highlights. dull page transitions.
Interaction - simple mouseover
bottom of page also.
one project to another. Sitemap at
Browsing - arrows guide you from
or cross guides you everywhere.
center/ hidden. A simple plus arrow
Navigation - easy to locate/ top
followed by 4x4 grid for portfolio.
background in fading transition;
Layout - high resolution image
2
applove.se
contemporary and responsive.
design principles and palette/
Treatments and technique - flat
interest.
techniques adds an element of
Interaction - subtle mouse over
minimum to the point information.
Browsing - child safe easy with
navigation.
bar / also known as breadcrumbs
Navigation - static navigation
single page / vertical website.
Layout - 1200px grid / fixed header/
13
3
Etch Apps
/ responsive
palette / clean/ unusual square aesthetic
Treatments and technique -accented
card on top right and again at bottom.
Interaction - hover highlights / contact
projects or members thumbnails on top.
new pages with easy return / other
team or projects furthur digs you into
for every navigation action / details for
Browsing - same page re arranges tiles
apppearing on hover
explanatory icons on top left with text
Navigation - collapsable navigation/ self
/ content driven.
squares of varying widths / photo heavy
Layout - 1200px grid divided into
4
Pentagram
small screen size.
dominant / not responsive but warns of
white with red accent for links / work
Treatments and technique - clean /
highlights.
Interaction - subtle mouse over
from one poject to another.
to occupy new text. difficult to navigate
Browsing - same page parts and extends
user can change sorting / portfolio driven
Navigation - dropdown menu on top /
spread / 1200px grid
Layout - horizontal scroll / full page
15
WHAT I LEARNT // the new pixel world
That smooth, clean web experience actually results from a whole set of decisions—some small, some large—about how the site looks, how it behaves, and what it allows you to do. These decisions build upon each other, informing and influencing all aspects of the user experience. If we peel away the layers of that experience, we can begin to understand how those decisions are made. A couple of articles on smashing magazine, a book by Steve Krug and some blog posts by Information Architects and treehouse, got me started onto this path of pixels. // to note - As for publications of any kind, consistency is one of the most powerful usability principles. when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience. It’s important that the interface does not make the user feel silly at any point. This applies better for websites with more functionality, like e-commerce or booking websites, but it’s worth remembering that in the world of the wide web, competition is only a click away - make the user’s experience worthwhile, or he’ll just click off.
17
THE GRID SYSTEM
Your choice of grid depends on your vision of the website layout. But the essence of grid design is that the grid columns are all the same width, and that you then superimpose page layout columns as multiples of the grid columns. The principle is then to minimize the number of grid columns. If you have a two column page layout with a first column larger than the second column in the ratio of say, 4 to 3, then a 12 column grid is used, with the first layout column spaning 4 grid columns and the second layout column spanning 3 grid columns. Then, when setting out elements within the layout columns, if you align them to the grid columns it creates an appealing aesthetic. Aesthetic is subjective, and therefore it is ultimately your decision as to what dimensions you choose for your grid columns.
Resources - thegridsystem.org, goldengridsystem.com, grids.heroku.com above is a screenshot from my workspace on photoshop. Typically easily divisible numbers are used for number of columns, the most common being 12, because it is divisible by 2, 3, 4 and 6. I used a 12 column grid with column width 70 px and gutter margin of 30 px.
19 Why I chose a 1200 px grid? All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In January 2010, 76% of the computers where using a resolution higher than 1024 x 768 px. 1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with.
// what happened to 960 px? Computer screens are getting bigger, so where does that leave your 960px responsive layout? Floating adrift in the middle of an ocean.
21
// Ethan Marcotte is a web designer & developer who cares deeply about beautiful design, elegant code, and the intersection of the two.
RESPONSIVITY (RWD)
23
Your website looks great of the desktop screen but the same may not be true when your site is viewed on a smartphone, a tablet or an e-reader. Once you make the design responsive, the website adapts on all screens. Responsive Design is pure HTML and CSS. You create simple rules in the Cascading Style Sheets (CSS) that change style based on the screen-size of the user’s device.
For example, you can write a rule that says if a user’s screen-size is less than 320 pixels, don’t show the sidebar or if the screen size is greater than 1920 pixels (widescreen desktop), increase the font size of the body text to 15px. Here are the same rules translated to code: @media screen and (max-width:320px) { .sidebar { display: none } } @media screen and (min-width:1920px) { body { font-size: 15px } }
This is called a media query. Media Queries are a CSS3 module allowing content rendering to adapt to different logical combinations. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. A responsive design is composed of three distinct parts: •
A flexible grid.
•
Flexible images.
•
Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and that spot-fix bugs that occur at different resolution ranges.
some more jargon I learnt along the way: front end - the client end of the project that deals with the user interface design and style sheets rather than coding and technology (back end) boilerplates - standardized pieces of text for use as clauses in contracts or as part of a computer program. // By 2015 Almost Half Of All Web Traffic Is Expected To Be Mobile
A few more things Like all other field of design, UI works on some basic principles like consistency, redundancy-multiple cues, forgiveness (which i found particularly interesting talks about how regardless of how well an interface is designed, users are going to make mistakes.The best interfaces will help users avoid even making these mistakes), feedback, simplicity, interactivity and directionality.
User Interface design is the way the User Experience is implemented, the two go hand in glove.
Breadcrumb Navigation Or Breadcrumb Trail Takes Its Name From The Hansel And Gretel Fairy Tale - a navigation aid used in user interfaces. It gives users a way to keep track of their locations.
25
single page website? (also known as) inifinite pages (like infinite scrolling) vs multiple pages Structure and flow of information. With a bit of planning, you can use the single page design to your advantage by structuring the content in a way that takes the user journey and creates a story for them to follow. With multi-page sites, your users choose their own path, which can potentially lead to important information being missed or users getting distracted or lost. Just the good stuff. A single page doesn’t inevitably mean that there is less room for content. By using this knd of design, it forces you to get rid of the waffle and include only the stuff that really needs to be there. This means the users will ultimately have a better experience since they won’t have to dig thought less important things to get to what they really want to know. scrolling > clicking. It has been observed that people would rather scroll endlessly than have to click and wait for a page to load. It has to do with less effort, and follows the ‘don’t make me think’ principles.’ however, a couple disadvantages of a single page design include1. SEO. Multipage sites allow targeting of words around specific topics on separate pages, so these sites tend o be more optimised to search engines and there’s more chance your site will appear higher up in rankings. 2. single page design only really works for linear flow of data. or asingle callto-action. //which was the case for me; there wasn’t too much to beat around the bush about, therefore I made the conscious decision to precipitate the data to a single 7 part scroll page. One must take into account accessibility when designing infinite pages; telling users where they stand by showing the length of the page and how much they’ve viewed. Solutions could include a fixed menu, a map of the page or a scroll progress bar. Another trick is the parallax effect, whereby different layers on the page move at different speeds according to the user’s scrolling, creating the illusion of depth. While it can help to create beautiful and innovative experiences, it is sometimes heavily overused, and users can get confused by how much they need to scroll for more content. It’s wise to use the technique to enhance content, not as the content itself. //reference - smashing magazine article infinite scrolling, get to the bottom of it.
Make Me Think”, designers feel they
devices and application type is important. Considering they are a in the business of creating relevant mobile applications, I don’t see why I shouldn’t apply the basic
you’re doing. Keep your users happy and they’ll keep coming back. Now that’s a convention worth sticking to.
useful because they provide a
clear explanation without words.
the user’s experience.
principles of flat design that would enhance
users’ sensibilities and my target platform,
making sure it aligns with my target
conventions’.” However, breaking
clickable and what isn’t.
innovative, unless you really know what
sense. Before diving into a flat design,
based on criteria like ‘best use of
to know instinctively what’s
conventions is not an effective way to be
ensure that your chosen style makes
and high-profile job offers are rarely
Icon conventions are particularly
As with any project, the first step is to
original: “Praise from peers, awards,
nature for web users. Users want
Do i need to follow the flat design trend?
// So, how did the collective consciousness jump from a love of all things textured, beveled and dropshadowed to a desire for flat colors and simple typography? The factors that fueled this transition include information overload, technology, a return to focus on content and responsive design among others.
Clicking links has become second
have been hired to produce something
As Steve Krug points out in “Don’t
your site.
most of their time on other websites” This means that they form their expectations for your site based on what’s done on other sites. If you deviate, your site will be harder to use and users will leave.
// Jakob’s Law of the Web User Experience states that “users spend
appear in a bar across the top of
The Main Navigation should
upper left of the page.
Logos are typically placed on the
CONVENTIONS & TRENDS
27
with what I learnt
WHAT I DID
language I am to establish.
made up of images and text. The visual
On the surface you see a series of Web pages,
The Surface Plane
and blocks of text.
the placement of buttons, controls, photos,
Beneath that surface is the skeleton of the site:
The Skeleton Plane
navigational elements. The sitemap.
The skeleton might define the arrangement of
The Structure Plane
The Plan of Action
29
WIREFRAMES
//Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later. Using wireframes is a great way to begin a web site project, as it allows you and your client to focus on layout without the distraction of color, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs.
31
logo
header
search
main navigation bar
about us
services
events
event banner
featured posts
popular latest comments tags tabbed panel
subscribe to newsletter post
post
social media buttons
likes and links
33
If you continually observe what other designers or sites are doing for their wireframes, you will slowly get a picture in your mind of how a wireframe helps to organize information for the screen. To the right is a typical blog wireframe. A template wireframe tried and tested, and conventionally what a user expects of it. So that’s how I began to understand wireframes by studying a few sample wireframes of existing websites, and blogs that I liked - breaking them down to the grid, skinning them of their visual add-ons and looking at what I wanted and did not want. To know what I wanted and did not want, I needed to prioritize the heirarchy of information. This was the logical part of the design I had to fight through before I could allow my creative sensibilities to take over. Here, there were a couple of decisions I had to make. Decisions that would guide the elements. 1. Considering their work profile was not was as avid as they’d like it to grow into, I decided that typography must take centre stage and be of more importance than the images. 2. I was quite convinced and fixed with two things - the static navigation bar and the centrally aligned 3-part division of the 12 column grid for structure of the website. I was trying to make everything else fall into place accordingly.
35
//rough low fidelity wireframes.
1
static navigation bar logo
tagline
introduction
f
feature 1
feature 2
t
p
feature 3
2 logo
navigation
introduction
feature 1
feature 2
feature 3
The reason I picked this template was simple. I wanted the elements to be minimum and easily scalable. I had thouroughly edited the content and I wanted the final output to reflect the concision and be as trimmed as possible.
37
TYPOGRAPHY
Oliver Reichenstein, a very profound and important figure in web design, wrote an article in 2006 that stated the web is 95% typography. It was a revolutionary article at the time because a few years ago the web had few options for typography and it was an image-dominated world. The larger the screen, the greater the optimum comfortable viewing distance. So it would seem sensible to alter font-size in relation to the distance from which it’s being read. ems are our friend here. By setting your type, line-height, indeed the whole baseline grid using relative units of measurement (ems or rems) it’s very easy to scale the whole thing up. // When it comes to flat content-driven websites, typography is the hero. While serifs are certainly an option, san serifs almost always feel cleaner.
12-point (16 pixel) text size (like this one) although appears large in print - is considered optimum for screen. It is equivalent to 9-10 point for print in a book or magazine; This is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screen - when sitting comfortably, we are about 20 inches from our computer screens. (28 inches being the recommended distance) This is much further than the distance at which we read printed text .
//shortlisted options
HEADING GLEGOO small heading glegoo body text roboto regular. Sed in est non sem dictum ultrices eget ac magna. Mauris tincidunt congue sapien, vitae vestibulum tellus mattis pretium. Proin in quam et mi hendrerit pharetra. In laoreet facilisis nunc non tempor. Suspendisse vehicula et urna quis sodales. Proin a elit sed magna tincidunt tincidunt non ac justo. Proin in quam et mi hendrerit pharetra. In laoreet facilisis nunc non tempor. Suspendisse vehicula et urna quis sodales.
HEADING NOTICIA BOLD
SMALL HEADING NOTICIA REGULAR body text inconsolata regular. A well designed mono spaced font that would give a techie look to the body text. Soin in quam et mi hendrerit pharetra. In laoreet facilisis nunc non tempor. Suspendisse vehicula et urna quis sodales. Proin a elit sed magna tincidunt tincidunt non ac justo. Etiam vel lobortis mi. Fusce semper dolor urna, quis suscipit elit pharetra id. Ut faucibus ultricies nunc nec luctus. Donec ullamcorper ultrices aliquet. Sed aliquet nisl elit, vel eleifend ante accumsan.
HEADING UBUNTU TITLING BOLD SMALL HEADING UBUNTU TITLING BOLD body text maven pro regular. Proin a elit sed magna tincidunt tincidunt non ac justo. Etiam vel lobortis mi. Fusce semper dolor urna, quis suscipit elit pharetra id. Ut faucibus ultricies nunc nec luctus. Donec ullamcorper ultrices aliquet. Sed aliquet nisl elit, vel eleifend ante accumsan. Soin in quam et mi hendrerit pharetra. In laoreet facilisis nunc non tempor. Suspendisse vehicula et urna quis sodales. Proin a elit sed magna tincidunt tincidunt non ac justo. Etiam vel lobortis mi. Fusce semper dolor urna, quis suscipit elit pharetra id. Ut faucibus ultricies nunc nec luctus. Donec ullamcorper ultrices aliquet. Sed aliquet nisl elit, vel eleifend ante accumsan.
39
HEADING TEXT SMALL HEADING heading text titilium text bold small heading titilium text medium tracking = 26 for 20pt text. something close to klavika. keyword - approachable techie. body text merriweather sans regular and italic. italic typeface for most of the body text because it had a conversational feel to it. Regular font for the more serious informational text. Another imporant thing I learnt at this point was Rendering -The quality of font rendering in browsers is based on two key factors: the font’s construction and how each browser/OS combo handles rendering. Variation in rendering is to be expected. I checked web fonts gallery to view existing websites that used merriweather to cross check before using the font.
VISUAL LANGUAGE
41
+
why I started with greenish blue techie
friendly
then I made this 8bit geek that added color to my palette
THE SMALL THINGS //language of icons
THE PIXEL TOUCH I was keen on continuing the 8 bit language through the website. Not very loudly throughout, but through significant small things.
// screenshot of the top right logo button that links you back to the home location. A bookmark easily spotable, bright - just with a flavor of pixels.
SCALABILITY IS IMPORTANT for instance this pixel persona that could be rexognizable in a really small size just as well to represent the team of geeks in the navigation bar.
43
blog // continuous
portfolio/ work //
The plus sign // for tilted to make
writing metaphor
organized, medium &
furthur details.
tool of creativity.
a cross // for closing certain section.
contact //
services // working
gallery // an
a bulb // to represent
an envelope
tools to convey
alternative to
an idea.
recognized as an
services they
display porfolio.
icon for mail
provide
// social media icons/ like button. interactive. I also made a trip to Pune in the mean while to meet my clients-cum-coders. Three days - to share my ideas in person and to know the scope of code. I basically wanted to be aware of which of my inputs were implementable and what was I missing. I had firgured out a few basics of CSS already (because of my blog; the templates of which I always give me reasons to interfere) but creating style sheets from scratch wasn’t my cup of tea. Besides, coding is a field where one has to keep up with updated boilerplates and so on, constantly brushing your skills. It’s best left to a third party.
//set 1
SCREENSHOTS
45
the book mark stays static so user can find way back to top at any point.
text appears on mouseover of respective icon
47
and responsive.
principles and palette/ contemporary
Treatments and technique - flat design
mouseover reveals navigation text.
side, thereby involving you at the start.
Interaction - asks for input from user’s
minimum to the point information.
Browsing - child like easy with
breadcrumb navigation.
/ keeps track of your location -
Navigation - static navigation bar
header/ single page / vertical website.
Layout - 1200px 12 column grid / fixed
satisfaction.
option, even if only for my own creative
a more out-of-the-box, eccentric
but in the meantime I needed to have
one that we could see up and running,
this was a safe and efficient option,
exploration. Rupesh pointed out how
another direction of thought and
with my guide, I was keen on having
The client was thrilled but after a talk
After thoughts
49
//set 2
SCREENSHOTS
wireframing.
added things and tags. with no prior
raher than a logical design one. I
was more of an artistic solution
use wireframing in this case, as it
used a similar pallette. I couldn’t
indoor-room-like contours, but
your screen. I began sketching out
located inside the imaginary box of
appearing as if their office were
space in the digital realm. Kind of
of a literal virtual space. A physical
That’s when I came up with the idea
51
CONCLUSION
With website designing, I have come to believe, well begun is not quite half done. Especially because of the huge gap between designers and coders. It’s two worlds, two languages, two sets of learnings at shackle heads with each other. One trying hard to understand the other but with much difficulty and often in vain. Should designers code? should coders design? After all the points of views I’ve heard, I’ve come to conclude it’s a question each one’s got to ask themselves. Surely the two require seperate hemispheres of our brain, but it definetly would save ample amounts of time and prototyping and backand-forthing for everybody if all designers could code and all coders could design. But this isn’t utopia, and the problem is that both of these disciplines require a lot of time and effort individually. This was my first hands on project with web designing, except for one that I had one hand in (three of us worked on it together) and if i have to analyze the process I’d think website design is similar to publication design - in terms of conventions, coherence and consistency especially. I do think I could have taken it furthur and experimented with the endless possibilities of code but I think I was a little partial towards the visual language and brand identity side of the project. This website is no where close to complete in terms of coding (although they seem extremely hopeful and eager) but I shall continue to peruse the abundant online resources so I’m slightly more equipped the next time that I have to take on a web design project. I’d like to thank Rupesh for his feedback, suggestions and time. Thank you, Shivani Singh Graphic Design Semester 7
53
BIBLIOGRAPHY
Don’t make me think by Steve Krug The Elements of User Experience by James Garette google images https://wirify.com http://framelessgrid.com http://goldengridsystem.com http://ia.net/blog/bringing-responsiveness-the-app-world/ http://www.goodui.org https://wireframe.cc https://mybalsamiq.com http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/ http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/ http://www.beautifulinterfaces.com
camera used for all other purposes - Sony DSLR alpha 230. Typefaces used in publication: headings and contents page - Merriweather sans bold and bree serif body text - merriweather sans regular & italic
8pt with 12pt tracking