A compiled third term data processing note
Download 210.2 Kb.
|
- Navigate this page:
- 1. Overall Layout and Visual Appearance
- 2. Colour Scheme
- 3. Typography
- 4. Navigation
- 5. Content
| WEEK FIVE
TOPIC: WEB DESIGN PACKAGES II (EXAMPLES AND COMPONENTS OF WEB DESIGN). Specific Objectives: By the end of this lesson the students should be able to; 1. List the examples of web design package. 2. State the components of web design package. We can get into the fun stuff like colours, typography, call-to-action buttons, and navigation. Every designer and site owner may take a different approach to build a website, but there’s a standard checklist of items and concepts that should be accounted for. Of course, while there are generally accepted design principles, the beauty of web design is that it’s an art form — not a science. Good design stands out from the crowd, but be sure the risks you take are calculated and reversible if they don’t pan out how you’d like. Now, time to turn the page on that sketchbook and start designing! HERE ARE SIX IMPORTANT DESIGN COMPONENTS 1. Overall Layout and Visual AppearanceYour site’s overall look is, of course, a crucial component of web design. We’re using these broad terms to cover a range of reactions you want your visitors to have. First impressions are critical, so you want to wow your audience as soon as the page loads. Users take only 50 milliseconds to form an opinion of your website or business, and that will determine whether they’ll stay or leave. That means your design should align with a handful of soothing adjectives: it should be simple, familiar, intuitive, clean, and accessible. Use plenty of whitespace (or padding and margins) to give the elements of your site room to breathe, and use grid-based designs to keep design items organized and orderly. Strong photography, icons, or graphics provide supplementary information to your text but make sure the images complement each other and the brand you’re looking to represent. Each piece of your website should be placed according to the visual hierarchy you want to assign it. Whether you aim for F-Patterns or Z-Patterns, you can direct visitors’ eyes and behaviours based on your design. Both patterns emphasize the top horizontal area of your site, or where most designers place the brand’s logo, navigation, and sometimes a search box. All three elements inspire brand recognition and user interaction. 2. Colour SchemeFinally, the elements you were probably expecting the most once you started reading. Your colour palette and fonts will directly inform your visitors’ opinions of your site and are what most novice designers’ start with. Trust us, the groundwork you’ve done so far will set you up for greater success than Roy G. Biv alone.As for choosing a colour scheme, paying attention to your brand or industry perspectives — along with your target audience demographics — will make this a somewhat painless process. Always be looking for ways to narrow your scope from the roughly 7 million discernible hues the eye can detect. Lawyers and accountants, for example, would typically be best served with a deep blue or green to signal professionalism, while a photographer may want to rely on black and white to truly showcase the vibrancy of his or her images. Beyond your brand’s industry, pay attention to your readers’ expectations: Parents of new-borns will appreciate soft pink and blues and yellows, while K-6 children expect bright primary colours. Teens and young adults are bold, while grownups and grandparents are a bit more refined and mature. Once you choose your dominant colour, consider what type of colour palette you want. If you’re looking for your audience to zero in on a particular piece of content or a button or elicit a specific type of interaction, you’ll want a complementary colour from the other side of the colour wheel. We spent an entire blog post exploring colour choices, so head on over there for more help. 3. TypographyThe same industry and demographics principles can generally be said for the typography, or fonts, you choose to communicate your message. More formal roles, like those lawyers and accountants, will likely want to stick with distinguished serif fonts (which have the extra bits hanging off at the end of letters), while we envision the photographer would use a very light and airy sans serif (no extra bits) typeface. As with the site’s overall design and layout, you’ll want to balance normalcy with freshness. Design aficionados will spot Arial or Times New Roman right away. Look for something a little different — but whatever you do, don’t even consider Comic Sans. Your text should be easily readable, which generally means body copy should be at least 16 pixels. Using a complementary font is ideal for headings or accents, but don’t go beyond three typefaces or unnecessary sizing adjustments. Of course, you’ll want to make sure there’s plenty of contrast between your text and the site’s background colours, which generally means a light colour paired with a dark tone — avoid that piercing red-font-on-green-background eyesore. 4. NavigationYour site’s navigation is not a space in which to be creative. First off, don’t fall into the trap of overly animated hover effects and complex, multi-tiered satnavs. Navigational elements — which can exist in a site’s header, body, and footer — simply serve to direct your visitors to the information they desire as quickly as possible. Right at the top of the page, site owners will be confronted with a majorly polarizing design decision: to hamburger or not to hamburger? The hamburger menu, represented by three parallel, horizontal lines, provides an economical way to save space by hiding your navigation off site. However, it obscures vital information and interactions from your visitors and tends to have lower click rates. Strong navigation extends beyond the main menu in your header. For long, scroll-heavy, or one-page designs, for example, you may want to include directional arrows that help direct users through each section. Most sites will also benefit by adding a sticky “Back to Top” button that quickly delivers visitors back to the top of the page (Here are some research-based suggestions from the Nielsen Norman Group on how to best implement this navigational element). Finally, don’t ignore the footer navigation menu. Users tend to scroll farther than you might expect, and some brands even witnessed up to 50 per cent more conversions with an optimized footer. If a reader has stuck around long enough to make it to the end of your homepage or landing page, they’ll need somewhere else to go or something else to do, such as sign up for email updates from your business. 5. ContentJust as interior designers don’t stop once the walls are painted, you’re not done once you’ve got the layout, colour scheme, typefaces, and pretty elements of your choosing picked out. Time to bring in the sofa and hang family pictures on the wall — by paying attention to how you are messaging interacts with your design. Your site visitors and potential customers want information quickly — is your brand trustworthy? Experienced? Capable of delivering top-notch products and services? Given people’s short attention spans and lightning-fast first impressions, communicating clearly is critical. Information should be easy to read and digest. Look closely at each word: Do you really need it? Efficiency is key, as extra words can stand in the way and dull your brand’s primary selling points. Use headings and display text to organize sections and quickly let your readers know what information you’re providing. Instead of using long, rambling sentences, break up long lists into ordered or unordered lists. Just think short and sweet! As far as content goes, don’t forget to look beyond your blog or homepage. Make sure your ‘About’ and ‘Contact’ pages take the appropriate tone and convey the right information — for example, a lifestyle blogger will want to share her personal and family journey, while a real estate agent will likely be more focused on professional results. Download 210.2 Kb. Share with your friends:
|