00:00:11.840
Thank you.
00:00:21.380
All right, I’m here to talk about design hacks for the pragmatic mind.
00:00:27.660
Hopefully, you guys won’t take too much offense to that.
00:00:33.960
I want to start off a little bit about myself. My name is Kyle Neath, and I’m a designer at GitHub.
00:00:40.079
I call myself a designer because I’ve been writing Ruby for about six years. My journey into design started from wanting to make the things I built look pretty.
00:00:46.140
If you want to find me online, my handle is usually ‘kyle’ everywhere—Twitter, GitHub, Flickr, wherever you want to look.
00:00:52.218
My blog is called Warp Spider, and I plan to post the slides for this talk shortly after.
00:00:58.020
Now, what’s important in life? My favorite beer!
00:01:03.180
I’ve thought about this a lot. Dogfish Head 90 Minute, baby, is an amazing beer. The 120 Minute is also awesome, but I can’t drink that lightly.
00:01:11.760
As I think about it, I also love Firestone Double Barrel Ale. This was the first good beer I had in college when I decided to pay more than 30 cents for a drink.
00:01:17.099
Another favorite of mine is Black Butte Porter; I discovered that through my PBS this past few years.
00:01:23.280
And of course, Sierra Nevada Pale Ale, which is always found at most bars, is delicious.
00:01:30.420
Luckily for me, I work at a company with a four-tap Kegerator and a custom hand-tap system.
00:01:37.740
Also, I recently decided to learn how to snowboard and often go up to Heavenly.
00:01:44.100
So, if I’m a designer, why am I at a Ruby conference? That doesn’t seem to make sense.
00:01:52.560
The truth is that developers end up designing a lot of things even if they don’t realize it—like documentation, Ruby gems, admin sections of websites, mini apps, and side projects that may not have time for a designer.
00:02:06.360
It’s a false separation to say designers and developers are different. In reality, it’s a spectrum.
00:02:17.640
At the end of the day, design is just as important as technology. It’s all about the end product.
00:02:24.660
It doesn’t matter if you have a fantastic technological infrastructure if the design is lacking and users don’t enjoy it.
00:02:30.200
I think everyone should aspire to be a better designer. There’s this notion that designers who can’t code are worthless, yet we rarely hear developers criticized for not being able to design.
00:02:38.760
You might be thinking about your own skills; maybe you feel like you're a developer who can't design.
00:02:47.160
Aspiring to enhance your design skills will help you produce better products overall.
00:02:54.540
I’d like to share how I got into design—the journey of becoming what everyone calls a designer.
00:03:05.100
In seventh grade, I was enamored with Warcraft II and wanted to share my passion, and back then, websites were a fantastic way to do this.
00:03:12.540
So, I wanted to build websites. I learned by using the ‘view source’ option and I copied the designs I found. I don’t recommend this for professional work, but it’s a great way to learn.
00:03:22.560
As I continued this process, I realized that good design is a collection of hacks. That’s why I call it 'design hacks for the pragmatic-minded'.
00:03:30.600
I appreciate simple rules that can be built upon and applied consistently.
00:03:39.060
This talk isn’t about design theory or anything I learned in school; it’s simply a collection of hacks.
00:03:47.460
I’m going to share tips to polish your designs, some quick improvements, and strategies that will enhance your design understanding.
00:03:54.180
Let’s start with type, meaning the fonts and the layout of text.
00:04:01.560
Good typography is 90% about what you aren’t doing. Stop trying to be fancy; that’s the enemy.
00:04:08.280
Classic fonts go a long way. Fonts like Helvetica, Arial, Times New Roman, Georgia, and Monaco can help you create amazing interfaces.
00:04:14.280
Many of my favorite design websites use these simple fonts, so don’t feel pressured to choose something fancy.
00:04:20.880
Instead of using numerous different fonts, experiment with font weights and styles.
00:04:27.360
For instance, Twitter’s tweet section uses only Helvetica with a mix of weights, making it visually appealing.
00:04:34.080
You can achieve a coherent design by just tweaking weights and styles.
00:04:42.360
Another thing to consider is line height for improved readability.
00:04:49.080
Standard line height is often too compact; increasing it will make your text easier to read.
00:04:56.640
This adjustment has a much more noticeable effect on smaller font sizes.
00:05:05.220
A tool I recommend is the baseline grid, which helps align your text effectively.
00:05:13.020
Using a vertical grid to align your text creates a visual rhythm that enhances the design.
00:05:21.780
Now let’s discuss color. Color usage is essential for emphasizing content.
00:05:31.200
Specific colors can set expectations; for example, blue text typically signifies a link.
00:05:40.560
However, using too many colors can be distracting. It’s advisable to start your designs in grayscale.
00:05:47.520
By designing in grayscale and adding color later, you’re forced to think seriously about your color choices.
00:05:53.460
Many designers use colored backgrounds with gray text and borders, which can hurt readability.
00:06:02.640
Instead, add subtle hints of color to your background and borders; this improves the visual design.
00:06:11.760
Using gradients in design is common, but you may wonder why yours look lackluster.
00:06:22.560
The secret often lies in blend modes in design software that can enhance vibrancy.
00:06:29.520
Instead of only using standard black and white gradients, explore various blend modes to brighten your designs.
00:06:39.000
In conclusion, adding black or white directly to a color can desaturate it. You want richness in your colors.
00:06:47.460
Playing with saturation and radiance in your design can yield remarkable results.
00:06:54.420
Using stock icons or images is another aspect that many overlook.
00:07:02.640
Some designers feel they are a cheap way out, but that’s not true. Stock icons can add personality and flair.
00:07:09.960
For instance, the octocat from GitHub began as a stock image but became iconic.
00:07:15.900
Stocks are widely accessible and can significantly elevate a design.
00:07:23.340
They are cost-effective and available in various formats, allowing flexibility in usage.
00:07:31.680
In terms of design principles, spacing and alignment make a significant difference.
00:07:39.060
Often, developer designs overlook proper padding, leading to cramped text next to edges.
00:07:46.920
It’s important to provide adequate space to improve readability. Conversely, don’t go overboard with padding.
00:07:55.020
A good technique is to use equal padding on both sides, ensuring that padding matches margins and font size.
00:08:02.880
Grids are another vital aspect of design that simplifies layout and alignment.
00:08:09.960
They provide guidelines much like legos, allowing you to create visually appealing designs effortlessly.
00:08:16.380
Ensuring alignment, even if it’s just by five pixels, greatly improves the overall look.
00:08:25.620
Visual hierarchy is essential in design, grouping related elements together.
00:08:32.100
Using boxes to represent these elements helps clarify what belongs together.
00:08:39.360
For example, on Tumblr, information is grouped logically, enabling intuitive navigation.
00:08:46.680
To ensure your design maintains a good hierarchy, write outlines of your UI elements.
00:08:53.640
Visualizing relationships helps prevent unrelated elements from being confused.
00:09:01.680
Additionally, performing a squish test—shrinking your design to assess grouping—can provide insight.
00:09:09.060
Let’s now delve into improving your presentations, a topic I have strong opinions on.
00:09:18.300
First and foremost, increase your font size on slides. A bigger font is always better.
00:09:26.520
When it comes to text length, 80 characters are suitable for a text editor, but terrible for slides.
00:09:33.240
Truncate strings where possible; your code can be less accurate in a presentation.
00:09:41.280
If you have a large block of code, present it one line at a time to avoid overwhelming your audience.
00:09:48.840
A good goal is to maintain around 40 characters wide, with about four lines of code visible at once.
00:09:57.000
This format helps reduce cognitive load during presentations, keeping your audience engaged.
00:10:05.040
While some slides might require larger code samples, remember that clarity is Key.
00:10:12.360
Always favor brevity in your code samples; it doesn’t have to be syntactically perfect.
00:10:22.800
Contrast is an essential aspect of slide design. Ensure that your text is easily legible.
00:10:29.520
Using a 75% overlay can help test visibility in various lighting conditions, especially with projectors.
00:10:36.420
In conclusion, applying these principles can help you become a better designer.
00:10:44.640
Steal ideas where you can and practice those styles to build your skills.
00:10:53.520
Recreate designs from screenshots to learn about layering styles and effects. Side projects are an ideal way to practice.
00:11:03.540
I have redesigned my blog about ten times this year alone, which allowed me to experiment without risk.
00:11:12.960
Lastly, consistent practice is key. You're not going to become proficient overnight.
00:11:19.920
So, to summarize, oddscat stickers work great!
00:11:25.800
Any questions?
00:11:32.520
Audience member raises an accessibility concern related to color.
00:11:41.760
In response, I recommend designing in grayscale first and emphasizing contrast.
00:11:51.840
This helps ensure that any color choices remain accessible.
00:12:00.840
Another audience member raises concerns about icon license usage across projects.
00:12:11.760
Most icons usually have individual usage licenses; always check licensing terms.
00:12:19.800
Another audience member mentions the writings of Donald Norman on the use of color.
00:12:27.360
This is a crucial conversation about effective color use in designs.
00:12:34.920
Another audience member asks about the use of progressive disclosure.
00:12:46.320
Using tooltips and first-time guidance is an effective approach to revealing deeper information.
00:12:57.240
Another comment addresses the role of text shadows in design.
00:13:05.640
A well-placed shadow enhances readability but must be used wisely.
00:13:13.320
Cool, thank you, everyone!
