Design Woop | The Web Design and Development Blog » All Posts http://designwoop.com The Web design blog brought to you by David Martin Thu, 02 Feb 2012 08:00:00 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Tutorial: Create A Minimal Single Page Portfolio With HTML5/CSS3 http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/ http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/#comments Thu, 02 Feb 2012 08:00:00 +0000 David http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/ designed the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.]]> This tutorial is the second installment of how to create a minimal single page portfolio using HTML5 and CSS3, take a look at part one where I initially designed the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.

The Design

Resources Used

Titillium Text – Using @font-face for heading typography.

Form Producer – Used for basic form demo.

Apple iOS Linen Texture – Used for the background texture.

Jribbble – A jQuery plugin to pull in some dribbble shots.

HTML5 Boilerplate – A HTML5 framework to build our design on.

960 Grid System – A CSS framework to provide pixel perfect from design to code.

Basic HTML5 Layout

Our basic layout section starts with the HTML5 doctype and the usual stuff such as the title/meta tags and the CSS links to two stylesheets. One is the 960 grid frame work which will allow me to quickly and easily code up the site from my previous design, the other stylesheet is where I place the styles for the page. I have kept these separate for demonstration purposes. I lastly use the HTML5 Autocorrect form attribute in the message text area, this is again useful for mobile users who may have fat or clumsy fingers ;).


<!doctype html>
<head>
  <meta charset="utf-8">
  <title>David Martin - A Web Designer &amp; Developer - Tunbridge Wells, Kent.</title>
	  <meta name="description" content="David Martin - Web Design Tunbridge Wells">
	  <meta name="author" content="David Martin @webadelic">
	  <meta name="viewport" content="width=device-width,initial-scale=1">
	  <link rel="stylesheet" href="css/grid/960_12_col.css">
	  <link rel="stylesheet" href="css/style.css">
</head>
<body>

Header

The page concept is pretty simply so semantically dividing the sections up is easy. I use HTML5 elements such as <header> to markup the intro block as this is the introduction to the section and <hrgroup> to markup the intro text for the current section.

  <div id="header-line"></div>

  <div class="container_12">

  	<header>

		<div class="grid_3 push_1">

			<img src="img/webadelic-logo.png" alt="Webadelic - Web Design Tunbridge Wells" border="0" width="140" height="94" />

		</div>

		<hgroup class="grid_7 push_1 intro">

			<h1>Hello! My name is David!</h1>

			<h2>A web developer &amp; designer from Tunbridge Wells, UK.</h2>

		<hgroup>

    </header>

    <div class="clear"></div>

Body

I group the body contents of the page using the HTML5 elements <section> and <article>. I use the <section> element to group the small ‘About’ left column and the right side ‘Contact’ form.

Notice I also nest both the left and right columns using the <article> element. I used the <article> element to markup the left and right content areas as two separate pieces of content inside the main <section> element.

When constructing the form you can see I was able to use some new HTML5 form elements to improve the form functionality. Notice for the text inputs I use the Placeholder attribute, this displays text in the field until the field is focused.

A useful HTML5 form attribute is Auto capitalization, this is useful for mobile users who may not want their phones to add capital letters to their email fields.

I lastly used the HTML5 form attribute Autocorrect on the message textarea to help mobile users who may have clumsy fingers ;).

There are more HTML5 form elements you could add to this form, but for now this is simply a demo.  I would recommend also using the Required attribute to improve your form validation. Have a play around and enjoy!

The Dribbble shot feed is pulled in using the jQuery plugin, for now I simply add <ul id=”feed”></ul> to the page, this is where the feed will be pulled in. There are some configuration options you will need to amend in the plugin, you can read up on this here or simply view the demo.


   <div id="horizontal-line-full"  class="push_1"></div>

		<div id="main" role="main" class="grid_10 push_1">
			<section>

				<article class="grid_4 about">

					<header>

						<h3>About</h3>

					</header>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

				</article>

			</section>

				<div class="grid_2 column"></div>

			<section>

				<article class="grid_4 contact">

					<header>

						<h3>Contact</h3>

					</header>

							<section class="contact-me">

								<label for="name">Name</label>
								<input type="text" name="name" id="name" placeholder="Your name" autocapitalize="on" autocorrect="on" />

								<label for="email">Email</label>
								<input type="email" name="email" id="email" placeholder="Your email" autocapitalize="off" autocorrect="on" />

								<label for="website">Message</label>
								<textarea name="message" id="message" placeholder="Your message" autocorrect="on"></textarea>

								<button class="button" name="submit" id="submit">Send</button>

							</section>

						</form>

				</article>

			</section>

			<section>

				<article class="grid_10 projects">

						<header>

							<h3>Projects</h3>

						</header>

						<p>You can check out some of the designs I am working on which are being fed from my <a href="http://dribbble.com/webadelic" rel="nofollow">Dribbble feed</a>, one day when I have some spare time I’ll develop this site a little further to actually show some full project details...<em>I promise</em>.</p>

						<ul id="feed"></ul>

				</article>

			</section>

Footer

I can once again use more HTML5 elements to semantically divide the footer section up,  I first wrap the entire footer with the <footer> attribute.

The <footer> attribute can be used at the end of documents and sections and typically are used to provide the author information or other miscellaneous text.

Inside the <footer> attribute I divide the left and right links into two separate sections using <section>, this allows me to separate the grouping of content in more semantic way.


    <footer class="grid_10 footer">

    	<section id="social-procrastination" class="grid_6">

    		<ul>
    			<li id="twitter">
    				<a href="http://twitter.com/#!webadelic" rel="nofollow" title="David Martin (@webadelic) on Twitter">
						<span>David Martin (@webadelic) on Twitter</span>
					</a>
    			</li>
    			<li id="gplus">
	    			<a href="https://plus.google.com/108725634593324907312/posts" rel="nofollow">
	    				<span>David Martin (@webadelic) on Google Plus</span>
	    			</a>
    			</li>
 				<li id="dribbble">
 					<a href="http://dribbble.com/webadelic" rel="nofollow">
 						<span>David Martin (@webadelic) on Dribbble</span>
 					</a>
 				</li>
    		</ul>

    	</section>

    	<section id="footer-email" class="grid_2 push_2">

    		<p><a href="mailto:david@webadelic.co.uk" rel="nofollow">david@webadelic.co.uk</a></p>

    	</section>

    </footer>

  </div> <!-- end of #container -->

</body>
</html>

Using CSS

Now we have created the basic HTML5 layout, we are ready to add the CSS. Here I will walk you through a few basics of the CSS I used to code up the design. To see the full CSS I used to achieve the exact layout view the demo and have a snoop around.

I use the 960.gs grid with some custom styles in order to match the site with the design, if you take a look at the source code you will see my references to the grid columns in the code, a good write up on using the 960 grid is available from Six Revisions. If you would like to explore the CSS code better, its all available in the demo.

Before I add the CSS:

Header

First off I am setting the background texture to the downloaded and modified Apple iOS Linen Texture. Next I am setting the body fonts, I want the fonts to show as Helvetica Neue if possible but if this font is not available I will roll back to either Helvetica or Arial respectively.

body {
margin: 0;
background-image: url(../img/bg.png);
font: 11px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.231;
}

Heading Fonts

As stated I wanted to use Titillium text on the heading fonts, as the font is available in various different formats and is font-face compatible I can use @font-face. I download the fonts and place them in a folder in the site directory and call them using the below @font-face code:

</pre>
<pre id="line1">h1 {font: 35px/15px 'TitilliumText22LXBold', Arial, sans-serif;letter-spacing: 2px;}
h2 {font: 20px/15px 'TitilliumText22LThin', Arial, sans-serif;letter-spacing: 1px; 	color:#8a8989;}
h3 {font: 28px/15px 'TitilliumText22LThin', Arial, sans-serif;letter-spacing: 1px;}
p{color:#8a8989;}

@font-face {
    font-family: 'TitilliumText22LThin';
    src: url('../fonts/TitilliumText22L001-webfont.eot');
    src: url('../fonts/TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L001-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L001-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LRegular';
    src: url('../fonts/TitilliumText22L003-webfont.eot');
    src: url('../fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L003-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L003-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LBold';
    src: url('../fonts/TitilliumText22L005-webfont.eot');
    src: url('../fonts/TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L005-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L005-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LXBold';
    src: url('../fonts/TitilliumText22L006-webfont.eot');
    src: url('../fonts/TitilliumText22L006-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L006-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L006-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Form

Styling the form allows me to use some nice CSS3 effects to match up with the design without having to use images.

I use the following CSS3 to achieve an indented effect on the form inputs, I think this is a pleasant and simple way of making the form inputs. I achieve the indented textfield using the CSS box shadow technique and using a -1px black line:  0 -1px 0 0px which has its opacity set to 0.1: rgba(0,0,0,0.1). See below:

   -moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
   -webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
   box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);

The Complete Form CSS

</pre>
<pre id="line1">/* Contact Form */

 label {
 	margin: 0 0 10px 0;
 	display: block;
 	font-weight: normal;
 }

 .error{color:red;}

 #form_producer input[type="text"], .contact-me input[type="email"] {
	float:left;
	clear:both;
	margin:0 0 15px 0;
	padding:3px 6px;
	width:300px;
	height:24px;
	border:none;
	color:#8a8989;
	background:#f9f9f9;
		-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
 }

 #form_producer textarea{
 	float:left;
 	clear:both;
 	margin:0 0 15px 0;
 	padding:3px;
 	width:305px;
 	height:90px;
 	border:none;
 	color:#8a8989;
	background:#f9f9f9;
		-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
 }

 .button{
 	float:left;
	clear:both;
	background-color:#ebe9e9;
	border:solid 1px #ebe9e9;
	width:140px;
	height:30px;
	text-transform:uppercase;
	font-size: 0.9em;
	letter-spacing:1px;
		background-image: linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -o-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -moz-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -webkit-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -ms-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);

		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.5, rgb(241,241,241)),
			color-stop(0.5, rgb(235,233,233))
		);
 }

 	.button:hover{
 		opacity: 0.8;
 	}

 		.button:active{
 			opacity: 0.4;
 		}

The Dribbble Feed

The dribbble shot feed is styled using some simple CSS to remove the list bullets and to get each image to sit next to the next correctly. See below:

ul#feed{
list-style-type: none;
margin: 60px 0;
padding: 0;
}

#feed li{
float: left;
margin: 0 45px 45px 0;
padding:5px;
width: 200px;
height: 150px;
border: solid 1px #dedbdb;
background: #fff;
}

Footer

To give the social icons a little hover effect, we can use the CSS3 opacity attribute. When a user hovers over, the opacity is changed to o.8.


#twitter a:hover, #gplus a:hover, #dribbble a:hover{
opacity:0.8;
}

Demo: View the demo – Single Page HTML5 Portfolio

]]> http://designwoop.com/2012/02/tutorial-create-a-minimal-single-page-portfolio-with-html5css3/feed/ 0 10 Useful jQuery Plugins For Enhancing Your Website UX http://designwoop.com/2012/01/10-useful-jquery-plugins-for-enhancing-your-website-ux/ http://designwoop.com/2012/01/10-useful-jquery-plugins-for-enhancing-your-website-ux/#comments Mon, 30 Jan 2012 08:00:00 +0000 David http://designwoop.com/2012/01/brilliant-jquery-plugins/ jQuery plugins that are really useful for improving your overall user experience on your website.]]> Incorporating jQuery effectively and modestly in your website build process is a great way to enhance and take your user experience to another level. Using jQuery plugins can be a great tool for helping display content to your users in a much more intuitive and interactive way. The jQuery community is fantastic, developers are consistently releasing new, quality jQuery plug-ins for us to incorporate into our websites.

In this post I will take show you a collection of jQuery plugins that are really useful for improving your overall user experience on your website.

Nivo Slider

10 Useful jQuery Plugins For Enhancing Your Website UX

The Nivo Slider is a fantastic jQuery slider plug-in, it is available in two formats, one jQuery plug-in is a dedicated WordPress plug-in and the other is freely available for all  websites.

Isotope

10 Useful jQuery Plugins For Enhancing Your Website UX

Isotope is a jQuery plug-in that can add some serious improvement to how your users navigate content displayed on a webpage. The plugin makes use of some great jQuery effects to alter your content layout on a page.

FlexSlider

10 Useful jQuery Plugins For Enhancing Your Website UX

Another great yet simple to use free jQuery slider plug-in which is completely responsive and packed with tons of slide animations.

Mosaic

10 Useful jQuery Plugins For Enhancing Your Website UX

One of my personal favorite jQuery plugins for improving how additional content is served to a user is Mosaic. Mosaic automatically generates sliding boxes and captions, allowing slide and fade animations with custom directions.

Supersized

10 Useful jQuery Plugins For Enhancing Your Website UX

If you use big background images in web design, then Supersized is a jQuery plugin you should take a look at. Supersized is a full screen background slideshow allowing you to rotate through, pause/play and array of images that are set as the website background.

jQuery Image Parallax

10 Useful jQuery Plugins For Enhancing Your Website UX

The jQuery Image Parallax plug-in allows you to manage the animation aspects of a banner which you could use for your header  or background.

jMenu

10 Useful jQuery Plugins For Enhancing Your Website UX

jMenu is a useful jQuery plug-in that allows you to create awesome menus that include unlimited sub navigation items.

Assign

10 Useful jQuery Plugins For Enhancing Your Website UX

Assign is a jQuery plug-in that lets you easily assign multiple keyboard shortcuts and events for specified functions.

Dynamic Tag

The Dynamic Tag form is a stylish way to enhance your tags inside a form input, try the demo its a great enhancement plug-in.

jQuery Tour

10 Useful jQuery Plugins For Enhancing Your Website UX

jQuery Tour is a flexible plug-in that can provide a stylish, high customizable way to provide your users with a website tour.

What Plugins Do You Use?

I would be interested to hear about some of the plugins you use on a regular basis, drop me a comment and I will add them to the list.

]]> http://designwoop.com/2012/01/10-useful-jquery-plugins-for-enhancing-your-website-ux/feed/ 0 22 Creative Business Cards From January 2012 http://designwoop.com/2012/01/business-cards-from-january-2012/ http://designwoop.com/2012/01/business-cards-from-january-2012/#comments Thu, 26 Jan 2012 08:00:00 +0000 David http://designwoop.com/2012/01/business-cards-from-january-2012/ business card gallery, you can see some of the best business cards from last year in the business card archive.]]> This post is the first part of the business card inspiration series of 2012, each month I will featuring a collection of awesome business cards that have been submitted to the business card gallery, you can see some of the best business cards from last year in the business card archive.

Wyatt

22 Creative Business Cards From January 2012

We Are Manic

22 Creative Business Cards From January 2012

Wall Envy Photo

22 Creative Business Cards From January 2012

Tiny Twiggette

22 Creative Business Cards From January 2012

Strumpets Crumpets

22 Creative Business Cards From January 2012

Projekt, Inc

22 Creative Business Cards From January 2012

Modern Karibou

22 Creative Business Cards From January 2012

Middletown Lumber

22 Creative Business Cards From January 2012

Maria Bernal

22 Creative Business Cards From January 2012

Manfred Erjak

22 Creative Business Cards From January 2012

Kip Beelman

22 Creative Business Cards From January 2012

I Am Tiago

22 Creative Business Cards From January 2012

Homer Liwag

22 Creative Business Cards From January 2012

Great Circle

22 Creative Business Cards From January 2012

Gorjana

22 Creative Business Cards From January 2012

Formgarten

22 Creative Business Cards From January 2012

Emily Deisiath

22 Creative Business Cards From January 2012

Digital Elliot

22 Creative Business Cards From January 2012

Debadge

22 Creative Business Cards From January 2012

Chef Boulder

22 Creative Business Cards From January 2012

CF Designer

22 Creative Business Cards From January 2012

Cecelia Tattoo

22 Creative Business Cards From January 2012

]]> http://designwoop.com/2012/01/business-cards-from-january-2012/feed/ 2 Blank & Bare WordPress HTML5 Frameworks http://designwoop.com/2012/01/wordpress-html5-frameworks/ http://designwoop.com/2012/01/wordpress-html5-frameworks/#comments Mon, 23 Jan 2012 08:00:00 +0000 David http://designwoop.com/2012/01/wordpress-html5-frameworks/ WordPress theme a new design or simply looking to upgrade your code to more modern technologies such as HTML5/CSS3, you will these free WordPress HTML5 frameworks very handy. These HTML5 WordPress frameworks are stripped back and mostly include little or no styling which provides a perfect HTML5 framework for you to build your new WordPress site on.]]> If your looking to give your WordPress theme a new design or simply looking to upgrade your code to more modern technologies such as HTML5/CSS3, you will these free WordPress HTML5 frameworks very handy. These HTML5 WordPress frameworks are stripped back bare and mostly include little or no styling which provides a perfect HTML5 framework for you to build your new WordPress site on.

Roots

Blank & Bare WordPress HTML5 Frameworks

Roots is a starting WordPress theme based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Reverie Framework

Blank & Bare WordPress HTML5 Frameworks

Reverie Framework is a versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices.

Starkers

Blank & Bare WordPress HTML5 Frameworks

Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.

Whiteboard

Blank & Bare WordPress HTML5 Frameworks

Whiteboard is not like most other WordPress Frameworks that include a mess of styles, functions, and content areas that have to be cleaned out for nearly every project, Whiteboard remains a true WordPress Framework.

Bones

Blank & Bare WordPress HTML5 Frameworks

Bones freely provides you with the option of a responsive WordPress framework or a fixed framework, Bones is a perfect starting point for creating your next HTML5 WordPress site.

BLANK WordPress Theme

Blank & Bare WordPress HTML5 Frameworks

Blank is a WordPress theme with all the functionality of a normal WordPress theme but with none of the styling.

The idea is that when starting a new theme, it is far easier to use this as a base then a theme that is already finished and styled.

Handcrafted WP

Blank & Bare WordPress HTML5 Frameworks

Handcrafted WP is an almost-naked starter theme that will provide you a rock solid starting point for crafting a serious website on the WordPress platform.

Brave New World HTML5 Theme

Blank & Bare WordPress HTML5 Frameworks

The Brave New World WordPress theme is free from all the elements that are not needed and is built using HTML5, WAI-ARIA landmark roles and hCard and hAtom microformats to provide a great base to build on.

HTML5 WordPress Shell

Blank & Bare WordPress HTML5 Frameworks

The WordPress Shell provides a great starting point for you to build HTML5 WordPress themes on.

HTML5 Reset WordPress Theme

Blank & Bare WordPress HTML5 Frameworks

The HTML5 Reset WordPress theme is a blank theme that provides a great empty slate upon which to build your own HTML5-based WordPress themes.

h5 WordPress Theme

Blank & Bare WordPress HTML5 Frameworks

H5 is a semantically sound and fully valid HTML5 framework for which you can build your WordPress theme on.

]]> http://designwoop.com/2012/01/wordpress-html5-frameworks/feed/ 2 30 Amazing Optical Illusion Pictures http://designwoop.com/2012/01/optical-illusion-pictures/ http://designwoop.com/2012/01/optical-illusion-pictures/#comments Thu, 19 Jan 2012 08:00:00 +0000 Sarah Anderson http://designwoop.com/2012/01/optical-illusion-pictures/ The human brain is an incredibly amazing organ. It is capable of everything from complex calculations, philosophy, social interactions, and many other tasks, all while also maintaining vital functions. Without the interactions between the hemispheres in the brain, creativity would not manifest itself in humans.

However, the brain makes use of patterns and natural observances to make inferences about an object. Optical illusions take advantage of this, by tricking the brain into making an inference about the scene that is not true.

Prepare to be amazed, puzzled, and possibly even confused by these awesome examples of optical illusion photography.

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

30 Clever Examples of Negative Space Logos

]]> http://designwoop.com/2012/01/optical-illusion-pictures/feed/ 1 15 Cool Design Studio Accessories http://designwoop.com/2012/01/15-cool-design-studio-accessories/ http://designwoop.com/2012/01/15-cool-design-studio-accessories/#comments Mon, 16 Jan 2012 08:00:00 +0000 Tomas Laurinavicius http://designwoop.com/2012/01/awesome-stickersacc-for-your-design-studio/ achieve great results and be productive as much as possible you must find a comfortable and cozy environment to work in. Work takes a lot of time in our lives and we would like to make it enjoyable and interesting. It doesn't matter if you're working from home or office your workplace should be inspiring and motivating space where you can let your imagination go wild.]]> If you want to achieve great results and be productive as much as possible you must find a comfortable and cozy environment to work in. Work takes a lot of time in our lives and we would like to make it enjoyable and interesting. It doesn’t matter if you’re working from home or office your workplace should be inspiring and motivating space where you can let your imagination go wild.

I have collected 15 cool design studio accessories for your work or company office. Hopefully you will find something cool to spice up your workstation.

Vintage Wood Calendar Chalkboard

Vintage Wood Calendar Chalkboard

This vintage wall mount features a washable chalkboard with graphics of all 12 months (printed in French!) and 31 days. Complete with 3 slots for holding chalk or other accessories; and 6 total hooks at the bottom for hanging coats, scarves or whatever.

Quack Tape Dispenser

Quack Tape Dispenser

If it looks like a duck, and quacks like a duck, it’s probably a sticky tape dispenser. Wooden tape dispenser shaped like a duck.

Perpetual Calendar Grey Silver

Perpetual Calendar Grey Silver

Designed by Gideon Dagan for the Museum of Modern Art, this elegant calendar can be used year after year. A magnetic ball marks the day on a bar suspended in space. A second ball seems to float as the magnetic tension pulls the string toward the month printed on the outer ring. A distinctive addition to home or office.

A.N. Pen Holder

20 Cool Design Studio Accessories

From Arthur Ditlef, a 3D printed pen holder with a geometric spider-web like design that “traps” pens.

Chalkboard office accessories

Chalkboard office accessories

Instant messaging. Old-school staple writes (then erases) new rules for keeping it together. Scrawl labels, to-dos, doodles, then wipe the slate clean. Includes one piece of white chalk.

Turn Tap for USB Power

Turn Tap for USB Power

The Charging Tap is quite an adorable hub that takes in cellphones, digital cameras, MP3 and other USB enabled devices, for charging. Quite simple and minimal in styling, all you need to do is to hook up your gadget and turn on the tap.

Dot Grid Journal

Dot Grid Journal

The Dot Grid Journal was developed as an alternative to traditional lines and boxes. The light geometric dot matrix serves as a subtle guide for your notations and sketches, while the materials used to create each notebook are cleaned up, de-inked and bleached naturally (no chlorine).

NoteSlate

NoteSlate

NoteSlate is low technology tablet device with true one color display, real paper look design and long life battery. The unique simple interface for pencil and paper brings the obvious technology to completely new experience.

Jumbo Flip Clock

Jumbo Flip Clock

Hit the big time with this giant wall clock that flips the hours away. Over a foot in width, the Giant Wall Flip Clock will definitely make a bold statement. This retro battery-powered clock literally flips through the minutes and hours, making sure its bold numbers are seen from a mile away. The sheer size of this clock is already enough to make you stop in your tracks.

Teamwork Tape Dispenser

Teamwork Tape Dispenser

This desktop tape dispenser is entitled “Teamwork.” This piece bears the message: Teamwork divides the task and multiplies the success.

iPhone Stencil Kit

iPhone Stencil Kit

Quickly sketch out iPhone UI prototypes. Brainstorm your application ideas using our precision cut stainless steel stencil and mechanical pencil.

Qlocktwo Touch

Qlocktwo Touch

Qlocktwo Touch is a precision table clock with alarm function. These characters shine in pure white with a sharp outline using LED technology. A complex process is employed to cut the monolithic corpus in one piece from a single aluminium block and represents a milestone in table clock aesthetics.

Walls Notebook

Walls Notebook

Walls Notebook is a notebook / sketchbook that features 80 pictures of “clean” NYC walls instead of blank pages. Write, draw, paste, or doodle on these inspirational backdrops. You’ll be one step closer to being the street artist you’ve always wanted to be … minus the jail time.

All Natural Full Bamboo Keyboard and Mouse Combo

All Natural Full Bamboo Keyboard and Mouse Combo

This handcrafted All Natural Full Bamboo Keyboard and Mouse Combo not only looks unique and trendy, it also helps you improve productivity. The laser engraved bamboo keys absorb sweat, stay clean and feel comfortable. In addition, the extra four shortcut keys give you easy access to internet, e-mail, mute and calculator.

Stampler

Stampler

It looks and works like a normal stapler – but has an added attachment that prints a smiling face design at the same time. Why would you ever buy a normal stapler again?

]]> http://designwoop.com/2012/01/15-cool-design-studio-accessories/feed/ 2