{"id":174400,"date":"2018-11-01T13:00:30","date_gmt":"2018-11-01T13:00:30","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=174400"},"modified":"2018-10-31T19:04:35","modified_gmt":"2018-10-31T19:04:35","slug":"hack-your-way-to-great-design-basic-design-principles-for-wordpress-developers","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/hack-your-way-to-great-design-basic-design-principles-for-wordpress-developers\/","title":{"rendered":"Hack Your Way To Great Design: Basic Design Principles for WordPress Developers"},"content":{"rendered":"

If men are from Mars and women from Venus, designers and developers are definitively from different planets!<\/p>\n

It’s true! Many developers struggle when it comes to design and vice versa. If you’re a developer who wants to improve your design skills, read on!<\/p>\n

Basic Design Principles and Elements<\/h2>\n

Before riding a bike, one must first learn how to walk, right? Let\u2019s learn some of the basic design principles that you can incorporate in your WordPress web design, then!<\/p>\n

Table of Contents<\/b><\/p>\n

    \n
  1. Hierarchy<\/a><\/li>\n
  2. Composition<\/a><\/li>\n
  3. Focal Point<\/a><\/li>\n
  4. Colors<\/a><\/li>\n
  5. Typography<\/a><\/li>\n
  6. Flow<\/a><\/li>\n
  7. Alignment<\/a><\/li>\n
  8. A Final Note to Developers<\/a><\/li>\n<\/ol>\n

    Hierarchy<\/strong><\/h2>\n

    Visual Hierarchy is the presentation of design elements and features on a web page in a way that implies relative importance. Visual hierarchy also influences the order in which the human eye perceives what it sees. It is usually achieved with visual contrast, size, or placement of the elements.<\/p>\n

    TIP FOR DEVS:<\/strong> Creating a visual hierarchy should be easy for you\u00a0because as a developer you are an avid organizer – at least when it comes to code. Approach this task like you\u2019re creating an HTML\u00a0structure (best example is the hierarchy of headings, with <h1> being the most important <h2> the next one, you know the drill.).
    \nMake a list of all the elements on your web page. Label each with a \u201clevel\u201d of importance somewhere on a piece of paper (it’s for your eyes only). For example, your headline\/catchphrase is usually the most important thing a visitor should see on a landing page. Make it a lvl 1. The second most important thing should be the CTA button – this is your lvl2 element, and so on. Make the higher level elements visually stand out and make the rest of the content (lvl 4 or below) visually less eye-catching.<\/p>\n

    The infographic below demonstrates some of the ways to create visual hierarchy. Just remember, don\u2019t go over the top and mix everything up!
    \n

    \n
    \"Ways
    Ways to achieve visual hierarchy<\/figcaption><\/figure>\n<\/div>\n

    Visual hierarchy can apply to elements of the same type, which is exactly the case with headings in HTML. For example, you can have a button for stronger and weaker actions (like “buy now” and “read more”) if you just style them a bit differently.<\/p>\n

    \"Basic
    Creating visual hierarchy using different styling on the same element<\/figcaption><\/figure>\n

    Note how the small things, like changing the border size and color or changing the weight and style of the font, can make a great difference. These are all super easy things to do in CSS.<\/p>\n

    Composition<\/strong><\/h2>\n

    The composition of a web page is the placement and organization of design elements according to basic principles of art and web design.<\/p>\n

    Creating balanced compositions is easier when applying the Rule of thirds.<\/p>\n

    The rule of thirds<\/a>\u00a0proposes that an image should be imagined as divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines. The most important compositional elements should be placed as close as possible to the intersections of these lines.<\/p>\n

    \n
    \"Applying
    Applying the rule of thirds to create a more dynamic composition<\/figcaption><\/figure>\n<\/div>\n

    Applying the rule of thirds creates more energy and better flow to your composition than simply centering your focal point.<\/p>\n

    Balance<\/h2>\n

    Balance is the principle of design which prescribes how to evenly distribute visual elements. Our brains perceive balanced designs as stable and calm, while imbalance makes us feel uneasy and uncomfortable. Imbalanced design can make a stronger statement but it requires a highly skilled designer to do so in a proper way. In most cases, you should strive to balance things out.<\/p>\n

    Negative space<\/h2>\n

    White space is an important part of your layout strategy. Incorporating negative space into a design helps reduce visual noise, increase readability, and bring balance.
    \nUse margins and padding on your design elements to add negative space.<\/p>\n

    By adding negative space around an element you can emphasize that element. Look at a Google’s search page. It has a centered logo and tons of negative space around it. You simply can’t miss the point of this website.<\/p>\n

    \"Design
    Using negative space makes your content stand out<\/figcaption><\/figure>\n
    <\/div>\n

    Now compare it to this.<\/p>\n

    \n
    \"design
    An example of bad design with too little negative space<\/figcaption><\/figure>\n<\/div>\n

    This website is wrong on so many levels, but one of the worst things about this page is that it’s so cluttered with content you can’t even look at it.<\/p>\n

    Focal Point<\/h2>\n

    Focal point<\/strong> or focus<\/strong> of a web page is the place on your page that draws the most attention. It should be the most important piece of your WordPress page or post. Your page should always have one clear focal point (I mean, just look at Google’s home page). Two or three focal points at most, on larger canvases, depending on your design and site functionality (number of potential CTA elements).\u00a0 Make too many elements stand out and you will end up with a complete mess like on this page<\/a>. If you’re an epileptic don’t open this link.<\/p>\n

    PRO TIP: For images and non-centered web pages use the rule of thirds to put the focal point in the proper place. Photoshop crop tool draws the lines for you.<\/p>\n

    \n
    \"Rule
    Crop tool in Photoshop automatically draws the lines for you<\/figcaption><\/figure>\n<\/div>\n

    Notice how the most important elements of this image (the hero\u2019s face and company logo) are on the intersection of the lines that are forming the thirds. This is exactly where a focal point should be.<\/p>\n

    Color<\/strong><\/h2>\n

    Color is an extremely important basic design element. Covering color theory and color psychology<\/a> can take entire semesters in design schools, but don\u2019t worry, we will keep it brief.<\/p>\n

    The most important thing you need to know is how to create a color palette for your web design.<\/p>\n

    Here are some tips:<\/p>\n