{"id":9530,"date":"2014-06-01T12:52:28","date_gmt":"2014-06-01T19:52:28","guid":{"rendered":"\/?p=9530"},"modified":"2017-10-13T08:24:24","modified_gmt":"2017-10-13T15:24:24","slug":"prototype-website-foundation","status":"publish","type":"post","link":"https:\/\/needmoredesigns.com\/prototype-website-foundation\/","title":{"rendered":"From Prototype to Website with Foundation"},"content":{"rendered":"

Lately we\u2019ve been using Zurb\u2019s Foundation framework<\/a> for most of our projects.<\/p>\n

We wanted to standardize on one framework to make it easier for everyone. And we wanted a framework that was well-suited for many parts of the process. We keep it in a git repository and start from there on new projects. It has Foundation along with a bunch of other stuff we often use, and our preferred defaults for some things.<\/p>\n

Here\u2019s how we use it.<\/p>\n

Sketching<\/strong><\/h3>\n

We don\u2019t use Foundation for that. Often we just use Marvel<\/a>. The basic plan is free and you can take photos of your sketches with your phone, then turn it into a click-able prototype. It\u2019s amazing.<\/p>\n

\"Sharing
Sharing paper sketches with Marvel is pretty easy<\/figcaption><\/figure>\n

Wireframing<\/strong><\/h3>\n

When it comes time to wireframe a website, Foundation is an excellent choice. There are a number of ways to grab its source files, and applications made for this kind of thing often include easy access to the latest version.<\/p>\n

We generally use Sublime Text<\/a> or Coda<\/a> for working on code. At this point, you\u2019re building off lots of their great templates<\/a>. These are amazing prebuilt chunks that show you good ways to get started, and using something like Hammer for Mac<\/a> gives you a great way to include standard headers and footers on all the pages, link things together easily, compile your SASS and image files, and more.<\/p>\n

\"Some
Some great templates in Foundation for wireframing and prototyping<\/figcaption><\/figure>\n

This is a good time to set up your grid structure. The defaults that come with Foundation are good, but we like to set the maximum width for a typical website to be much wider than what Foundation limits you to by default (1440px, vs about 1000px as a default).<\/p>\n

Also very helpful are simple shapes with panels<\/a> and simple tools like equalizer<\/a>. This makes a text editor an extremely powerful design tool because you really are working only with content.<\/p>\n

When you\u2019ve built a wireframe, you can post it via a button in Hammer, which gives you a short URL that works for two weeks. You can also grab the built ZIP file to share, or post it elsewhere.<\/p>\n

An interesting option is to start a git repository and put this in a branch. Or put it in an early \u201crelease\u201d of your project. You are using git, right?<\/p>\n

Prototyping<\/strong><\/h3>\n

It\u2019s trivial to link between pages using includes and variables in Hammer. And the simple navigation options (top bar, sidebar drawer, inside-page, and more) in Foundation are great for quickly prototyping because the general behavior comes remarkably close to what a real website would do.<\/p>\n

Foundation doesn\u2019t have any animation library, and these can be really helpful for prototyping because they quickly give you an idea of how it will feel<\/em>, which is something that\u2019s always lacking from a static mockup. A library like animate.scss<\/a> requires some work outside the HTML pages\u2026 unless of course you set up your common defaults ahead of time, in, say, a custom.scss<\/code> file. Then you can just add classes to your HTML elements to get whatever behaviours you typically use.<\/p>\n

\"Good
Good use of simple effects add a lot of life to a prototype<\/figcaption><\/figure>\n

For shapes that can be used as if they were a stencil set, the included icons<\/a> and social icons<\/a> are handy. They are brilliant for prototyping because they are used as an element in HTML with a class describing the glyph. So you never have to touch the CSS.<\/p>\n

In the prototyping stage, we basically try to work quickly and never touch the CSS\/SASS at all. We\u2019re just building a bunch of HTML pages. This keeps it really simple. The automatic reload<\/a> and image placeholder<\/a> features of Hammer comes in handy and works great with a text editor and web browser side-by-side.<\/p>\n

One thing we haven\u2019t used much, but might be very handy, is the joyride<\/a> component of Foundation. It could be used to walk viewers through your ideas on a particular page, if appropriate.<\/p>\n

Designing<\/strong><\/h3>\n

Foundation includes a _settings.scss<\/code> file that defines how all grids, typography, widgets, and other elements behave. It\u2019s a straightforward format that you can edit quickly to set up proper defaults for your whole project.<\/p>\n

\"Change
Change one number, and all the rounded corners change, everywhere<\/figcaption><\/figure>\n

Foundation lacks a good way to work with vertical rhythm of text, doesn\u2019t have inbuilt calculations like golden ratio and such. We usually wrap in a simple parallax<\/a> or animation<\/a> or background video<\/a> library to get closer to the visuals we want.<\/p>\n

We love to work with real images at this stage\u2026 but if we can\u2019t we at least upgrade our image placeholders<\/a> to look somewhat like real images might.<\/p>\n

For a style guide, the kitchen sink<\/a> page is a good reference. We include the relevant chunks of that page, for the things we\u2019re designing, as well as examples of the colors and fonts we\u2019re using, and some dimensions and notes. This becomes a document maintained throughout the life of a project, and becomes a handy reference.<\/p>\n

\"The
The “Kitchen Sink” is a decent starting point for a style guide<\/figcaption><\/figure>\n

Developing<\/strong><\/h3>\n

While Foundation has a load of strengths for getting started building sites, and for those less savvy about the more technical aspects of coding a modern website, it grows nicely into something that is well-written and often best-practice.<\/p>\n

One of the nicest things about Foundation is that it supports both a declarative (a bunch of crap in your HTML) style of quick-and-dirty coding, and a semantic style. The semantic style lets you take all the crap out of your HTML and declare it in SASS. This makes you feel much better and makes your output a lot cleaner.<\/p>\n

The whole system is built from very modular SASS and JavsScript components, so that you can choose just the parts you need. In this way it is not going to bloat your project any more than an equivalent set of libraries would. The pages load fast.<\/p>\n

Since we most often build sites with WordPress, our favorite has become the JointsWP<\/a> theme.<\/p>\n

Conclusion<\/strong><\/h3>\n

We are huge fans of Zurb and all the work they’ve put into Foundation 5. In our experience, no other framework can take you through so much of your process and grow with the project. We’re certainly looking forward to what’s next<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Needmore has been using Zurb’s Foundation framework for most of our projects. Here’s the why and how.<\/p>\n","protected":false},"author":2,"featured_media":9533,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[665],"tags":[52,163],"acf":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/needmoredesigns.com\/wp-content\/uploads\/w-z\/wallpaper-61680x1050.jpg","_links":{"self":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/9530"}],"collection":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/comments?post=9530"}],"version-history":[{"count":0,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/9530\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media\/9533"}],"wp:attachment":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media?parent=9530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/categories?post=9530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/tags?post=9530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}