Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 14 2013

06:30

May 31 2010

07:00

Design & Build a Grid Based Web Design with CSS

I’m currently working on a new Wordpress theme called ♥grid, which lives up to its name with a clear grid based design. Follow this step by step walkthrough of the design and build process, right from the initial Photoshop concept, through to writing the HTML structure, styling up with CSS then adding clever functionality with the jQuery library.

View the LoveGrid demo

The ♥grid concept is pretty minimal in its design, using a limited colour palette of light grey, dark grey and a highlighting colour of red. The background of the design makes use of a subtle texture for a tactile feel, but the main feature is the strict grid based layout. The design makes use of a 24px baseline and 6 column grid, which becomes a design feature itself as it remains visible as part of the design.

View the demo

The design concept

The design of ♥grid started in Photoshop. I always begin my website designs with a fairly large canvas of around a 1680px wide, this helps me gauge how the site will look on a typical widescreen monitor.

The background of the canvas is filled with a light grey tone, then given a touch of texture using the Photoshop Noise filter at just 3%.

A new 24×24px document is created, in which the repeating pattern for the baseline grid is created. Just a single 1px line across the lower edge of the canvas is all it takes. This pattern is then defined as a pattern.

The pattern is then filled across a new layer and set to Multiply to render the white area transparent. The vertical grid lines are drawn manually, then duplicated and moved by hand. The cursor keys nudge the lines by 1px, or by 10px while the Shift key is held. Gutters are measured at 21px, and the column widths are 139px.

All the vertical lines are grouped together once six columns are created, then aligned centrally on the document. The basic grid is now ready to be decorated with the actual page elements.

The logo comes first in the top left corner. A selection is made within the first column and filled with red.

The ♥grid logo is then placed inside the logo container, and aligned on the baseline grid.

Navigation elements are then placed on the same baseline, and aligned to the right of each of the five remaining columns. Being links they’re given a red colouring.

Being a theme for a blog the content is made up of sample blog posts. The first post is laid out and spread across columns two to six. Georgia is used for the post titles as a stark contrast against the Helvetica body text. The body text itself is edited so the line height matches the height of the baseline grid.

The first column is reserved for some meta information about the post, such as post date and category. These are laid out in a lighter grey to give less prominence, but at a larger type size. The 24px line height is maintained to keep the consistent leading across the design.

Read more buttons are styled up with a red background and serif Georgia text to give the links extra prominence.

The design begins to take shape as two sample blog posts show the white space and structure across the layout.

The lower portion of the design switches to a darker grey, giving a contrasting footer area. A large selection is filled with a dark grey and given the same noise treatment as the background.

The footer area features a range of lists, these lists begin with two short lists of Categories and Social links. Headers are set in Helvetica, while the links are treated with Georgia at double the line-height.

Links in the lower portion of the design are set in white to give contrast against the dark grey background. The first two lists fit within a single columns, while the second two span across two columns.

Now the design concept is complete, the individual images can be exported ready for the building stage. This starts with the repeating background graphics, taking into account the gridlines so they are recreated when the graphic repeats.

Being a lightweight design, the number of image files is pretty low. Two versions of the background are exported, one with, and one without the grid. This will be developed as a feature at a later stage where the user can toggle the grid lines on and off.

Creating the HTML structure

The next stage of the build is to write out the HTML structure. This begins with a typical webpage layout with Doctype, head and body.

The top portion of the design is contained in a <div> with an ID of upper, this will be a hook for the baseline grid pattern in the CSS stage. The logo and navigation list are written out as <h1> and <ul> elements.

A <div> with an ID of main contains the main content, and each post is separated with individual <div> elements. Inside each post the content is split into two <div> elements, so the post content and post details can be floated side by side. Despite the details coming first in the design, they are written second in the HTML to keep a logical order of information, these can be positioned correctly by floating them with CSS. Post titles are laid out as <h2> headings, following on from the <h1> used in the header. <p> elements with a class of btn are used to represent the read more buttons.

In the lower portion of the design, each panel is laid out in its own <div>, with <h3> elements identifying the lists of anchor links.

After the four list panels, the three credits are laid out in a <ul>. Information is given in the anchors, but the actual logos will be displayed using CSS. Finally a back to top link is placed in a <p> element. This back to top link targets the #header, but will later be enhanced with jQuery so the page scrolls automatically, but it’s important to maintain the functionality using a plain old same-page anchor for those without Javascript enabled.

Styling the design with CSS

With the HTML strucutre in place, the design can now be styled with CSS to match the original Photoshop concept. The CSS starts with a reset to remove any browser defaults, then begins styling up the page body. A global font style of Helvetica is set, followed by a line-height of 24px to match the baseline grid. The baseline grid itself is added as a background-image to the body, whereas the vertical gridlines are set as background images on the #upper div.

The <h1> is given specific dimensions and a red background to match the design. The”Show/Hide Grid” button in the header is styled accordingly with the small icon as a background image, but is set to visibility:hidden;. Being a function that relies on Javascript, this button will be made visible again using jQuery so users that don’t have Javascript enabled won’t see it. Navigation <li> elements in the header are floated side by side and given specific widths and margins to match the size of the grid columns and gutters.

Fonts are styled up in the #main section, with headers being set in Georgia, body text set in grey Helvetica and buttons set with a red background. Each elements also has a 24px bottom margin to bump the following content down an extra line on the baseline grid.

Each post <div> has 48px of bottom padding, this equates to two baselines as well as the 24px margin on the paragraph elements, leaving three lines between each post. The content and details divs are floated side by side, and their contents styled appropriately in accordance to the Photoshop concept.

The #lower and #footer sections of the design are given new background images to generate the darker footer styling. Font styling for the footer is then reset, making headings a subtle grey colour and links in a more legible white against the dark background.

The four links panels are all floated side by side and given left margin to space them according to the grid gutter. The footer already has padding to take into consideration the first gutter, so the margin on the first div is removed with the :first-child pseudo selector. Panels one and two are set at the width of one column, while panels three and four span across two columns so are given a greater width, as measured from the Photoshop document. The list of links in each panel is styled to match the concept, with type set in Georgia at a doubled line-height.

The credits list items are floated and given the appropriate margin, as well as the sprite background image. Each individual <li> is then given specific background-position settings to display the correct logo. Finally the back to top link is floated over to the right, given the smaller font size and treated with a background image to render the small arrow. A small 3px margin helps tweak the text into place on the grid, ensuring the link is aligned by the text baseline, not the bottom of the icon.

Enhancing with jQuery

The design and webpage is now nearing completion, with the HTML and CSS page matching the Photoshop concept exactly. Next up is the extra Javascript functionality. Three Javascript files are reference in the HTML head, the jQuery library, the jQuery Cookie plugin and my own scripts.js file, which will include all the handwritten code to activate everything.

The first function to be added is the auto-scrolling back to top link. This code states that when the #back-top anchor is clicked, animate the body and html to the position zero. return false; is in place to stop the original anchor from working, so the effect relies only on Javascript.

Next, the “Show/Hide Grid” button functionality is created. First, the button needs making visible after the CSS was set to visibility:hidden; earlier. Then the toggle() function gives commands for when the button is turned on and off, these include adding or removing the class nogrid to the body and changing the text of the anchor.

In order for the effect to work, extra CSS styling needs to be added to actually change how the page looks when the page body has the nogrid class. This is where those alternative background images come into play.

The effect works great, when the user clicks the “Show/Hide Grid” button, the grid is toggled on and off, but once the page is refreshed, or a new page is visited the grid comes back. In order to save the setting the jQuery Cookie plugin needs setting. $.cookie("grid", "hidden"); creates a new cookie named grid with the value of hidden when the button is clicked. A couple of lines of jQuery then check if the cookie is present, and if so the addClass() and .html() functions are repeated. Now whenever the user visits the effect will be in the same state as they left it.

View the LoveGrid demo

View the demo

May 01 2010

11:00

18 Wireframing, Mockup And Prototyping Tools To Plan Designs

Title-free-premium-wireframing-webdesign-toolsI will keep repeating how important is to plan your webdesign, sitemaps, draw flowcharts,wireframes before even start to do actual functional and design planning! Since I am deeply researching this topic myself, this time I found the most popular wireframing software available.

Just 3 of tools I found were free, but every tool has free trial or basic plan so you can definitely try and test it yourself for one time projects.

For me – I don’t do redesigns too often, so I don’t need such tools daily, but for design companies I think one of these tools will be life and time saver from drawing, planning and collaborating view – worth spending some money for! To get started I suggest to read also previous planning article I did – Know How To Plan Your Website Redesign & Get Inspired.

1. Lovely Charts

  • 100% free
  • Online application
  • Create flowcharts, sitemaps, wireframes easily!

With Lovely Charts’ extremely simple and intuitive drag’n drop drawing mechanism, you’ll be able to focus on what really matters. You won’t have to draw boxes or arrows, and you won’t have to worry about what symbol to use.

Lovely Charts’s biggest strength lies in its innovative workflow and in its ability to generate lovely diagrams in minutes, with no effort.

Lovely-charts-free-premium-wireframing-webdesign-tools

2. Pencil Project

  • Completely free tool
  • Option to use it as Firefox addon
  • Linux/PC/Mac support
  • Lightweighted

The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Top features:

  • Built-in stencils for diagraming and prototyping
  • Multi-page document with background page
  • Inter-page linkings!
  • On-screen text editing with rich-text supports
  • Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.

Pencil-project-free-premium-wireframing-webdesign-tools

3. Serena Prototype Composer

  • Completely free software!
  • Get Business Requirements Right
  • Build Usable Applications
  • Move Seamlessly From Prototype to Coding

Prototype Composer is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

View product demo screenshots

Serena-free-premium-wireframing-webdesign-tools

4. MockFlow

  • Has free basic pack with limited options, but still free!
  • Modern interface
  • Premium version costs 59$/year

MockFlow is an online tool for creating wireframes of software and websites. It helps to enhance your planning process by enabling to quickly design and share interactive UI mockups.

Can be used as desktop application and one more great thing you can collaborate real-time with fellow collegues and discuss development process right in the application if you use premium account.

Mockflow-free-premium-wireframing-webdesign-tools

Little video demo about this software:

5. Axure RP

  • 30 days trial version
  • Premium version costs 149$/year with full support
  • Works on PC/Mac

Axure RP enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites. It provides the features you need to get started quickly whether working alone or collaborating with your team.

Used by user experience professionals, business analysts and product managers in over half of the Fortune 100, leading agencies and thousands of small and medium businesses around the world. Axure RP has become an essential tool for successful application design.

Axure-free-premium-wireframing-webdesign-tools

Watch video tour about Axure RP

6. Balsamiq

  • Looks handrawn and sketchy
  • Easy to use in team as collaboration tool
  • Premium desktop version costs 79$, which is one time payment
  • Online and desktop application

Using Balsamiq Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

Mockups is designed to help you and your team or clients iterate on wireframes as early in the process as possible, when it’s cheapest to do so.

Balsamiq-mockups-free-premium-wireframing-webdesign-tools

Watch video demo about this software:

7. HotGloo

  • A lot of tutorials to help you get started
  • Online application
  • Modern and user friendly interface
  • Chance to test app using free plan
  • 14$/month

Great application, with a lot of tutorials, forum, active twitter account and Faqs/Help section! Interface is very modern as well, one of my favorite applications by far.

Hotgloo-free-premium-wireframing-webdesign-tools

8. Mockingbird

  • Lot of great features
  • Modern design and interface
  • Powered by Cappuccino: no Flash needed.

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

Mockingbird-free-premium-wireframing-webdesign-tools

Launch and test it now!

9. ProtoShare

  • Online Application
  • Modern interface
  • 30 days free trial
  • $29 per user/month

ProtoShare is an easy-to-use, collaborative, Web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time.

Big or small, the key to successful projects is getting people talking and cooperating early. ProtoShare helps all stakeholders — Web developers, account execs, management, marketing, and clients — get on the same page before money and time are sunk in various development dead ends.

Protoshare-free-premium-wireframing-webdesign-tools

Check out online video tour explaining good features about this product.

Protoshare-demo-free-premium-wireframing-webdesign-tools

10. Gliffy

  • A lot of features built in this online software
  • Free basic plan with no time constraints!
  • 5$ per month premium account

You can use Gliffy to build almost everything, I don’t like though there are too much features. If I would need tool just for wireframing I think I would choose different one, because there I have too many distractions and options I don’t need.

With Gliffy online diagram software, you can easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, wireframes and more.

Gliffy-free-premium-wireframing-webdesign-tools

11. Justinmind Prototyper

  • Mac,Pc support
  • $495 one time payment license
  • Free 15 day trial
  • Pretty expensive and short trial

Wireframes and mockups have been used to think and define websites or applications before their implementation. But with the coming of the web 2.0, dynamic websites and RIA, you need to think everything from UI to conditional navigation or the type of interactions you want to use. Mockups or even clickable wireframes aren’t enough anymore.

Justinmind Prototyper 3.0 is a powerful wireframing tool designed to build fully functional dynamic prototypes without any coding, both on Windows and Mac.

Justinmind-free-premium-wireframing-webdesign-tools

See also short video demo:

12. JumpChart

Different than classic wireframing tools, because of functions, you can change less hierachy, but it’s very easy to build sitemaps and separate content in categories there.

Use Jumpchart to quickly plan out the navigation of your site by adding pages, and sub-pages. If you change your mind, easily drag pages to new spots within the site hierarchy. There is no better way to organize the content for your website.

Watch their online video tour.

Jumpchart-free-premium-wireframing-webdesign-tools

13. Pidoco

  • Clickable Wireframes
  • Fast and easy Prototyping
  • Easy Remote Usability Testing
  • No Software Installation
  • 31 day trial, 3 plans – lowest 7 eiro/month

Integrate usability testing into your production cycle by making use of pidoco°’s easy-to-use testing module. You will be developing applications which will work with the end-user as well as your clients whilst increasing the turnover!

Real-time collaboration with several co-workers will optimize communication patterns and will decrease expenditures in many areas within your production team!

Pidoco-free-premium-wireframing-webdesign-tools

14. iPlotz

  • Free demo
  • 15$ per month premium plan

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Check out video tour.

Iplotz-free-premium-wireframing-webdesign-tools

15. FlairBuilder

  • 24$ per month
  • iPhone prototyping
  • 15–day free trial

FlairBuilder is built such that you will feel comfortable with the application’s user interface and complete each task fluently and efficiently.  That is why you will find many common elements such as the toolbar, the menu, a component palette, a context menu for common tasks and a set of handy keyboard shortcuts. All these to simply let you focus on you job and get it done as fast as possible.

Flairbuilder-free-premium-wireframing-webdesign-tools

16. GUI Design Studio

  • Free 30 day trial
  • Built for Microsoft Windows
  • Express license – $129

GUI Design Studio is a graphical user interface design tool for Microsoft Windows that you can use to rapidly create demonstration prototypes without any coding or scripting.

Draw individual screens, windows and components using standard elements, connect them together to storyboard operational workflow then run the simulator to test your designs. Watch video demo overview.

Gui-studio-free-premium-wireframing-webdesign-tools

17. OmniGraffle (Mac, iPad)

  • 14 days trial
  • License costs $99.95
  • Work only fro Mac, iPad

Need a diagram, process chart, quick page-layout, website wireframe or graphic design? OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click.

Whether you need a quick sketch or an epic technical figure, OmniGraffle keeps it gorgeously understandable. Watch introduction videos and tutorials here.

Omnigraffle-free-premium-wireframing-webdesign-tools

18. Microsoft Visio

  • Free 60 day trial
  • License – $260
  • Available just on Windows platform
  • One of the most popular and comprehensive prototyping tools

Microsoft Office Visio 2007 makes it easy for IT and business professionals to visualize, explore, and communicate complex information. Go from complicated text and tables that are hard to understand to Visio diagrams that communicate information at a glance. Instead of static pictures, create data-connected Visio diagrams that display data, are easy to refresh, and dramatically increase your productivity. Use the wide variety of diagrams in Office Visio 2007 to understand, act on, and share information about organizational systems, resources, and processes throughout your enterprise. View video tour.

Microsoft-visio-premium-wireframing-webdesign-tools

Did you make your pick? Which was it? Let us know in comments!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...