How does Typography affect the Design process

how to improve your typography skills and how to make your typography responsive and how to write typography and how to 3d typography
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Bootrap st ping Design Roll your own design. Second Edition The design eBook for bootstrappers, founders, and hackers. BY JARROD DRYSDALEPart 1: Mentality Introduction 4 You, The Designer 10 UX, UI, and Other Buzzwords 17 Part 2: Principles Layout 25 Visual Hierarchy 38 Proximity & Space 48 Typography 56 Color 88 Part 3: Practice Your New Process 103 How To Steal 114 Visual Design Tips 124 Evaluating Design 143 UI Examples 152 Thanks 193 Resources 195 Author Bio 199 Acknowledgements 202Chapter 1 Introduction6 Bootstrapping Design We are bootstrappers: developers, scientists, hackers, founders, marketers, writers, designers, and thinkers who are building the new breed of online businesses. We are starting businesses—not pandering for design awards. We’re building lean and profitable startups rather than the next Facebook. If you aren’t a bootstrapper, this book isn’t for you. There are many design books that teach how to become a full-time- job designer and many that teach formal design theory and advanced techniques for readers with years of experience. This book contains the minimum design fundamentals that bootstrappers must understand in order to launch a business. My intent is to emphasize design basics rather than to reduce the whole of design to a bag of tricks. You’ll notice peripheral topics such as kerning, color wheels, and art history are absent. This is not because such topics are unimportant but because they are neither suitable for beginners nor relevant to their bottom line. I’m writing this book because design truly affects the success of businesses. I believe in bootstrappers and the businesses they are building, and I know design can help them succeed. I believe great design is for everyone—not just the few fortunate enough to have big budgets.Chapter 1: Introduction 7 Attracting More Users “Getting more users” is the wrong way to think about business. Before you do anything else, including read this book, you should know who your users are, where they are, and how you can reach them. Great business comes from understanding people—we have all seen that truth firsthand. Design cannot fix a flawed business strategy. My first web app was beautiful by all accounts, but it failed. It failed because I did not understand business nor the customers I wanted to reach. Do yourself a favor: before you start up, learn. Read about business and research your customers. However, be careful who you listen to because there is much bad advice in the startup scene. The only reliable sources of business advice I have found are Amy Hoy’s 30x500 class and Ash Maurya’s book, Running Lean. Design Affects Business Once you understand potential customers, you can use design to engage them. How? Design strengthens communication. Design exists to support content and deliver ideas with 8 Bootstrapping Design greater effect, clarity, and insight. If potential customers do not understand what you are offering, they will not buy your product. So not only do you need to be a good writer; you need to learn to present your message clearly. However, your goals do not end with making a sale; designers aim to create a painless and, hopefully, even enjoyable experience. Forming an emotional connection with customers cements your brand in their minds. Research reveals that visual beauty supports business goals. Aesthetics build trust in mere milliseconds, affect purchasing decisions, and even affect perceived value and usability. (Read about the research at A List Apart here and here, and at UX Myths.) Design It Yourself You wouldn’t be reading this book if you didn’t already see the value of great design. The real question is: why should you be the designer for your business? There are many other ways to fulfill your design needs: themes, templates, frameworks, Chapter 1: Introduction 9 crowdsourcing, and (obviously) hiring professional designers. Hiring a designer is expensive, and when bootstrapping you have to question whether a new, undeveloped idea warrants such a substantial investment. Many of us couldn’t afford to pay a designer 100 per hour even if we wanted to. However, validating the idea before you sink too much money into a project is wise, regardless of whether you can afford it. Themes, templates, and crowdsourced design never fit the project. They are generic and inflexible. They are created without any understanding of the problem they propose to solve. These methods reveal the difference between design and decoration; you will accomplish more by tailoring a message than you will by slapping any pretty logo on a page. Frameworks like Twitter Bootstrap and Foundation can provide a great starting point for a new project, but most still require some design acumen to be fully realized. So instead of any of these, learn to design it yourself. You are absolutely capable of producing beautiful design that supports your business. Keep in mind that later, as your successful business brings in profits, you can even hire a professional designer if you’d like.10 Bootstrapping Design But for now, designing it yourself is the best course of action. Be honest—it’s the option you fear most. But rather than fearing the edge of the precipice, we’re just going to jump off the ledge.Chapter 7 Typography12 Bootstrapping Design Typography presents an incredible opportunity for those of us who are woefully unskilled in illustration or creating custom graphics. It’s a surprisingly easy way to add lots of visual appeal to your work. You’ll notice that fonts are a topic of passionate debate in the design community, famously Comic Sans and Papyrus. Furthermore, type geeks have strenuous and detailed criteria for pairing fonts. Ignore all that. The goal for this chapter is to teach you a few simple strategies for getting a custom typographic look without wading through thousands of fonts. Many design books go into exhaustive detail about typography and explain classifications, historical significance, genres, and other minutiae. Most of this knowledge is of little use for bootstrapping a new business, so I’m leaving it out. If you really want to geek out on the finer points of typography, I’ll list a few resources for you at the end of this chapter. However, for the sake of getting your business rolling, here’s all you need to know about type.Chapter 7: Typography 13 Display and Text Fonts As of right now, start thinking about fonts in terms of two uses: display and text. Display fonts are for headlines, logos, illustrations, and other features that can accommodate larger font sizes or more decorative typography. The goals for display are emphasis and visual interest. Text fonts are for paragraphs, long-form content, and prose. Here, the goal is readability. Some fonts can work well for both display and text. However, many do not. Learning to recognize the difference is important, but there are no concrete rules. Some fonts might not provide enough visual interest in a display setting, while many more decorative display fonts would be nearly impossible to read in a paragraph. If you are unsure about whether or not a font will work for one of these settings, try it. The important point is that you pay attention to the role of the font.14 Bootstrapping Design Type Terms Font: the software file that stores the shapes of letters. Arial is a font file. Arial Bold is a separate file. Typeface: the design of the shapes of letters. Arial is a typeface design you can use by installing the Arial font file. Font Weights: Versions of the line thickness in letters, such as regular weight and bold weight. Font families can include weights such as: hairline, thin, light, medium, regular, semibold, bold, heavy, black, and ultra. Font Styles: Variations in the shapes of letters such as italics and weights, or combinations of the two. Font Family: The group of font files for each of the styles of a typeface. Arial, Arial Bold, and Arial Italic together form a font family.Chapter 7: Typography 15 Serif Typefaces that have short wedge shapes or lines at the ends of the strokes of characters. Sans Serif Typefaces that do not have serifs. Slab Serif Typefaces that have block-like serifs. Script Letters are connected like cursive handwriting. Italic / Oblique Letters are slanted.16 Bootstrapping Design Use Custom Fonts Instead of Defaults Browser-safe fonts and native device fonts are fine for many uses, but you will always get more mileage out of custom fonts. Custom fonts can contribute visual polish without requiring much extra work. If you are working on the web, use a service like Typekit, Fontdeck, or Google Fonts. These are more affordable than buying fonts to install on your computer, and they provide incredible value. Also, because of technical challenges and licensing restrictions, running Typekit or Fontdeck is easier than purchasing webfonts to host on your own server and apply via font-face.Chapter 7: Typography 17 Choosing Fonts for a Project The best rule of thumb is to limit your design to two font families. This limit simplifies your decision while creating your design. Each time you discover an element that needs a new style, you have fewer options to weigh. When picking fonts for your project, use one of these strategies: 1. Pick one display font and one versatile text font family. Using this strategy, you can have a nice, expressive font for your logo or headlines and can fill in the gaps with the more versatile text font. By versatile, I mean a family that works well for paragraphs, but can also work for buttons, subheaders, and navigation when the display font isn’t suitable. 2. Pick one extremely versatile font family and use it for everything. Some font families are extremely versatile because they include lots of weights and styles. Using one of these 18 Bootstrapping Design families is a great way to have lots of expressive and dynamic typography that always matches. You don’t have to worry about making sure the fonts you pick match. The person who designed the typeface already did that hard work (You’ll notice I used this strategy in this book by picking the Calluna font family). Readability First Font size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent Lorem ipsum dolor sit amet, consectetur faucibus varius dolor, eget auctor magna fringilla ut. In orci purus, adipiscing elit. Praesent faucibus varius iaculis vitae convallis vitae, rutrum vel augue. Nunc blandit posuere nulla, ac placerat nisi iaculis condimentum. Proin aliquet iaculis dolor, eget auctor magna fringilla ut. In fringilla. Nam quis est felis. Aenean dolor quam, facilisis vel lacinia eget, aliquet sed risus. Morbi mattis ipsum non sapien ultricies laoreet. orci purus, iaculis vitae convallis vitae, Mauris egestas enim quis nisl tincidunt eu suscipit felis pellentesque. rutrum vel augue. Nunc blandit posuere Cras scelerisque malesuada dignissim. Don’t make readers squint. Set paragraph text at a minimum equivalent to 16px, and then pick text sizes for other elements relative to that. Don’t decrease the font size if your content looks too long. Instead, edit your content. If your grandma can’t read it without her magnifying glass, it’s too small.Chapter 7: Typography 19 Line height (or leading). Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus varius adipiscing elit. Praesent faucibus varius dolor, eget auctor magna fringilla ut. In orci purus, iaculis vitae convallis vitae, dolor, eget auctor magna fringilla ut. In rutrum vel augue. Nunc blandit posuere orci purus, iaculis vitae convallis vitae, nulla, ac placerat nisi iaculis condimentum. Proin aliquet iaculis fringilla. Nam quis rutrum vel augue. Nunc blandit posuere The spacing between lines of a paragraph is equally crucial for easy reading. Rule of thumb dictates that spacing should equal about 125% of the font size, or 1.25em. You might decide to adjust this depending on the characteristics of the fonts you are using, and that’s perfectly fine. For some fonts, I even use 150% or 1.5em line heights. Color Contrast. Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus varius adipiscing elit. Praesent faucibus varius dolor, eget auctor magna fringilla ut. In dolor, eget auctor magna fringilla ut. In orci purus, iaculis vitae convallis vitae, orci purus, iaculis vitae convallis vitae, rutrum vel augue. Nunc blandit posuere rutrum vel augue. Nunc blandit posuere The contrast between text color and background color affects reading speed. Too many websites have light gray text that’s difficult to read on anything but an Apple Cinema Display. 20 Bootstrapping Design Give readers a break and use high contrast for all your text. For more, see the Color chapter. Maintain Consistent Styles If you write CSS, you understand the concept of styles that are applied to multiple elements on a web page. Regardless of the medium, maintaining consistent type styles is crucial for the sake of clarity and readability. This sounds simple, but I’d argue it is the biggest and most common typographic mistake that people make. Content must be well-organized before you can apply consistent typographic styles. Many typographic errors are caused by poorly formatted or organized content. As a designer, you are responsible for facilitating communication; you guide the user through the content. This means you must understand which lines are headers, subheaders, or just bold. If you didn’t write the content, work with the person who did to get it organized before you continue. This includes maintaining writing conventions for the usage of headers, subheaders, bold, etc. Organize your content.

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.