00:00:16.740
All right, good, good! Welcome, welcome. I was just at the Sandy Metz talk, really awesome, and I'm really excited to follow up with no code. There will be no code in this talk. I'm Jenn, and I'm here to tell you about some elements of design.
00:00:25.000
I always hear from developers that they don't know how to design, but I don't think that's true. You are incredibly smart people, and you can figure it out. I'm here to help. Currently, I'm a designer and front-end developer at Rap Genius. I designed the perfect website, but that's not true at all.
00:00:43.829
I think we know by now that we are living in a world of design, a culture of design. Apple is number one, and everyone loves it. So we have an idea of why design is important, but we must remember that we're building these things for people, and they need to use them as easily and pleasantly as possible. Designing will set you apart from others. It will earn you goodwill and trust from users when they know that your site is well-designed, easy to use, and offers a pleasant and enjoyable experience.
00:01:14.680
Design can even serve as marketing for you. You can use it to sell yourself to people and gain their trust. I would say design is not just aesthetics; it is also function. Form follows function. We know this in programming; we program around it, and you have to use design to sell your purpose.
00:01:46.750
As a developer, I don’t want you to feel like you have to throw things over the wall to designers and say, 'I don’t have any say in this, I don’t know what I’m talking about.' Because you do, and I want to empower you. Today, I have seven principles: hierarchy, contrast, repetition, proximity, flow, typography, and color. With these seven principles, I think you can have a great base for entering design conversations.
00:02:22.530
So, here’s a loose flow of what I’m going to do: I’ll define each principle, look at some bad examples, contrast them with some good examples, and then use these examples to give you some rules to use and fall back on.
00:02:44.190
All right, so number one is hierarchy. Hierarchy is all about priority in your layouts. You can see from this slide itself—I'll use all these slides to show you how hierarchy works. The word 'hierarchy' is number one; it's bigger, greener, and it's the first thing that you’re going to look at on this page. It is the most important, that's what we’re about to talk about.
00:03:25.750
Here’s a flow of hierarchy: you look at this big thing at the top, then the next biggest thing, and then the smaller things. Before you even look at the browser or the phone or whatever you're designing, you need to ask yourself, 'What am I doing here? Why is someone coming to my site?' You have to ask these challenging questions so you can have great answers and be prepared.
00:04:00.269
In the example of a site with no clear hierarchy, the first thing that you see is the logo. A good technique that you can use is to blur out your site and see what pops out. The only thing we see here is the logo. Everything else, including the headlines, tags, and sidebar, has the same priority, making it totally boring.
00:04:51.959
A better example of hierarchy is this site. The first thing we see here when blurred out is the knowledge headline, which is the most important article people are coming to the site for. We also see the logo here; while it’s important for people to know where they are, the third thing they see is the other actions they can take on the page. This design allows for an easier user experience.
00:05:36.090
If you tell the user that everything is the number one priority, then what you're really saying is that nothing is important. Everything feels throwaway. BuzzFeed, for instance, presents a lot of information all at once—everything is asking for your attention. If you want users to trust your brand, presenting every option as equal can be counterproductive.
00:06:47.919
If we look at the stalwarts like the New York Times, we see a better hierarchy. When blurred out, there are fewer elements catching your eye, guiding the user around the page. They provide a clear path for the reader's eye to follow. There's a flow of information that serves the purpose of informing the user clearly and straightforwardly.
00:08:25.010
Contrast creates interest on the page. By creating interesting differences for a reason, you engage the audience. We have bigger text and greener text; while it could be a lot more flashy, it’s just an intro slide. We can use things like line, shape, texture, color, and patterns to create contrast on the page.
00:09:30.290
In examining examples of contrast, It’s noteworthy that the GitHub gray website doesn’t push this area enough. Using standard black, white, and blue links is not very exciting. You could push the boundaries further. Contrast can be demonstrated with a site that uses bright backgrounds, paired with geometric text to create visual interest.
00:10:25.480
Repetition is the next principle, and it creates patterns and expectations that unify and strengthen your message. Grouping related items makes it easier for users, as repetition helps establish visual consistency. When creating items, think about how you can maintain that consistency across your design.
00:11:27.360
You might have lists and ordered sections where similar items look the same except for the one thing that is different, creating clear visual cues for users. When you can establish a system, it makes it easier to maintain consistency as your site grows.
00:12:13.250
Some patterns could look overwhelming, like a site that crams everything together. Remember, grouping elements together in groups of three to five makes it easier for users to process information and know where they are, similar to how familiar experiences work.
00:12:52.920
Proximity is about grouping related elements together and using space to either connect or disconnect items. It is also important for organizing forms. A lack of space can result in overwhelming users with too much information and confusion.
00:14:09.520
Using white space can simplify the user experience considerably. This also applies to form design. Labels should be placed in lines or grouped together to help users navigate and complete actions with ease.
00:14:51.300
Flow is next, and it involves making sure a user can transition smoothly through the steps on your site. Think of it as a pathway where you're leading your users down a path to the end goal.
00:15:37.360
For instance, in an online shopping experience, you want to make sure that the steps from product view to cart are seamless and free of distractions. Maintaining flow improves user experience and leads to better conversions.
00:16:25.780
Typography is also crucial. A whole generation of designers has made accessing good typography easy, with small changes leading to significant improvements in readability. A simple rule is to have a few key typefaces as defaults.
00:17:22.320
The baseline length of text can be anywhere from 35 to 65 characters for optimal readability. Ensuring the minimum font size for clarity is also essential.
00:18:17.700
Lastly, color should be approached with care. It's crucial to consider accessibility and the meanings that colors carry. Focus on using strategic color tones to convey your site’s personality and effectively target your audience.
00:19:32.250
Combining hue, saturation, and value can help in establishing the mood of your site, but do so selectively. It's also essential to maintain a consistent and appealing color palette that resonates with users.
00:20:09.399
To wrap it up, these elements of design all work together. You should feel empowered to engage in design conversations. It’s vital that the designs you create consider these principles. Think about how you can manipulate each aspect to achieve your desired user experience.
00:20:59.640
Each design will incorporate elements of these seven principles, allowing you to adjust each as needed to enhance overall effectiveness, flow, and user satisfaction.
00:21:49.560
And remember, you’re all capable of engaging with design! You're on the internet every day, observing design elements you love or dislike. This foundation should give you the vocabulary to participate confidently in design discussions.
00:22:44.890
Thank you for being here today. I hope you feel more empowered to dive into your design adventures and that you can take these principles and share them with others.
00:23:02.670
Thank you!