Building Blocks of the. Modern Web. A Web Designer s Guide to modern Website Construction. A Trisel Communications Digital Communications Guide

Please download to get full document.

View again

of 28
0 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
Building Blocks of the Modern Web A Web Designer s Guide to modern Website Construction A Trisel Communications Digital Communications Guide There comes a point in every business where we have to completely
Document Share
Document Transcript
Building Blocks of the Modern Web A Web Designer s Guide to modern Website Construction A Trisel Communications Digital Communications Guide There comes a point in every business where we have to completely forget the practices of the past and throw ourselves squarely into the future - website design is no different Trisel Communications All Rights Reserved Created on apple imac with Apple Pages Unravelling the PAST Do you remember when websites looked like this? Although there was nothing intrinsically wrong with this type of layout, the truth is it just won t work in todays world. It looks dated, contains too much information in a cramped space and doesn t really give the visitor any direction on what they are expected to do. Basically, we web designers have had to make a transition from building shacks to constructing modern edifices. The Web Designer s Transition So, What s CHANGED In a word - EVERYTHING. The way people view the web, the amount of information they are prepared to absorb from a website and, of course, the purpose of visiting a website in the first place. All these are factors that have presented a challenge to the web designers of today, it s even more of a challenge for those who were around during the days of retro web design and are still trying to suck a living out of our rather fickle business. We no longer make those familiar layouts such as a banner at the top, a column to the right or left, a footer at the bottom and a content area in the middle. Neither do we create those mammoth menus across the top of the screen or down the side of the page. This sort of design just doesn t cut it in today s world. For a start, it s a design format that just doesn t work on portable and mobile devices particularly well. But, more importantly, the world has become lazy. People no longer want to browse a website. Instead, they go to a website for very specific reasons and once they arrive, they want you to take them by the hand and direct them to where they want to be. It s no small order, but it can be done. Hopefully, this guide will give you some food for thought on how best to layout a modern website that addresses the fast-paced, information-hungry world we now find ourselves in. This guide isn t about design as much as it is about LAYOUT. Design is a subjective matter, but layout is vitally important in tempering out temptation to slip into our old ways. Understand Layout, and you've got the whole business mastered. It s all about BUILDING BLOCKS In the old days of building shacks, life was fairly easy. Grab a few planks of timber, a hand-full of nails and use your trusty hammer to throw up something that meets the client s needs. Today, we have to approach the construction job from a different perspective. Today s materials consist of building blocks, shiny glass and aluminium panels and subtle colour schemes that don t shout at people. Using the digital equivalent of these materials in modern website construction may cause many to conclude that all websites look the same or boxy. Well guess what? that s exactly what the end user want s. It creates familiarity and commonality of function. No-one has to stop and think how do I get around this site?. Instead, they see a site that works fairly much like their computer or smart device. Have you looked at Windows 10 lately? What do you see? Boxes and blocks. The same is true of most smart devices. Everything has been iconised. Apps have been developed to work in exactly the same way as the devices they function in. So, why would anyone wan t to mess with something that everyone expects to see and something that is perfectly functional? The key today is to consider the user and their choice of viewing device. There is no room for sentiment here - give users what they expect and you will have happy users. The New Website ELEMENTS Since the advent of adaptive and responsive web design, we ve witnessed the birth of a whole stack of new terminology to describe the elements of a web page. Menus have given way to Navigational Structure. Different types of content have all been given their own special name and styling attributes. They represent the expectations of users. Break from those expectations and you run the risk of losing your site visitors fairly rapidly. So, lets start with a breakdown of our building blocks and the names they ve been given. BASIC STRUCTURES These are basic layouts - they represent the number of content areas in your building block and the way those areas are arranged. Structures apply to individual building blocks, not whole pages. Below are some examples of structures. Layouts are not a substitute for page grids. A grid can have as many as 12, 16 or even 24 columns and provide a base for structures. Essentially, a structure defines content areas and the amount of space between them. They can be based on the underlying grid, but don t have to conform to the grid exactly. A Base One Column Structure A Three Column Structure with equal width columns In these examples it will be seen that there is a good amount of space between content containers. Margins are also generous - something that is important in laying out clean web sites. A Three Column Structure with unequal width columns HEROES These are becoming increasingly popular in current web design. Heroes create a curtain-raiser for the website and are designed to create impact when the site first appears. They consist of a large image with some descriptive text and some form of Call to Action. That CTA can be a button that takes visitors to a specific part of the site, or it can be a simple down-arrow to move visitors further down the page. Heroes can also incorporate navigation, inset images and logos. Centred Hero incorporating navigation and logo. The Call To action is in the form of a button and a progress arrow. Below Two more examples. one with a text block on the left, the other with an inset image on the left and text block on the right NAVIGATION Navigation has always been a fundamental part of websites but, in todays world they have to be minimal. Menus are usually horizontal in order to maximise the width of the site at smaller screen sizes. In some cases (specifically mobile pages) menus are created as a hamburger menu which, when clicked, produces a full width drop down of navigation links. Typically, a menu will be in its own block and will usually include the website logo. Such a block will usually sit above a header block when a hero block isn t being used. Furthermore, the navigation block can be made to stick at the top of the page, leaving the remainder of the page to slide underneath the block. Due to the increasing popularity of mobile devices, website navigation is more commonly used to direct visitors to anchors on the main home page. This is more of a convenience feature as it enables visitors to quickly scroll to a page section of interest without having to swipe the page. One of the reasons that single page sites have become so popular is that users on mobiles will simply want to swipe down a single long page, rather than having to tap buttons and wait for new pages to load. Here is an example of a centred navigation block Here is an example of a right aligned navigation menu and a left aligned version. The logo would normally appear on the opposite side to the navigation. Here is an example of a navigation block for a mobile version of a web page, HEADERS Headers used to be in the form of banners at the top of web pages. Today headers have taken on a somewhat different meaning. Typically, a header is the first actual content section of the page - the part where the site-owner s story begins. In some sites, the header is often used as a substitute for the hero block. As such it s the first page section after the navigation block. However, headers can be used in addition to hero blocks in which case they will form the main introduction section of the website. Below are some typical header block styles. Header with image and single column text. Header with image and 4 columns of smaller images Header with image and three columns of smaller images CAROUSELS These are blocks that would typically also be used as headers but instead of using static images they contain a slider or carousel. Here are some examples. Carousel only with dot and swipe navigation Carousel with dot and swipe navigation and full width text block Carousel with dot and swipe navigation and and additional thumbnail navigation. ARTICLES Article blocks are used to tell your story, they comprise of a section of text and one or more accompanying images. There is a quite a degree of flexibility in how these blocks can be arranged. However, the key here is to let the pictures take the focus of attention and keep the text to a minimum. In article blocks where there are no images, make sure they are used at half screen width and used primarily for a some form of CTA. The CTA adds the focus element to the block and gives it purpose. If there is no purpose to a block of text without an image or CTA, then it probably shouldn t be in the site at all. Single image with adjacent text block AND Call to Action button Text block only AND Call to Action button. Note, this type of block should only occupy half of the page width in a PC site. This isolates the text and helps to highlight the CTA. Three image block with descriptive text under each image. DEVICES Device blocks in the context of websites are used where you wish to place an image that has no discernible image boundary - such as a transparent PNG of a product. The basic difference between device blocks and article blocks is the spacing of the image. In normal article blocks, the image boundary is placed to the left or right page margin. In a device block, the image is placed so the image content (the product itself) is placed against the margins. Device blocks work best as one click order blocks for product sales, or where a download is being offered. Here are two examples using actual digital devices. Device on the left with article and call to action on the right. The example block on the right also contains a background image. Device on the right with article and call to action on the left Note: with almost all of the blocks illustrated in this guide, there is a large amount of white space around and between elements. This is perfectly illustrated with device blocks. It serves to bring focus on the product and the CTA, whilst allowing for descriptive text to be included without causing distraction FEATURES Feature Blocks are commonly used to provide product or service feature information in short paragraphs, each illustrated with an icon. Additionally, feature icons can also serve as links to more descriptive pages if required. Four column feature block suited to wide screen devices Both of these feature blocks can be arranged one on top of another to create more extensive features lists. Three column feature block suited to mid-size screens. Feature lists arranged in two columns TEAM Team blocks are where you can put a human face into your website. These blocks are ideal for introducing your staff and management to site visitors. Team Members arranged horizontally in four columns Team Members listed in two columns Suitable for a single person Gallery Gallery Blocks are the way to display multiple, related pictures. They differ in their purpose to carousels and sliders in so far that they are designed purely for viewing images. Sliders, on the other hand should be used for story telling - a way to explain something in a mini slide-show. Galleries are good for displaying a range of product or artistic images that you want visitors to see if they choose. There doesn t have to be a story or a sales pitch involved. Common examples are portfolio sites that display the work of the website owner. A six mage Gallery in Circles with An eight image video gallery captions All of these galleries would normally open the images or videos in a pop-up lightbox which would allow the user to scroll through the images and videos without closing the lightbox An eight image photo gallery without captions An eight image photo gallery with captions CALL Call blocks are simple call to action buttons, with or without some descriptive text. In most cases the description would form part of the call to action button. The purpose of a call block is to isolate the call to action to a block all of its own in order to get the attention of the visitor. Single Button call block Call block with descriptive text. It could also be a sign up form where the descriptive text is substituted for an address form field. PRICING Pricing blocks are good for when you have a number of products or services that require feature comparison. Multiple pricing blocks can also be used to create the basis of a product order page. Just like other blocks, it s important to make sure there is plenty of space around and between the content items. this will help to give focus to individual items rather than just seeing a listing of products. Pricing blocks should each have their own CTA button, such as a buy now link. Three column pricing block Two column pricing block SOCIAL & TESTIMONIAL Social Media and testimonials are becoming an increasingly important part of web marketing. As a result, social networks and testimonials are worthy of their own content blocks within a website. By isolating social network icons within their own blocks, visitors are more likely to see them and interact with the links. Testimonials are also important because they lend credence to the product or service on offer. Social Network Block Testimonial blocks with and without image Brand A brand block is invaluable if your site is promoting products by, or selling product/service to well known brands. It represent a convenient, one stop glance at all the brand names the website is associated with. Two Examples of brand blocks. The first one is ideal where you may have several brands you need to display. By combining several brand boxes you can create a multiline grid, thus ensuring plenty of isolation space between the rows of brands. FOOTER Footer blocks are the finale of your web page. It s the final opportunity to get your visitor to interact with the site owner - don t waste it. At the very least, duplicate any navigation links from within or at the top of your web page. Also, use the space to give access to information to the die-hard web surfers who may want to know more about you or the company. Traditionally, sites were cluttered with prominent pages that gave the life story of the business founders and had loads of guff about matters that aren t really of interest to the majority of site visitors. However, there are those few visitors who may just want to know. So, your footer is the place to put links to other pages that contain your historical archives, life story or family tree. Certainly, this would be the place to link to more important information pages such as your privacy policy or terms of business. Typical Footer Block laid out in four columns How do these blocks help in Website Design Having just scoured the previous pages, I can almost hear the howls of disapproval from the true designer brigade. How can a website containing such basic and mundane blocks be made to look good and a little different from all the rest out there? its a fair question, but once you understand what these blocks are about, you really can let your creative juices run wild. You see, the purpose of the blocks is to give you structured building components that let you put a well laid out site together that can work on a number of different devices. This is achieved by designing each individual block in isolation, and then laying them out one on top of the other to create the final web page. This doesn t, however, mean creating a visual appearance of rectangular blocks Look at the web page illustrated on the right. This page is made up of blocks as described in this guide - I ve highlighted them for clarity. What this illustrates is that each block can be styled with shaped background images (PNG s) in which the non image area of the background is transparent. By arranging the blocks over a static fixed browser background image (the wood), we create the illusion of a page containing angled shapes. So, with a little bit of creativity on the part of the designer, an almost infinite number of design possibilities are available. Here is another example. In this design, the blocks have been created with the triangular coloured and image elements as backgrounds to the individual blocks. Once the design is complete, the two transparent PNG s (the woman at the top and the man at the foot of the page) are simply overlaid on top of the final page. Again, I ve highlighted the individual blocks used in this design. The transparent overlaid PNG s are highlighted in Grey. The key to this approach is to know what the final page is intended to look like BEFORE creating the individual blocks. By doing this, you can focus all your design energies into designing the blocks. All you then have to do is assemble the pieces together like a jigsaw puzzle. So why do it this way at all? Simple, when it comes to laying out a mobile version of the site, all you have to do is change your block sizes and rearrange the content to better suit the device width. For example. A feature block for the wide site can be converted to a narrower block for a mobile site. Here we have the same content simply rearranged to better suit the device we re designing for. Because this is being done on a block by block basis, final site assembly becomes so much easier. Just like on the wide version of the site, the mobile blocks are laid out one on top of the other in the same way. Here are two more examples. the one on the left makes use of blocks containing areas of transparency where the fixed image backgrounds can show through. The one on the right is a simpler design but one that adds some shape as the page scrolls towards the bottom. Both create variety and focus. The one thing that all our examples have in common is that allimportant S P A C E around the elements. How to Create and Use BLOCKS For those that have WYSIWYG website creation tools, creating blocks is very simply. Each block type can be laid out in the development application and saved as a reusable asset. If your particular application doesn t have an asset-creation facility, all you have to do is make an Asset Website Project This is essentially a website project where each page is a block. Furthermore, you can make copies of your Asset website and adjust the copies for the different devices that you re likely to design for in the future. For those that use coding methods to create websites, each block can be created as a piece of reusable code and saved as individual text files. When it comes to creating a website, it s just a question of assembling the blocks into a new project - a sort of wire-framing of the site. You can then get into styling each individual block to give the overall effect you want to achieve from your website. When setting out your blocks, try to view them as layered documents. You need to start with a background element that can be filled with either a colour or a pre-prepared image. For example, if you want to create a block with a slanting image background, you would create the image as a rectangular image with parts of it remaining transparent in an image editing application and save it as a transparent PNG. This would then be added to the background of one of your rectangular blocks. (see the sample image below). Above your background element you would add placeholders for text and/or graphics. These would then be grouped and added to your assets collection, or saved as part of an asset website project. If you prepare all of your blocks this way, in advance, your website creation time
Similar documents
View more...
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks