div.slicknav_menu {display:none;}
        .nav { border-bottom: 0; margin: 0; background-color: #0CF; }
        .nav li a { display: block; text-decoration: none; padding: 0.75em; }
        .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 30px; }
        .nav { border: 0; }
        .nav ul { background: #0CF; margin-top: 0; list-style: none; padding-left: 0px; }
        .nav li { float: left; position: relative; }
        .nav li a { border-bottom: 0; }
        .nav li a:hover, .nav li a:focus { color: white; text-decoration: underline; }
        .nav li ul.sub-menu, .nav li ul.children { margin-top: 0; border: 1px solid #ccc; border-top: 0; position: absolute; visibility: hidden; z-index: 8999; }
        .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 10px; border-right: 0; display: block; width: 180px; border-bottom: 1px solid #ccc; }
         .nav li ul.sub-menu li ul, .nav li ul.children li ul { top: 0; left: 100%; }
        .nav li:hover > ul { top: auto; visibility: visible; }
        /* ########################
        Content styles
        ######################## */
        main#main img { max-width: 100%; height: auto; }
        img.alignright { float: right; margin: 0 0 1em 1em; }
        img.alignleft { float: left; margin: 0 1em 1em 0; }
        img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
        .alignright { float: right; }
        .alignleft { float: left; }
        .aligncenter { display: block; margin-left: auto; margin-right: auto; }


/*==================== Nav ====================*/
    .nav { float: right; background: none; margin-top: 30px; }
    .nav ul { background: none; }
    .nav ul a { color: #000; }
    .nav ul a:hover { color: #000; }
    .nav ul li:last-of-type a { padding-right: 0px; }

/*==================== Body ====================*/
    .wp-block-image figcaption { color: #888888; margin-bottom: 30px; }
    .wp-block-image.size-full { margin-bottom: 30px; padding: 5px; background-color: #00aade; }
    .wp-block-image.size-full figcaption { text-align: center; color: #fff; margin-bottom: 10px; }
    .article-header img { padding-bottom: 1.5em; }



/*==================== Home Page ====================*/
    .blog-grid { justify-content: space-between; }
    .blog-grid .d-1of3 { width: 30%; flex-basis: 30%; }
    .blog-grid h3 { font-size: 1.1em; line-height: 1.3em; padding-bottom: 0px; }
    .blog-grid p.post-date { padding-bottom: 5px; font-size: 0.8em; }
    .blog-grid p.post-excerpt { font-size: 0.8em; }

    .blackOverlay { background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; display: block; position: absolute; top: 0px; z-index: 1; }

/*==================== Pagination ====================*/
    .pagination, #content .pagination { text-align: center; width: 100%; clear: both; padding: 20px 0px; }
    .pagination ul, #content .pagination ul {display: inline-block;background-color: white;white-space: nowrap;padding: 0;margin: 0;clear: both;border-radius: 3px;}
    .pagination li, #content .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; }
    .pagination a, .pagination span, #content .pagination a, #content .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 14px; font-size: 14px; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #2592E9; }
    .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #2592E9 !important; color: white !important; }
    .pagination .current, #content .pagination .current { cursor: default; color: #fff !important; background-color: #2592E9; }
    .pagination .current:hover, .pagination .current:focus { background-color: #2592E9; color: white !important; }


What are website wireframes? an example of a wireframe

What are website wireframes?

Wireframes have been around for years and chances are you have been creating them for all sorts of projects – not just web / website related ones. It is essentially a name given to the process of drawing out rough sketches of what the website will look like, so all of those pencil sketches you have been doing when thinking about your website, poster, business card etc could be classed as Wireframes.

There are varying levels of wireframes from the simple diagram showing how many columns the website will have to the complex coloured designs that overlaps with fully fledged website design, however as a tool the middle ground provides the most benefit to the project team. This method of representing the design in its simplistic form enables the whole project team to review the structure of the page and make changes quickly as the changes can be implemented in a fraction of the time required to adjust a full website design. It also enables members of the team who have a good understanding of the project but not design to produce a visual guide for the designer to work from – this could be the client who wants to define the structure of the site before paying for a full design or a web developer ensuring the website has a sound SEO strategy in place.

The speed at which the design can be reworked means the project team can create an initial wireframe of the site which is submitted for review by the internal project team or even the client to gain feedback, with the results the wireframe can be updated to address the feedback. If you are familiar with Agile Programming wireframes allow the same methodology to be applied to the design process.

Looking past clients changes wireframes give the website developer input on the design ensuring that it is functional and works with the sites SEO strategy, it also means that all elements on the page go through a review process so ‘design’ features that look good but add several hours of additional development time can be removed to make the project more streamlined.

 What tool should you use to create a website wireframe?

While it is possible to use software you already know (word, powerpoint and photoshop for example) there are some dedicated wireframing tools available, my favourite is Pencil which is a free program that runs on Mac, Windows and even Linux it is also available as a firefox plugin. I would suggest downloading the independent program so that it is not affected by Firefox updates.

Being free and available on all the major platforms it is the perfect tool to aid the creation of wireframes by the creative team as all members of the team (and even the client!) will be able to edit the wireframes if required.

Example of the Pencil interface

Resources

33 Great Examples of Web Design Sketches – some really nice examples of hand drawn wireframes showing that you dont need to use a computer to achieve good results!