SlideShare a Scribd company logo
client relationship management ipad application
client relationship management ipad application
presented by
brent spore & Sunny Thaper
mood board | july 2011
client relationship management ipad application
logotype
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
3
The 360 VANTAGE®
logotype is to be used as a guideline for the typography, style and theme of
the whole application. Even though the logo will most likely not be located in a very prominent or
highly visible portion of the pages, it will still need to be complimented. Our goal is to start with the
logotype and build out the mood from there.
logotype
client relationship management ipad application
color palette
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
5
Vantage red
Vantage gold
medium grey
light grey
dark grey
vantage blue
color palette
Beyond black and white, we wanted to be sure to have a rich greyscale palette to choose from.
The three shades of grey displayed here have just a slight color offset to give them a slight color
tint. The three colors (blue, red & gold) will be used for accent and important information. We
intend on using the blue and red more then the gold but thought a third (gold) color would be
needed for certain elements of the UI.
client relationship management ipad application
logo usage
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
7logo usage
Usage of the 360 VANTAGE®
logo on different background colors will be as shown above. Darker
hues will get a reversed (or white) logo treatment and lighter hues will get a solid black or dark
logo shade. This will ensure optimum readability of your logotype.
client relationship management ipad application
typography
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
9
Futura Std medium & heavy
AaBbCc01234
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
0123456789!@$%&().,"
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
0123456789!@$%&().,”
Mauris nisl urna, fringilla at aliquam eu, feugiat a
turpis. Nam nunc ante, dignissim ac volutpat eget,
congue eget lorem. Nullam quis turpis dolor. Proin
quis augue nisl. Nam ultrices suscipit elit, at sodales
arcu semper eget. Curabitur viverra tortor ut dui
viverra eu egestas dolor feugiat.
Headline Copy Here
typography
Futura is not only a great choice for your logotype but a great choice for the iPad. It’s clarity and
readability are very high. We are suggesting the use of a non-standard version of Futura for your
application, Futura STD Medium & Heavy. This is not only because of their crisp, clean look but
also as a compliment of your logotype.
primary font family example usage
client relationship management ipad application
visual styles
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
11visual style: general
A dark background tiled pattern gives
focus to the front “floated” action elements.
We think this will not only hold true to the
iDevice apps out there but also give your
application a lot more focus on the desired
elements your user is trying to interact with.
Use of icons should be subtle yet
explanitory of their function. We would like
to use icons in several places throughout
the application but will be cautious as to
not overuse them or under-define them.
Another example of a dark background
with some good usage of iconic elements
for sub navigation. The use of color in
the floated window is also a great way
to draw further attention to the details in
your application that you want your user
to notice.
This section titling was especially inspiring
as was the typographic layout. We were
inspired by some of this for possibly
the contact or report screens of your
application.
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
12visual style: iconography
Using subtle colors (if any) in the icons
will keep the application clean and easy
to navigate
Using small icons in buttons and clickable
destination areas.
Another example of simple icons for easy
navigation.
Identifying sections of the application with
simple icons.
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
13visual style: Layout & texture
Use of simple shading and easy to read
typography will keep the application very
clean and user friendly.
Popup overlays are a good way to display
quick results and get feedback without
having to loose your user’s place on the
screen.
Use of subtle texture and color saturation
will give the app a classy and real-world
feel.
Good imagery and overlay graphics and
type came to us as a good inspiration for
parts of the presentations.
client relationship management ipad application
application inspiration
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
15applcation inspiration
TWITTER
A clean, non-obtrusive menu system allows you to quickly access different
portions of the application. Contextual menus that don’t need to take
up the full screen provide additional detail without having the user lose
their way.
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
16applcation inspiration
NPR
A clean pop-over dialog can effectively eliminate the need for clunky
screens and can aid the visitor in terms of accessing specific functionality
as quickly as possible.
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
17applcation inspiration
REEDER
A clean, typographical approach to the UI can eliminate the need for
fancy graphics in an application without sacrificing aesthetics.
PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD
18applcation inspiration
kayak
Pop-up/over windows can help a visitor arrive at certain functionality
without having to sacrifice screen space or confuse the visitor by taking
them to a different part of the application.
client relationship management ipad application

More Related Content

Viewers also liked

Offshoring graphic design services
Offshoring graphic design servicesOffshoring graphic design services
Offshoring graphic design services
EDataMine Services
 
Calculo diferencial e integral de una variable
Calculo diferencial e integral de una variableCalculo diferencial e integral de una variable
Calculo diferencial e integral de una variable
Julian Medina
 
How to write a killer resume
How to write a killer resumeHow to write a killer resume
How to write a killer resume
nipissingu
 
Outsource you data processing services
Outsource you data processing servicesOutsource you data processing services
Outsource you data processing services
EDataMine Services
 
Interviewing 101
Interviewing 101Interviewing 101
Interviewing 101nipissingu
 
Online Offline Data Entry e data-mine
Online Offline Data Entry  e data-mineOnline Offline Data Entry  e data-mine
Online Offline Data Entry e data-mineEDataMine Services
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
Naoyuki Matsumoto
 

Viewers also liked (8)

Offshoring graphic design services
Offshoring graphic design servicesOffshoring graphic design services
Offshoring graphic design services
 
Calculo diferencial e integral de una variable
Calculo diferencial e integral de una variableCalculo diferencial e integral de una variable
Calculo diferencial e integral de una variable
 
How to write a killer resume
How to write a killer resumeHow to write a killer resume
How to write a killer resume
 
Outsource you data processing services
Outsource you data processing servicesOutsource you data processing services
Outsource you data processing services
 
aifd_wireframes
aifd_wireframesaifd_wireframes
aifd_wireframes
 
Interviewing 101
Interviewing 101Interviewing 101
Interviewing 101
 
Online Offline Data Entry e data-mine
Online Offline Data Entry  e data-mineOnline Offline Data Entry  e data-mine
Online Offline Data Entry e data-mine
 
UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価UXデザイン×ヒューリスティック評価
UXデザイン×ヒューリスティック評価
 

Similar to 360CRM_Moodboard

Designing apps for Android
Designing apps for AndroidDesigning apps for Android
Designing apps for Android
Lorica Claesson
 
Circles - Brandbook
Circles - BrandbookCircles - Brandbook
Circles - Brandbook
Martin Köppelmann
 
anyclip_brand_guide
anyclip_brand_guideanyclip_brand_guide
anyclip_brand_guideDaryl McNutt
 
Hunter & Bard Design Book 2017
Hunter & Bard Design Book 2017Hunter & Bard Design Book 2017
Hunter & Bard Design Book 2017
Hunter & Bard
 
DFS 2015 catalog
DFS 2015 catalogDFS 2015 catalog
DFS 2015 catalog
Rodolfo Galvez
 
329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf
329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf
329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf
HaTrangDO2
 
Im design and brand guidelines
Im design and brand guidelinesIm design and brand guidelines
Im design and brand guidelines
Rahul Rathi
 
D tstyleguide mpc
D tstyleguide mpcD tstyleguide mpc
D tstyleguide mpcELF MACHINE
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics
katy walker
 
Explainer Videos, Animation & Illustration - 7 Frames Studio
Explainer Videos, Animation & Illustration - 7 Frames StudioExplainer Videos, Animation & Illustration - 7 Frames Studio
Explainer Videos, Animation & Illustration - 7 Frames Studio
SumitSatardekar1
 
Ninjabit ppt
Ninjabit pptNinjabit ppt
Ninjabit ppt
Chiara Colangelo
 
Designing iOS apps that rock!
Designing iOS apps that rock!Designing iOS apps that rock!
Designing iOS apps that rock!
Joey Rigor
 
Building to $100 m with Duo Security
Building to $100 m with Duo SecurityBuilding to $100 m with Duo Security
Building to $100 m with Duo Security
saastr
 
Vodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic EvaluationVodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic Evaluation
James Griffin
 
Demystifying progressive web apps
Demystifying progressive web appsDemystifying progressive web apps
Demystifying progressive web apps
Marcus Hellberg
 
2016 Death of the Home Screen
2016 Death of the Home Screen2016 Death of the Home Screen
2016 Death of the Home Screen
Alexander Meinhardt
 
I os11
I os11I os11
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
Halil Eren Çelik
 

Similar to 360CRM_Moodboard (20)

Designing apps for Android
Designing apps for AndroidDesigning apps for Android
Designing apps for Android
 
Circles - Brandbook
Circles - BrandbookCircles - Brandbook
Circles - Brandbook
 
anyclip_brand_guide
anyclip_brand_guideanyclip_brand_guide
anyclip_brand_guide
 
Hunter & Bard Design Book 2017
Hunter & Bard Design Book 2017Hunter & Bard Design Book 2017
Hunter & Bard Design Book 2017
 
DFS 2015 catalog
DFS 2015 catalogDFS 2015 catalog
DFS 2015 catalog
 
329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf
329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf
329828030-Microsoft-Brand-Guidelines-Oct2014-pdf.pdf
 
Im design and brand guidelines
Im design and brand guidelinesIm design and brand guidelines
Im design and brand guidelines
 
D tstyleguide mpc
D tstyleguide mpcD tstyleguide mpc
D tstyleguide mpc
 
Your Logo & You
Your Logo & YouYour Logo & You
Your Logo & You
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics
 
Explainer Videos, Animation & Illustration - 7 Frames Studio
Explainer Videos, Animation & Illustration - 7 Frames StudioExplainer Videos, Animation & Illustration - 7 Frames Studio
Explainer Videos, Animation & Illustration - 7 Frames Studio
 
Ninjabit ppt
Ninjabit pptNinjabit ppt
Ninjabit ppt
 
Designing iOS apps that rock!
Designing iOS apps that rock!Designing iOS apps that rock!
Designing iOS apps that rock!
 
Building to $100 m with Duo Security
Building to $100 m with Duo SecurityBuilding to $100 m with Duo Security
Building to $100 m with Duo Security
 
Vodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic EvaluationVodafone 360-Open Heuristic Evaluation
Vodafone 360-Open Heuristic Evaluation
 
Demystifying progressive web apps
Demystifying progressive web appsDemystifying progressive web apps
Demystifying progressive web apps
 
2016 Death of the Home Screen
2016 Death of the Home Screen2016 Death of the Home Screen
2016 Death of the Home Screen
 
TE-Brand_Guide
TE-Brand_GuideTE-Brand_Guide
TE-Brand_Guide
 
I os11
I os11I os11
I os11
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
 

360CRM_Moodboard

  • 1. client relationship management ipad application client relationship management ipad application presented by brent spore & Sunny Thaper mood board | july 2011
  • 2. client relationship management ipad application logotype
  • 3. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 3 The 360 VANTAGE® logotype is to be used as a guideline for the typography, style and theme of the whole application. Even though the logo will most likely not be located in a very prominent or highly visible portion of the pages, it will still need to be complimented. Our goal is to start with the logotype and build out the mood from there. logotype
  • 4. client relationship management ipad application color palette
  • 5. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 5 Vantage red Vantage gold medium grey light grey dark grey vantage blue color palette Beyond black and white, we wanted to be sure to have a rich greyscale palette to choose from. The three shades of grey displayed here have just a slight color offset to give them a slight color tint. The three colors (blue, red & gold) will be used for accent and important information. We intend on using the blue and red more then the gold but thought a third (gold) color would be needed for certain elements of the UI.
  • 6. client relationship management ipad application logo usage
  • 7. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 7logo usage Usage of the 360 VANTAGE® logo on different background colors will be as shown above. Darker hues will get a reversed (or white) logo treatment and lighter hues will get a solid black or dark logo shade. This will ensure optimum readability of your logotype.
  • 8. client relationship management ipad application typography
  • 9. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 9 Futura Std medium & heavy AaBbCc01234 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYZ 0123456789!@$%&().," abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWYZ 0123456789!@$%&().,” Mauris nisl urna, fringilla at aliquam eu, feugiat a turpis. Nam nunc ante, dignissim ac volutpat eget, congue eget lorem. Nullam quis turpis dolor. Proin quis augue nisl. Nam ultrices suscipit elit, at sodales arcu semper eget. Curabitur viverra tortor ut dui viverra eu egestas dolor feugiat. Headline Copy Here typography Futura is not only a great choice for your logotype but a great choice for the iPad. It’s clarity and readability are very high. We are suggesting the use of a non-standard version of Futura for your application, Futura STD Medium & Heavy. This is not only because of their crisp, clean look but also as a compliment of your logotype. primary font family example usage
  • 10. client relationship management ipad application visual styles
  • 11. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 11visual style: general A dark background tiled pattern gives focus to the front “floated” action elements. We think this will not only hold true to the iDevice apps out there but also give your application a lot more focus on the desired elements your user is trying to interact with. Use of icons should be subtle yet explanitory of their function. We would like to use icons in several places throughout the application but will be cautious as to not overuse them or under-define them. Another example of a dark background with some good usage of iconic elements for sub navigation. The use of color in the floated window is also a great way to draw further attention to the details in your application that you want your user to notice. This section titling was especially inspiring as was the typographic layout. We were inspired by some of this for possibly the contact or report screens of your application.
  • 12. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 12visual style: iconography Using subtle colors (if any) in the icons will keep the application clean and easy to navigate Using small icons in buttons and clickable destination areas. Another example of simple icons for easy navigation. Identifying sections of the application with simple icons.
  • 13. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 13visual style: Layout & texture Use of simple shading and easy to read typography will keep the application very clean and user friendly. Popup overlays are a good way to display quick results and get feedback without having to loose your user’s place on the screen. Use of subtle texture and color saturation will give the app a classy and real-world feel. Good imagery and overlay graphics and type came to us as a good inspiration for parts of the presentations.
  • 14. client relationship management ipad application application inspiration
  • 15. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 15applcation inspiration TWITTER A clean, non-obtrusive menu system allows you to quickly access different portions of the application. Contextual menus that don’t need to take up the full screen provide additional detail without having the user lose their way.
  • 16. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 16applcation inspiration NPR A clean pop-over dialog can effectively eliminate the need for clunky screens and can aid the visitor in terms of accessing specific functionality as quickly as possible.
  • 17. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 17applcation inspiration REEDER A clean, typographical approach to the UI can eliminate the need for fancy graphics in an application without sacrificing aesthetics.
  • 18. PRESENTED BY BRENT SPORE AND SUNNY THAPER360 VANTAGE CRM MOOD BOARD 18applcation inspiration kayak Pop-up/over windows can help a visitor arrive at certain functionality without having to sacrifice screen space or confuse the visitor by taking them to a different part of the application.
  • 19. client relationship management ipad application