Web Archives - Untame

Jul 20 2012
0

Web Design: The Z Layout

Posted by | Tutorial | No Comments

Let’s take just a minute and think. Why do we create web sites at all? The web is a vast ecosystem of resources that span a near limitless level of purposes. However, one thing that almost each and every site has in common is its desire to spark something in its visitors. Take a look at some of your favorite sites, I bet that you will find some pretty common patterns to the way that each site lays its content out. This is for good reason, over the years designers, developers, ad agencies and more have performed studies called usability tests. Usability tests exist to inform content creators on how users interact with specific pieces of design. By in large, usability centers itself around the idea of encouraging a user to take action! So, through understanding gathered by these tests a few “best practices” have been shared amongst designers that tend to encourage users to do exactly that. This is where the “Z” layout comes in.

What is the Z Layout?

Take a look at the figure above. The Z layout is a design understanding that attempts to get ahead of the user, abstracting any distraction and presenting encouraged action as quickly as possible. Let’s walk though the steps of anticipated interaction a user will have with a site properly laid out in this manner.

  • Step 1: Brand or Logo Recognition
  • Step 2: Relevant Links Related to the Page, Company or Product
  • Step 3: Information gathering – What is the immediate benefit of this product or service?
  • Step 4: Action – Allow for the visitor to take immediate action related to the product being shown.

How about I prove it to you? Let’s take a look at a few popular sites that maintain a “Z” layout.

Untame

Spotify

Rule.fm

Facebook (a smallish social network… these guys just might make it!)

Take notice, in each of these pages the layout has been customized for users to follow the steps of “Z” in an organized and logical progression. There are some cases, such as news sites, that the “Z” layout may not be totally appropriate. However, if you are creating a website wherein you want to encourage your users to take action, then this design method is a proven way to encourage visitors to convert to customers.

The Z method is so usable due to its inherent practicality. Think about it; when you read a book, do you start at the bottom of the page and work your way to the top? This design layout takes advantage of the way that we have been taught since childhood to interact with content, and if it isn’t broken there is no reason to fix it.

Thanks for taking the time to read through this article on web design theory. We sincerely hope that it will help to inform you in your web design or development journey. We would love to design an incredible website for you or your company. Do you need to increase conversions? Get in touch with us and we will help create a custom solution specific to your needs.

Jul 16 2012
0

Weekly RoundUp: 10 Great Web Design Learning Resources

Posted by | News, Tutorial | No Comments

So… You want to learn how to design your own websites on the internet, but don’t know exactly where to start? Let me tell you, I was in the same position that you are in years ago, and I know how important it is to get started with learning the right things in a good order. So that is what we are going to do today. Below you will find a few of the great resources to get you off and going in the right direction.

What You Need To Learn:

Don’t Panic! The world wide web is vast to say the very least. Before you know it you might come across blog posts, forum threads and entire books pointing you in one direction or another. However, the best way to get into this pool is to simply dip your toe in ever so gently. Let’s talk bottom line, the goal is to be able to put a page with some text and who knows, maybe even a few pictures on the internet. In order to do that you really only need to know a few things…

Put It On The Page: Basic HTML

HTML is the base of all web efforts. HTML tells the browser what content it should display on any given page.  Remember: HTML Controls the Content.

“HyperText Markup language: a set of standards, a variety of SGML, used to tag the elements of a hypertext document. It is the standard protocol for formatting and displaying documents on the World Wide Web.”

30 Days to Learn HTML & CSS (Free)

Perhaps one of the best and most comprehensive video series on the subject. I only wish that I had something like this to follow along with while I was first learning web design

W3 Schools HTML Tutorial (Free)

A still relevant standby. The W3 schools, while not always the subject of praise from the web development community can always be counted on for quality “best practice” information.

HTML & CSS – The VERY Basics (Free)

Chris Coyier is in many ways an “OG” as it pertains to web design and development tutorials and this one is no different. Follow along with Chris as he leads you step by step in understanding the basics.

 

Make It Pretty: CSS

CSS or Cascading Style Sheets allow for a designer to alter the appearance of the HTML placed on a given site. A CSS document will usually be called something like “Style.css” and linked to at some point at the top of an HTML document.

Remember: CSS is for colors, layout and more. However CSS does not control content.

30 Days to Learn HTML & CSS (Free)

As stated above, this tutorial is simply one of the best out there, and the CSS tips are no different!

W3 Schools: CSS Tutorial (Free)

Need help learning CSS? W3 Schools have your back. Also you may want to bookmark their page as it will be an instrumental reference for everyday questions about web design.

CSS From Noob To Ninja (Premium)

The first premium tutorial on our list, and for good reason. Noob to Ninja covers just about every nook and cranny there is in basic CSS. Once through this course you will be ready to jump into just about any CSS environment.

Give it A Place To Stay:

You have done it, if you have followed the tutorials found above then you have likely created a basic web page, styled it and are ready to put it on the web. The only thing you need now is a place to put it and a way to upload your content.

Software:

FileZilla (Free & Awesome)

It is an industry standard for a reason. FileZilla is absolutely free and incredible. Chances are, FileZilla is installed on nearly every single web designer or developers computer right now.

Transmit by Panic (Premium + MAC Only)

You need to transfer files. Maybe to an FTP or SFTP server. You need Transmit, the #1 Mac OS X

Hosting:

A Place to Call Home:

Hostdime

HostDime provides quality and reliable managed web hosting, reseller hosting, dedicated servers, and shared hosting for clients around the Globe.

Site5:

Site5 offers speedy hosting at incredible rates. Simply upload your shiny new documents and you will be up and running in no time!

Jul 13 2012
0

Twitter Bootstrap Part 1: What is Bootstrap Anyway?

Posted by | News, Tutorial, Uncategorized | No Comments

Here at Untame we love to build websites for incredible clients, moreover we love to build those sites using cutting edge tools that provide functionality that help our clients stand out from the herd. Behind the scenes we have been working with a fantastic front end web framework called Twitter Bootstrap. Like you would think from the title, it was made by an incredible group of developers and designers employed by Twitter (you may have heard of em… little social network sort of site, may catch on one of these days).

Bootstrap was created by Mark Otto (@mdo) and Jacob Thornton (@fat) and handed over to a thankful world in August of 2011. Their goal was simple: to empower front-end developers to kickstart projects more efficiently and effectively.

Consider this the beginning of a larger investigation of the power of Bootstrap and how we use it (you can too) to create awesome web apps.

What is it anyway?

If you are reading this article (thank you by the way) you are likely a very attractive and powerful web designer or developer looking to spruce up your workflow. Well you are in luck. Using Bootstrap, you can create dynamic and fully featured websites quickly. Why? Because Bootstrap is a front-end framework in it’s truest form. Twitter Bootstrap delivers immediately useable simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

Built on HTML5

Ahh the future of the web. While it may be the future, HTML5 is great because it simply allows us to write more semantic, readable code. Bootstrap is packed with HTML5 best practices to help make sure that you are creating future-proof projects for your clients.

 

CSS3 Integrated

If you would like to get started with CSS tricks like box-shadow and gradients Bootstrap is a great place to get started. Better yet, they have taken the time to provide excellent fallback support for older browsers.

 

Bootstrap is Open Source

Would you like to shell out some cash to get your hands on Bootstrap? Too bad! It is completely open source. In fact there are already some great projects built upon forked versions of Bootstrap that integrate even more awesome features.

What Does Bootstrap Do Exactly?

The Grid

If you are familiar with using grids in your design process Bootstrap will be a great place way to improve your workflow substantially. Making use of a twelve column system, layout is as simple as declaring a row of content and them simply adding appropriately sized columns until you reach twelve… rinse and repeat. Best of all, Twitter Bootstrap offers several different kinds of grids that may prove useful with a wide range of projects. Including a fluid twelve column grid as well as a centered “more traditional” grid. Both however have been designed to maintain responsiveness, view-able on a wide range of devices.

Helpful CSS

“On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.”

Bootstrap bundles in a host of pre-styled elements perfect for immediate integration in a project. Best of all, the creators chose to build Bootstrap upon the lesscss.org preprocessing engine (a personal favorite of mine) making global changes to base styles as easy as editing a single line of code at a time! Ranging from immaculately styled Typography, tables, forms, buttons and built in icons, Bootstrap integrates enough style to fit just about any project. Not finding the right fit? That’s alright, Bootstrap is wildly extensible and scale-able to keep up with your needs.

Built in jQuery Plugins

Javascript is what makes much of Bootstrap so unique and useable. Many plugins that I use in my projects every single day are baked right into the framework from the beginning.

Each plugin combines to provide a consistant user experience throughout any project. However, it is understandable if you find yourself looking through this list of plugins and saying “Hey, my project will never use that plugin”. That’s okay, you may download your own customized copy of Bootstrap including only the files that you require for your next project using their Bootstrap Builder.

What’s Next?

Now that we have an understanding for what Twitter Bootstrap is, we can begin to take it to the next level and use it in a practical application. In upcoming posts we will review how to create a beautiful website using the power that Bootstrap offers. I hope you have enjoyed this first post in our series on Bootstrap. Is there something specific that you would like to learn about? There is still time to let us know and we might just cover it specifically in a later post.

Start planning your project today. Get Started