The document provides an overview of design principles including branding and identity, typography, layout, and color basics. It discusses how brands evolve over time and the key elements of branding including vision, experience, keywords, and emotional response. Typography principles covered include core web fonts, line length, and vertical rhythm. Layout concepts explained are using grids, the rule of thirds, baseline grids, and composition. The color section outlines the color wheel, tints, shades, tones, and using color moods. Throughout, examples are given and the document emphasizes balance, composition, and testing design work.
An ASTD Utah Chapter presentation about the eLearning environment including authoring tools, design principles, and creating a network. The presentation was given September 2012.
HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.
These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.
These are the UI slides
About Kathryne Sakata
====
Kat received her graphic design degree from the New Media Arts Interface Design Program at Kapiolani Community College. She is currently a Graphic Designer and Web Developer at Design Asylum, Inc. and the Lead UI Designer at Undefeated Games, Inc. Kat enjoys engaging with new people and sharing her enthusiasm for design. She is an active member of AIGA Honolulu, HI-Capacity and Alakai Young Professionals and participates in various events including Startup Weekend, HNL New Tech Meetup, and WetWare Weds.
Event info: http://www.hicapacity.org/2013/05/23/ui-ux/
Mountain Top 2017 - Wherever The River FlowsJulian Taylor
Logo and Branding for the 2017 Mountain Top entitled "Wherever The River Flows." Branding package included logo, color swatches, fonts, and style rules.
Learn to quickly build a set of icons, a logo, a newsletter banner or even a mockup for your app. We'll cover everything you need to know to build your graphical assets:
- Latest and coolest resources for the best pictures, icons, colours, fonts, and patterns.
- Demo of Sketch, a popular graphical tool used in startups, to refine your icons, change their colour and shape, export them, and customise any assets (logo, icons, newsletter banner, etc.)
- General knowledge about standard UI components and how they are built.
- Designer tricks and secrets (how to build a nice shadow? Add a filter to a cover pic? resize pictures with different proportions? Create masks? etc..).
An ASTD Utah Chapter presentation about the eLearning environment including authoring tools, design principles, and creating a network. The presentation was given September 2012.
HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.
These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.
These are the UI slides
About Kathryne Sakata
====
Kat received her graphic design degree from the New Media Arts Interface Design Program at Kapiolani Community College. She is currently a Graphic Designer and Web Developer at Design Asylum, Inc. and the Lead UI Designer at Undefeated Games, Inc. Kat enjoys engaging with new people and sharing her enthusiasm for design. She is an active member of AIGA Honolulu, HI-Capacity and Alakai Young Professionals and participates in various events including Startup Weekend, HNL New Tech Meetup, and WetWare Weds.
Event info: http://www.hicapacity.org/2013/05/23/ui-ux/
Mountain Top 2017 - Wherever The River FlowsJulian Taylor
Logo and Branding for the 2017 Mountain Top entitled "Wherever The River Flows." Branding package included logo, color swatches, fonts, and style rules.
Learn to quickly build a set of icons, a logo, a newsletter banner or even a mockup for your app. We'll cover everything you need to know to build your graphical assets:
- Latest and coolest resources for the best pictures, icons, colours, fonts, and patterns.
- Demo of Sketch, a popular graphical tool used in startups, to refine your icons, change their colour and shape, export them, and customise any assets (logo, icons, newsletter banner, etc.)
- General knowledge about standard UI components and how they are built.
- Designer tricks and secrets (how to build a nice shadow? Add a filter to a cover pic? resize pictures with different proportions? Create masks? etc..).
Connect Conference 2022: Passive House - Economic and Environmental Solution...TE Studio
Passive House: The Economic and Environmental Solution for Sustainable Real Estate. Lecture by Tim Eian of TE Studio Passive House Design in November 2022 in Minneapolis.
- The Built Environment
- Let's imagine the perfect building
- The Passive House standard
- Why Passive House targets
- Clean Energy Plans?!
- How does Passive House compare and fit in?
- The business case for Passive House real estate
- Tools to quantify the value of Passive House
- What can I do?
- Resources
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Visual Style and Aesthetics: Basics of Visual Design
Visual Design for Enterprise Applications
Range of Visual Styles.
Mobile Interfaces:
Challenges and Opportunities of Mobile Design
Approach to Mobile Design
Patterns
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
2. A kid on a plane
(A bit about me)
Used to have hair
Creative Director at http://omniti.com/
Blogs at http://jontangerine.com/
Responds via @jontangerine
Likes Toblerone
3. Design is: ‣ Brand and identity
80% Science, 20% Art ‣ Typography and layout
Condensed into three sections… ‣ Colour
4. “People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’
That’s not what we think design is. It’s not just what it looks like and feels like.
Design is how it works.” .
— Steve Jobs, 2003
6. Brand evolution
International Time Recording Co. (1889) and the Computing Scale Co. (1891) became the
Computing-Tabulating-Recording Co. in 1914 and then International Business Machines in 1924.
7. …and fina&y…
International Business Machines as an acronym emerged in 1947, changed again in 1956.
It evolved into the current IBM logotype in 1972.
17. The Raster Wars
Different operating systems.
Different browsers.
Different result.
Affe)s:
Measure (line length) which can cause
extra lines to be created as text wraps.
Test, test, test again.
http://tr.im/rasterwars
18. Core web fonts
‣ Andale Mono by Steve Matteson
‣ Arial by Robin Nicholas and Patricia Saunders
‣ Arial Black by Robin Nicholas and Patricia Saunders
‣ Comic Sans MS by Vincent Connare
‣ Courier New by Adrian Frutiger and Howard Kettler
‣ Georgia by Matthew Carter
‣ Impact by Geoffrey Lee
‣ Times New Roman by Stanley Morison with Starling Burgess and Victor
Lardent
‣ Trebuchet MS by Vincent Connare
‣ Verdana by Matthew Carter
http://tr.im/testwebfonts
20. One grid to rule
them a&
Wem Crouwel’s 1968 Vormgevers poster
for the Stedelik Museum, Amsterdam.
Wem Crouwel used this grid for every
piece of work he did.
21. “I did it my way!”
Grids for the Web.
(Props to Sinatra for the tangerine skin.)
22. Exact golden ratio. Round up values. Add gutters and margins. Adjust to suit.
23. Rule of thirds (my version). Round up if you wish. Add gutters and margins.
36. Typography & layout summary
‣ Choose type to fit the content.
‣ Set type for legibility.
‣ Stack type with CSS based on availability:
• font-family {
'<preferred font>', '<system font>', '<core web font>', <generic>;
}
‣ Test for rendering quality.
‣ Line height or ‘1 lead‘ defines the vertical rhythm.
‣ Use a grid.
‣ Try Fibonacci numbers. Compose to a scale. Aim for balance.
55. Credits & references
‣ Woman painting te wing: http://www.flickr.com/photos/library_of_congress/2178437377/
‣ ‘Your logo here’ body: http://www.flickr.com/photos/jystewart/3393580386/
‣ IBM iterations: http://www.zlok.net/blog/2009/01/13/ibm-logo-design-history/
‣ ‘Freshly made’: http://www.flickr.com/photos/lwr/327003878/
‣ Yee Haw Heidelberg Windmill Press: http://www.flickr.com/photos/tnboriqua/1176715935
‣ Sinatra: http://www.flickr.com/photos/marcelonoah/2939542950
‣ Copy used in examples from The God-Idea of the Ancients (or Sex in Religion) by Eliza Gamble:
http://www.authorama.com/god-idea-of-the-ancients-1.html
‣ Color wheels adapted from: www.tigercolor.com/color-lab/color-wheel/color-wheels.htm
‣ Auto polo: http://www.flickr.com/photos/library_of_congress/2477626151/
‣ Y-fronts worn by Vitruvian Man: model’s own.
Editor's Notes
Undergraduate design course in 40 minutes.
Mrs. Irma Lee McElroy, a former office worker, painting the American insignia on airplane wings at the naval Air Base, Corpus Christi, Texas. Her husband is a flight instructor . Dated 1942 August.
http://www.flickr.com/photos/library_of_congress/2178437377/
Steve Paul Jobs - The Guts of a New Machine (30 November 2003)
http://en.wikiquote.org/wiki/Steve_Jobs
Via Zlok branding and online strategy studio: http://www.zlok.net/blog/2009/01/13/ibm-logo-design-history/
International Time Recording Co. (1889) and the Computing Scale Co. (1891) became the
Computing-Tabulating-Recording Co. in 1914 and then International Business Machines in 1924.
International Business Machines as an acronym emerged in 1947, changed again in 1956.
It evolved into the current IBM logotype in 1972.
Since 1917. Some use pure type as a logomark.
Some use custom type as a logomark.
Some combine type and an icon into a single graphic symbol.
The Guitar Store, Commercial Road, Southampton, UK
Image and notes: http://www.flickr.com/photos/glenscott/3263916059/
Start with vision. Think of your brand as a person.
Remember that brand equity, or how a brand is regarded &#x2014; much like a person &#x2014; is defined by the quality of the interactions people have with it.
Write down keywords that describe the personality of the brand.
What&#x2019;s the emotional response you want to encourage in customers?
Start in greyscale with the typeface; typefaces have resonance in the same way that color does.
Apply color to enhance the resonance with want. Own the color. It&#x2019;s more than decoration.
Test your ideas at different sizes on the screen. It may be that alternatives are required for smaller sizes at low resolution.
Heidelberg Windmill press at Yee Haw Industries, Knoxville, TN. http://www.yeehawindustries.com/
Why typography is important. CSS Zen Garden spoof by Bruce Lawson.
Core web fonts test suite (plus a couple of other combinations):
http://jontangerine.com/silo/typography/web-fonts/
Download from http://sourceforge.net/projects/corefonts/files/
Does Webdings also count? They put us in the same position as small printers: limited number of typefaces. However, we have unlimited fonts of those faces.
Rule of thirds (my version). Round up if you wish. Add gutters and margins.
The basis of any layout is the humble paragraph.
Examples: http://jontangerine.com/silo/typography/p/
Compare this (A) with&#x2026;
&#x2026;this (B). Which is better?
1. Two columns. Approximate golden ratio split.
2. Basic body text and leading (line height) equals &#x201C;1 lead&#x201D;. Legibility:
&#x201C;Discernability: distinctness that makes perception easy.&#x201D;
&#x201C;The quality of written language that makes it easy to read and understand&#x201D;
3. The difference between baselines also equals one lead. One lead is the grid! Known as a &#x2018;baseline grid&#x2019;
All values in the layout should relate to the one lead value. In this instance the margin between columns is 40px (1 lead &#xD7; 2).
3. One lead is the grid! Known as a &#x2018;baseline grid&#x2019;
All values in the layout should be multiple of 0.5 lead. In this instance the margin between columns is 40px (1 lead &#xD7; 2).
Example is 960px wide including gutters and margins.
Importance defined by size and position.
Auto polo: http://www.flickr.com/photos/library_of_congress/2477626151/
http://www.colourlovers.com/
Choose a primary from tints&#x2026;
&#x2026;or choose a primary from shades&#x2026;
&#x2026;or tones.
So whether you go with something vibrant&#x2026;
&#x2026;or something simple&#x2026;
&#x2026;there&#x2019;s a palette for every mood, and every message.
http://en.wikipedia.org/wiki/Golden_ratio
http://www.sitepoint.com/article/principles-beautiful-web-design/3/
http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/