As a graphic designer, diving into coding is a bit daunting and scary. My coding process is a bit different. I like to start my project off with thinking of a client. By doing so, I can define the theme of my app and figuring out what functionality I can add. From there, I create a wireframe. The wireframe allows me to see the layout of my application. After that, I start coding. I start by building out the functionality and testing to see if it all works. Finally, I start coding the front end and use different CSS frameworks to design my applications.
Below are the concepts that I apply to my design.
1. Wireframes
The term means to sketch out the placements of buttons, images, and text with the most minimal amount of details. This allows you to visually think about how you want your final product to look. This also allows you to physically see how many pages or elements you might need to build into your code.
2. Composition
The composition is when elements are arranged to look a certain way. One concept that you should familiarize yourself with is the grid system. It is used with most of the CSS frameworks, like Bootstrap and Foundation. Have contrast with size and color to help information flow better. The best way to have your work look and feel meaningful is to have a focal point. check out this blog for a better understanding of composition.
3. Repetition
Repetition means to reuse the same or a similar image/or style throughout your design. For example, if you are using a round button on the form, that style of the round button should be consistent whenever a button appears on your page.
4. Color
Always have a color palette for your work. This helps your work look cohesive, well-thought-out, and just visually pleasant to look at. There are many tools/websites out there that generate a color palette. The one I usually reach for is color Mind or coolors.
Tip Use three colors at most. One primary color, one secondary color, and one accent color. Use the 60-30-10 rule. 60% should be your brand color, 30% should be your secondary color and 10% is the accent color.
5. Typography
Typography refers art of arranging type to be more legible, and pleasing to look at while conveying information. Some basic types of typographical elements you have seen in the code are:
<h1> This would be the largest text. </h1>
<h2> This would be the second largests text. </h2>
<strong> This would be bold. </strong>
<p> This would be the smallest size of font. </p>
This is where composition comes into play. First, you need an understanding of what the most important information you want the user to see is. For this information, you would most likely go for an h1 tag or maybe make the text bold to make it stand out from the rest.
Another way to use typography is by pairing two different font families together and create contrast. The most common pairing is a san-serif typeface paired with a serif font face. Below are some examples:
images taken from here
Example of San-serif pairs:
Example of a Serif pairing:
Example of a Serif pairing:
Hopefully, this has helped you become more aware of design in general. The more you practice the better you get. As for now check out these resources.
Here is a list of resources to check out:
Color Combos to avoid
BootStrap Templates Blog
CSS Grid guide MDN
Google Fonts
Top comments (12)
How does one make a lot of text readable when the color scheme is very bright? I know a lot of the time I like choosing color schemes as a color with white.
Specifically, I chose a bright green with white, and when I was writing an instructions page, the white text was hard to read against the bright green background.
Any help?
The reason that your text is unreadable is that the brightness of white and green are the same, which causes color vibration. The best way to solve that problem is to have different brightness for your desired font. The best way to check it is to put your hex color to coolor.co and change the brightness. Hope this helps.
Thankyou very much. I always face this issue. This is just what I needed
Thanks! That was really helpful!
Thanks for sharing this. Do you have any other Font Pairing resources you like to use? The ones you've used are awesome.
In terms of generating a font pair, there are plenty of tools out there. The one I like to use is fontjoy.com. And if you're asking about getting fonts, I recommend you check out fontsquirrel.com.
That's great - Thanks again!
You should give fontpair.co a try!
Your blogger's small a little but it's very benefits, I did like it.
Go ahead. :)
Great job Iqra !
Well done Iqra !
Very nice the tip with font-family cmbination! Nunito / Mono Space win!