SpyreStudios

35 New And Fresh Single Page Websites

Brant Wilson — Mon, 06 Feb 2012 08:54:36 PST

Single page websites have become popular among designers these days. Today we have a roundup of single page websites. Enjoy!! If you like these websites you might also want to check out our previous posts below.

42 Awesome Single Page Portfolio Websites

30 Beautiful Single Page Website Designs

Advertise here with BSA

How to Design a Dribbble-Style Homepage Layout

Jake Rocheleau — Thu, 26 Jan 2012 08:10:17 PST

Advertise here with BSA

The popular design network Dribbble has grown substantially in just a few short years. Graphics designers and illustrators from all over the world have flocked onto the web seeking invites. But aside from the exclusivity their layout design has become a prominent factor of the entire branding.

I love the simplistic nature of their gallery-style photo boxes. It matches well with a community of designers excited to share their latest pixels with the world. In this tutorial I’ll go over techniques for constructing a similar design in HTML5 and CSS3. You can build a very similar page structure with just bare-bones essential CSS. Yet when we can utilize new browser-supported properties like box shadows the process becomes much more captivating.

Live Demo – Download Source Code

Starting in HTML

To begin let’s build the default HTML template so we have a starting point to work with. The basic HTML5 construct requires a simple doctype declaration. In the code below I’m also including some meta tags along with an external CSS stylesheet.




  
  Dribbble-Styled Homepage Demo - SpyreStudios

If you notice we don’t need to close the link or meta tags anymore. The syntax is still valid with a forward slash at the end. However it’s not required in HTML5, so this will save you a bit of typing.

Now let’s move on to building the core body page. I’ve slimmed down the template a bit to include only the header navigation bar along with the notorious thumbnail display. In the top portion I’m isolating the navigation with HTML5′s nav element. We need to use this as a container since the background will span the entire width of the page. However our inner content is set inside a wrapper limited at 710px wide.


    
		
			Shots
			Explore
			Designers
			Jobs
			About
			Sign in

The rest isn’t too exciting, just a simple unordered list of navigation links. Dribbble actually has the sign in link floating off to the right side pushed up next to the search bar. For this I just created a class .floatr to append onto the list item.

Building our Thumbnail Display

Now directly underneath the navigation section I’ve created another div wrapper. This holds a sub-navigation menu with inactive links to sort through the many different shots. I also included a copy of the small heading text displayed on Dribbble’s featured section.


	Popular
	Everyone
	Debuts
	Playoffs


What are you working on? Dribbble is show and tell for designers. Sign up as a spectator

Now let’s take a quick look at how I’ve setup the shots gallery. Each row displays 3 different shots measuring about 220px in width. The formatting is held inside an ordered list with each new shot attributed inside a list item.

This can get a bit tricky since we’re working with more than just plain text. But HTML lists were built for much more than just navigation menus. And certainly this dribbble gallery is one such example. Check out my code below and we can break down each segment individually.

To make recognition easier I’ve given each list item an ID of “screen-#” starting at 1. Inside are two different block areas – a div containing the shot image along with a span underneath for the author’s name and avatar photo. Much of the internal HTML looks exactly the same within the OL element. So now let’s turn our focus onto CSS markup.

Styling the Page

Inside my example style.css you’ll find each of the code blocks split into segments. At first I’m doing some formal browser resets to remove margins and padding, along with re-setting font sizes to the traditional 1.0 scale. By that I mean the 62.5% value creates a ratio of 1.0em = 10px and all font sizes/line height values are even.

/** default styles **/
* { margin: 0; padding: 0; }
html { height: 101%; }

body { font-family: Arial, Tahoma, sans-serif; font-size: 62.5%; line-height: 1; background: #eeeeee; }

a { color: #5484a7; text-decoration: none; }
a:hover { text-decoration: none; color: #356080; }

Such an interesting part of our CSS is handling each dribbble box display. The ordered list element is given a class of “dribbble” and each internal list item holds a shot image and author details.

If you notice I’ve included a secondary class .rowstart on some list items. This is applied to each shot starting on a new row. In this case ID numbers 4, 7, and 10. The class will just clear everything from the previous row so we know the next three boxes will display properly. Also worth noting are some of the slight margin fixes I’ve applied to the author avatar image.

ol.dribbble { list-style: none; }
ol.dribbble li { width: 220px; height: 210px; margin-right: 15px; float: left; }
ol.dribbble li.rowstart { clear: left; }

ol.dribbble li span.meta { font-size: 1.2em; display: block; font-weight: bold; padding-left: 6px; }
ol.dribbble li span.meta a { text-decoration: none; display: block; }
ol.dribbble li span.meta img.avatar { float: left; margin-right: 6px; margin-top: -3px; }

Creating Shots

We are using a class of .shot attached to the internal div element inside each list item. This behaves as a block with a limit of 220px in width and 210px in height.

Ideally this should be enough since none of the author’s names would break onto the second line. However if you wanted to include extra user information or add Dribbble’s social icons you can set the box height to auto. Then using a bottom margin add extra space as needed. Though I feel that using strict size limits will work better across all browsers and resolutions.

ol.dribbble li div.shot {
    display: block;
    clear: left;
    margin-bottom: 8px;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

A fantastic bit of CSS3 code is from the selector above using drop shadows. This displays a very slight shadow coming out of the right side of each box. The color setting is applied using RGBa which allows reduction in opacity. In this scenario we’ve created a solid black color with only 07% alpha transparency instead of 100%. This gives an ever-so-slight drop shadow that looks stunning in contrast with such a light background.

Live Demo – Download Source Code

Conclusion

I hope this brief tutorial has demonstrated just how easy it is to prototype a layout using CSS3. Even with many of the older properties it’s still a simple process to look over a page design and clone much of the functionality yourself. And with HTML5 specs growing in support web developers have never had it easier! Let us know your thoughts in the post discussion area and be sure to download a copy of the demo source code above.

Advertise here with BSA

31 Super-Unique and Functional Website Navigation Menus

Jake Rocheleau — Fri, 20 Jan 2012 07:12:43 PST

Advertise here with BSA

Web navigation is a vital piece to any layout. Designers have known this for decades, but not all menus are built equally. It’s very important to distinguish between design and functionality. Some web designers understand this and attempt to better their own skills. Meanwhile the cream of the crop can incorporate both design and functionality with ease.

I have collected this brilliant set of 31 website menus with amazing UX and aesthetics. You need to capture your visitor’s attention and offer them a simple solution for navigating your pages. I hope this collection can provide inspiration for upcoming web designers in the field of user experience.

Big Cartel

Unfold

Sellected Studio

Moment Skis

Thrive Solo

Design Bombs

Beautiful Type

Shout Digital

James Li Online Portfolio

Information Highwayman

Ad Daddies

Sugar Rush Creative

Visual Republic

AppTank

Web Visionary Awards

Abstraktion

Teehan+Lax

In Motion – London Mobile Massage

Mercy Online

Just Dot Media

Chappy Barry

Smorge

Hull Digital Live

Doodle Pad

Desina

JetSuite Online Video Platform

Pline Studios for Architecture

Kenneth Cachia

Brian Hoff

Facio Design

The Coastal Cupboard

Advertise here with BSA

35 Minimal Web Designs

Brant Wilson — Tue, 17 Jan 2012 07:26:06 PST

Advertise here with BSA

In this post we have put together some fresh and beautiful minimal web designs for your inspiration. Enjoy! If you like this post you might also enjoy the posts below.

56 Light & Clean Website Designs Using A Minimalist Color Scheme

Minimalist Design: A Brief History and Practical Tip

sachagreif

radoorco

kicktable

thomasrobin

socialwear

captaindash

theworkcycle

crafft

alexandermunk

sam.brown

lisidesign

strbk

adonit

goliathsportswear

dwd

mikesmart

bindacademie

svenjohan

brandonhawthorne

xctravels

lomography

lamoulade

computergraphics

joshsullivan

danielhritzkiv

calepino

wanda

kyan

swe

abitofextra

bigbitecreative

zooadvertising

duotone

marcofumagalli

radziu

Advertise here with BSA

20 More iPad Apps for Designers

laura — Thu, 12 Jan 2012 12:28:54 PST

Advertise here with BSA

In this post, I’m sharing twenty iPad Apps that designers may find helpful. Many of these apps have been developed in the last few months and several are also free.

If you liked this post, you may also want to check out this post on 7 Tips to Help Freelancers Get the Most from their iPad at the Freelance Folder blog. You may also want to check out 15 Amazing iPad Apps.

Art Authority for iPad

Now you don’t have to go to a museum to see great artwork. View some of the world’s best pieces of artwork from anywhere using your iPad. Great for inspiration.
App at iTunes Store

ArtRage

ArtRage lets you “paint” on your IPad using realistic brushs, pens, markers, and other artist tools. You can also download a photo and transform it into your own masterpiece.
App at iTunes Store
Website

Art Studio

This is a professional drawing and painting app that allows you to create professional drawings with your iPad. You can use up to five layers and it automatically saves your drawings.
App at iTunes Store
Website

Colored Pencils

This drawing tool creates art with the look of a colored pencil drawing. You can upload your drawings to Twitter.
App at iTunes Store

DIY Wallpaper

This brand new free app lets your personalize your iPad wallpaper. The app has some built-in images and you can choose from 50 different icon styles.
App at iTunes Store

Elastic Cam

This free app lets you alter your videos or photos using preset filters. Both beginners and experienced photographers will enjoy using this tool to discover what they can make from their photos.
App at iTunes Store
Website

Forms by PBF

This app lets you design user-friendly interfaces for your data. If you work with databases and need to share the information, this app is for you.
App at iTunes Store
Website

Inspire Pro

This design app lets you use your iPad to draw, paint, blend, and much more. With Inspire Pro, you may even forget you’re using an iPad.
App at iTunes Store
Website

iFont Maker

Designers can use the iPad to create their own fonts with this app. This tool is fun to play with if you like fonts.
App at iTunes Store
Website

iThoughtsHD

This iPad mind mapping software is perfect for creative brainstorming. If you’re used to mind mapping, or would like to try it out, this app can help.
App at iTunes Store
Website

Morpholio

This is a free app designed to let creatives use their iPads to collaborate with each other. It’s also a community that lets you share what you let and get (and give) constructive criticism.
App at iTunes Store
Website

Note Hub

This free app to help you keep track of and work with your creative ideas such as notes, snippets, drawings and more. When you have finished working with your notes here, you can email them, publish them to Posterous or Dropbox, or save them to your photo library.
App at iTunes Store
Website

Palettes Pro

Designers can use this tool to match and manage color schemes. Find the perfect colors for your project. There are five different color models.
App at iTunes Store
Website

Photogene

This is a great tool for managing your photos on the iPad. You can use this tool to edit and tweak your photos from your iPad.
App at iTunes Store
Website

PicFrame

This app lets you join several images together in a single frame. This could be useful for photo collages.
App at iTunes Store
Website

PictoBento

This is a great app to help you quickly find photos and designs from Instagram, PicPlz, and Dribbble. Find the inspiration you need.
App at iTunes Store
Website

Silkscreen

This free app lets you use your iPad to preview your Photoshop designs. There are no image size constraints.
App at iTunes Store
Website

Web Page 2 Go

This app was designed to let you quickly publish web pages from your iPad using a Dropbox Sharable Link.
App at iTunes Store
Website

What the Font

Have you ever wondered what that gorgeous font in a photo is? This handy app can identify fonts used in photos or websites. It’s also free.
App at iTunes Store
Website

Wallpaper Creator – Granimator

Quickly create attractive wallpapers with the free app. Say good bye to dull, generic iPad wallpaper and find something that really represents you.
App at iTunes Store
Website

Your Turn

What are your favorite graphic design apps? Do you have any other favorite iPad apps?

Advertise here with BSA

40 Eye-Catching Dark Website Layouts

Jake Rocheleau — Mon, 09 Jan 2012 06:49:52 PST

Advertise here with BSA

Web designers are constantly looking for hot new trends to catch their visitor’s attention. This list of exciting design trends has changed dramatically in the past 10 years, but dark-themed websites have always been in style. This color swatch combined with many different web elements is a surefire way to draw in attention. If you’re a fan of these deep-rich color schemes please spend some time perusing my design gallery.

Kisko Labs

Crafton

ImGame for iOS

Casa Vaello

FFFFALLBACK

Capo for OSX

Abduzeedo

GR Packaging

Riff Raff Web Design

Abstraktion

ci design

wopro

Cockpit for Mac OS X

Versions App

Espionage

Cornerstone

Plex

Jet Cooper

Designers MX

LA Bubbly

This man’s life

DonQ Rum

Rogge & Pott

Alien Bikes

James Garner portfolio

Pokkisam

Pirata Digital

MadeToKill

Youzee

Kineda

Cobra Creative

Skewed Icons

Justdot

vyniknite.sk

Lubuski Hip Hop

Newcastle Web Design

42 Angels

Kettle NYC

Carbon Ads

Visualbox

Advertise here with BSA

Connecting with API Data from Instagr.am using PHP

Jake Rocheleau — Wed, 04 Jan 2012 07:03:15 PST

Advertise here with BSA

The process of connecting into API data via OAuth is tricky. Some of the more notable social networks which have adopted this technology include Foursquare, Twitter, and Facebook. But Instagram is a very popular mobile app which has grown tremendously fast. Their recent API v1.0 release has some really neat features where you can pull popular photos, recent users, follower lists, and a whole bunch more.

I don’t want to overwhelm anyone by offering too much information in a single tutorial. Thus I’ve broken this process into segments where the final script will output some user profile data from your Instagram account via OAuth connection. For an example you can try to login yourself or check out my screenshot at the bottom of this article.

Setting Up the Library

It’s a whole lot easier to work with API data when you have a library set and ready. The Instagram PHP API on Github is fantastic for beginners to start with. It’s the only repo by user macuenca and he’s great with support questions – I also recommend Stack Overflow if you’re having other troubles.

Simply download his code and unzip to reveal the files. We only meed to use 2 specifically named CurlHttpClient.php and Instagram.php. Curl is a code library used to pull JSON data from an HTTP request and is integrated right into PHP. The Instagram.php script is mostly config and custom functions related to the API. If you want to get an idea for how this all ties together check out the included example.php script which displays the most popular recent photos.

Before we jump into PHP we need to setup an application with Instagram’s developer center. Hit this page and signup for an account if you haven’t already. Once logged in as a developer you can manage different applications and find your client ID and Secret keys.

Web API Keys

This concept is a bit difficult to wrap your head around the first time. Basically you need to present 2 distinct keys to Instagram with every authorization request. The ID is generally public and included right within the authorization URL.

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URL&response_type=code

Now the Secret key is still needed at some point in your code, but this isn’t openly displayed to your visitors. Just realize that you need both of these codes for Instagram to authorize your application. The final parameter which requires configuration is the callback URL. After Instagram authorizes a user login it will respond with a code for building an access token. This token code is sent to whichever callback URL you input.

Access Tokens are similar to cookies or session variables which hold your user’s current account login. In our example scenario I’m using the script http://spyrestudios.com/demos/instagram-api/instagammy.php as a callback method. Please notice you do need some type of web server to test this out on – even if you’re running through localhost.

Configure the Login Page

There are two scripts we will focus on – the login authorization followed by our instagammy.php callback. For the login page I’ve simply used index.php but you could rename this to anything. I’ll walk through the important sections of this page below.

require_once 'Instagram.php';

/**
 * Configuration params, make sure to write exactly the ones
 * instagram provide you at http://instagr.am/developer/
 */
$config = array(
        'client_id' => 'f0d225aa955c4bd9ae563f87f831efab',
        'client_secret' => '377b77afc1274a89bd2df7d77e934689',
        'grant_type' => 'authorization_code',
        'redirect_uri' => 'http://spyrestudios.com/demos/instagram-api/instagammy.php',
     );

We first need to include our Instagram.php script which does all the backend API handling for us. Be sure you also have the Curl script I mentioned earlier and place all these files within the same directory. You’ll additionally notice a $config array with 4 values – Client ID, Secret, Grant Type, and Callback URL. Grant type should almost always be set to authorization_code by default, as this is how Instagram will process the login data.

All the other 3 variables you should pull from your Instagram client page. These three values will be very important over the course of your API development. Keep in mind you can create and manage dozens of Instagram API clients – but please be reasonable with the OAuth calls!

/**
 * This is how a wrong response looks like
 * array(1) { ["InstagramOAuthToken"]=> string(89) "{"code": 400, "error_type": "OAuthException", "error_message": "No matching code found."}" }
 */
session_start();
if (isset($_SESSION['InstagramAccessToken']) && !empty($_SESSION['InstagramAccessToken'])) {
    header('Location: /index.php');
    die();
}

// Instantiate the API handler object
$instagram = new Instagram($config);
$instagram->openAuthorizationUrl();

In the latter portion of our script we check for an InstagramAccessToken. If any value is found this means we have a user currently authorized and we redirect them to our home page. Otherwise we need to re-direct them to Instagram so the user may login.

This is the best part of using a pre-built code library so we don’t need to make every call from scratch. Simply initialize a new Instagram class and use $instagram->openAuthorizationUrl(); to automatically re-direct. The Instagram.php library uses your configuration variables to create a unique authorization URL for each user.

Building the API Output

The output page in our scenario is the same as our callback script. I’ve used the name instagammy.php but you can use anything you’d like. Let’s examine the header to this script before we jump into content.

session_start();
require_once 'Instagram.php';
/**
 * Configuration params, make sure to write exactly the ones
 * instagram provide you at http://instagr.am/developer/
 */
$config = array(
        'client_id' => 'f0d225aa955c4bd9ae563f87f831efab', // Your client id
        'client_secret' => '377b77afc1274a89bd2df7d77e934689', // Your client secret
        'grant_type' => 'authorization_code',
        'redirect_uri' => 'http://spyrestudios.com/demos/instagram-api/instagammy.php', // The redirect URI you provided when signed up for the service
     );

We need to keep the session alive so our user authorization call isn’t lost. Thus we also need a copy of the configuration details for your specific app. If you feel it’s easier to include this from a separate file you could create something like app-config.php to setup the array. You can then use another include statement directly under Instagram.php.

Now that the user is (hopefully) authorized we are looking to display some of their profile info. We need to give them an Access Token which represents this specific account login. Additionally we can store this into our PHP session to offer as a parameter later on.

$instagram = new Instagram($config);
$accessToken = $instagram->getAccessToken();
$_SESSION['InstagramAccessToken'] = $accessToken;

$instagram->setAccessToken($_SESSION['InstagramAccessToken']);
$userinfo = $instagram->getUser($_SESSION['InstagramAccessToken']);

// After getting the response, let's iterate the payload
$ures = json_decode($userinfo, true);

The function getUser() can be found inside our Instagram.php library. This takes in a single token and returns a JSON string via HTTP. We then use the PHP function json_decode() converting our return data into an array. This content is stored within the variable $ures which stands for user results.

Dumping Output Data

The Instagram API is fairly well documented compared to other apps. But it can take so long to go through all of their pages looking for a specific answer. When we have the data stored in PHP it’s just easier to use var_dump() to pull out associative array labels.

All the info we need is held inside of a sub-array labeled “data”. So for example, to pull your profile picture URL you need to echo $ures['data']['profile_picture']. Similarly $ures['data']['username'] outputs your username. Check out my code below which is included in the body of instagammy.php:


    () - " />
    
	
		Total Photos: 
		Following: 
		Followers: 
		User ID:

A lot of the variable names should be self-explanatory. Using the var_dump() function you’ll also get a visual representation so you can follow along with my train of thought. One thing to point out is within the counts array we have 3 more values – total number of photos, users you follow, and your followers. These are represented in the unordered list by media, follows, and followed_by. You can see in the associative array we’re going 3 levels deep to pull out this data, which is how Instagram returns the results by default.

Live Demo – Download Source Code

Conclusion

This is just one example of the many things you can do with Instagram’s new API functionality. Inside the Instagram.php file you’ll find a lot of custom functions with well-crafted comments to explain their purpose. Spend a bit of time going through here to see if you can perform any other cool functionality. Also check throughout Google if you get lost as there are dozens of resources available for API development using this exact library.

Advertise here with BSA

31 Fantastic New jQuery Plugins for Web Developers

Jake Rocheleau — Fri, 30 Dec 2011 06:57:32 PST

Advertise here with BSA

jQuery has dramatically changed the way we view frontend scripting. JavaScript was always a popular language even during the 1990s. But in the new millennium web developers have been smart and observed the programming trend titled abstraction. This is a technique where you save time building features upon others’ code libraries – jQuery being one of the most advanced.

In just the past 2 years web developers have released dozens of free jQuery plugins to the Internet. If you’ve kept up with the community there’s no doubt you’ve run into a few helpful scripts. But if you’re just getting started you’re likely still interested in these topics! Check out my gallery of jQuery plug-ins and be sure to leave your thoughts/questions in the post discussion area.

33 Fresh jQuery And CSS3 Tutorials

Brant Wilson — Tue, 27 Dec 2011 12:27:17 PST

Advertise here with BSA

In this post we have compiled some useful jQuery and css3 tutorials. Enjoy!!

If you like these tutorials you might also want to check out our previous posts below.

33 Excellent jQuery Tutorials

19 CSS3 and jQuery Tutorials for Perfect UI Design

Hover and Click Trigger for Circular Elements with jQuery

Elastic Image Slideshow with Thumbnail Preview

Fullscreen Image 3D Effect with CSS3 and jQuery

Easy CSS3 & jQuery tooltips

Wave Display Effect with jQuery

Draggable Image Boxes Grid

Chained AJAX Select

Simple and effective dropdown login box

Cycle Through Images on Hover with jQuery

Build A jQuery Image Gallery

How To Build A Slideout Feedback Form In jQuery

Switch Stylesheets With jQuery

Flashing text with jQuery

Image Zoomer with jQuery

Simple Lightbox with jQuery

sumon math game with jquery

Cool Background Image Sliding effect with jQuery

Tutorial: Creating A Sticky Sidebar Using jQuery

Image map with CSS3 & jQuery tooltips

How to Create a Jquery Plugin

jQuery Image Gallery

Create a Flexible Data Heat Map

Face Detection with jQuery

Stylish CSS3 progress bars

CSS3 animated dropdown menu

Design a beautiful CSS3 search form

CSS3 Spinning Social Media Icons

Create a Stylish Menu with CSS3 Transitions

Typography Effects with CSS3 and jQuery

Animated Buttons with CSS3

Creative CSS3 Animation Menus

Original Hover Effects with CSS3

Circle Navigation Effect with CSS3

Advertise here with BSA

25 Useful And Free Fonts To Download

Brant Wilson — Thu, 22 Dec 2011 07:27:28 PST

Advertise here with BSA

Typography plays a huge role in any design. In this post we have collected 25 free, high quality fonts. Enjoy!