Archive for March, 2012

The Notebooks: A Showcase of Moleskine Inspiration


  

Given that so many web designs begin as sketches in notebooks, we thought that we would turn our inspirational spotlight towards the artwork that not only begins in the pages of a Moleskine, but that live there too. Often the preferred notebook of so many artists and designers alike, Moleskines tend to be found with each page completely filled. There are even occasions when the covers have been stripped and decorated as the pages have left no more room for the creative expressions of the owner.

There are so many amazing artists’ notebooks featured below, their styles and imaginations laid open to the masses. So take a look down through this showcase of Moleskine inspiration and you are sure to come out the other end with creative ideas flowing freely.

The Notebooks

+ The Creation of a Myth Journal + by Achen089

Moleskine – Rilke by machakhvost

Moleskine Upload 1 by Tikwid

The Nurse close up by NekroEngel

Moleskine by TheDeepSeaGirl

Steady Now by mel-face

Open Hearts Freer Minds by MelissaPolkey

Snowboard by AlbertoCN

Don’t make people into heroes by minnamr

Alpha by Rocktuete

Koi by MissKetie

The Hand of Marie Antoinette by NekroEngel

Metal workers of the world unite by MattiasA

Breathe Again by Fiction69

Self Portrait by mel-face

And that moment was all that is by Raimlla

Freedom by sofirezende

moleskine no.022320122 by yagey

Hectic days for Lion labs by MattiasA

Moleskine page13 by machakhvost

Moleskine 2012 by GatoCasero

Moleskine 022 by LiusyFromDreamBox

sketch book 7 (snow white’s run) by Odistrait

Moleskine paris renard by griffeur

Daily comic #3 by jgurley

peacock dream by faith303

Marriage Made In Heaven by revcruz

pretty lady by thelifeofmax

The girl on the flower by Feierka

All I Need by MelissaPolkey

Just a doodle by sahdesign

Ellismuir Farm by salemskye

Blasphemy by mackk1

study no. 5 by faith303

the queen of the sea moleskine by EinyLune

Picarella and the Wishing Well by rohwer

10024 by ooroo

the Soane museum by MattiasA

moleskine abstract by catherinetseng

The Goggle Vendors of Derk’et Alley by zypherax

(rb)


Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites


  

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

Portfolio Navigation Main Image

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!â€� For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it.

Dawid Wadach
The apparent absence of navigation is the first noticeable thing on wadach.com.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

Dawid Wadach
Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

Dawid Wadach
The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

Harry Vorsteher
The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

Harry Vorsteher
The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow� when you are close to the left-hand side of the screen, a “right arrow� if you are at the right-hand side, and a cross with the words “close� if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

Harry Vorsteher
Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

Justin Lerner
This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

Justin Lerner
The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines, and it is recommended that they are adhered to.

Justin Lerner
The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas� in grey, and a grey box placed next to it containing the word “Experience� in yellow.

Shelton Fleming
Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

Shelton Fleming
The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideasâ€� and “Experienceâ€� dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

Shelton Fleming
Color is also effectively used to indicate hierarchy and navigation options.

Conclusion

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

Chris Wang
At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

Chris Wang
The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

Chris Wang
A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies� and “Brands�. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

Jessica Caldwell
Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

Jessica Caldwell
One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

Jessica Caldwell
Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media� into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us� link, correctly located at the top left and top right hand corners, respectively. Although the “About Us� link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison� on hover.

McCormack & Morrison
The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Workâ€� button at the bottom right hand corner. I say “perhapsâ€� because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

McCormack & Morrison
The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our workâ€� button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

McCormack & Morrison
The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=enâ€� parameter in the URL to “/?lang=esâ€� will yield the Spanish version of their website—this is good usability.

Moka
With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

Moka
Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

Moka
On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about usâ€� and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

(il) (jvb)


© Justin Mifsud for Smashing Magazine, 2012.


A Collection of Great New WordPress Themes


  

Every year designers are pushing the boundaries of what WordPress can do. 2012 is no different. In just a few short months we have seen a large increase in the number of premium WordPress themes being released, and the bar is certainly being raised with the new additions to the ranks.

It’s encouraging to see so many designers making their themes responsive so that their themes look great on desktops, tablets and mobile devices. Designers are also adding more custom page templates, short codes and portfolio functionality to their WordPress themes too.

Today we would like to show you 25 of the best WordPress themes that desginers have been released so far in 2012. We hope you enjoy the list.

The Themes

1. Indie Fest
Regular License: $99

A fantastic looking design for bands and musicians that comes with 8 different backgrounds and 17 main colour schemes. It features a customized twitter feed widget for updating fans, a SoundCloud player to promote your music and a newsletter sign up widget too. It also utilizes the WordPress plugin GigPress for promoting upcoming gigs.

Indie Fest WordPress Theme

Info & Download | Demo

2. Unsigned
Standard License: $70, Developer License: $70

Developed by WooThemes, Unsigned is a powerful responsive design for musicians and bands. The theme is very flexible as it allows you to customise the home page using widgets. Several modules are included to help you build the perfect bad website.

There’s an events module for displaying a list of your gigs and events, a discography module that lets you display album information and a galleries module to manage your photos. There’s also a video module, a SoundCloud player and a featured slider. It also includes lots of WooFramework standard features such as short codes, sidebar manager, built in SEO options and custom page templates.

Unsigned WordPress Theme

Info & Download | Demo

3. LitePress
Single License: $69

A responsive clean magazine design from WP Zoom, LitePress could be used for an online magazine, news website or blog. Featured images are used heavily in this design. There’s a beautiful featured post slideshow on the home page, a featured category widget and a tabbed widget too. All of which use featured images to promote your posts.

The theme also includes a video custom post type for displaying video slideshows and a great theme options area.

Litepress WordPress Theme

Info & Download | Demo

4. Smooth Pro
Essential Package: $39.95, Standard Package: $69.95, Premium Package: $99.95

An advanced real estate theme that comes with IDX-MLS integration. One of the themes best features is the property information search box that lets visitors search by property type, number of bedrooms or bathrooms, location and neighbourhood. Results can be filtered by price too.

Agents can login to your site and add, modify or delete listings. It’s also possible to add video tours directly into listings by simply adding the video link in the post editor video field.

Smooth Pro Real Estate WordPress Theme

Info & Download | Demo

5. Backbone
Standard Pack: $79, Developer Pack: $159

With Backbone, ColorLabs have managed to create one of the most beautiful clean responsive theme frameworks available for WordPress. It uses a drag and drop user interface for the options area that lets you customise every aspect of your website. The layout and sidebar managers work great and it has a useful import and export feature for your settings.

Bacbone also comes with two stylish child themes. Kirei is a business template that is suitable for corporate websites and portfolios, whilst Vidio is a great looking blog theme made specifically for video bloggers.

Backbone WordPress Theme Framework

Info & Download | Demo

6. A Personal Blog
Regular License: $30

A simple elegant WordPress design that is perfect for personal blogs. It comes with five custom widgets for displaying your logo, tweets and ads. It also has 5 built in short codes for controlling your typography and archives and contact page templates.

A Personal Blog WordPress Theme

Info & Download | Demo

7. Guesthouse
Regular License: 35$

Guesthouse is a fully functional hospitality theme that was created for hotels, restaurants, B & Bs, camp sites, travel agencies, ski resorts and more. Designed using HTML5, it comes with 8 theme skins, lots of portfolio layouts and a home page slider that has over 20 effects.

A short code generator is also built in to help you style your content and the admin area can be branded easily with your own logo, colours and text.

Guesthouse WordPress Theme

Info & Download | Demo

8. Webworks
Regular License: $35

Webworks is one of the most unique and most stylish designs released so far in 2012. Users get to choose from 4 beautiful animated menus for the home page. It comes with a resume page template for your CV, FAQ page template, 6 portfolio templates, contact template and a blog template that can have the sidebar placed on the left or right or removed altogether.

The responsive design also looks great on mobile devices and it supports 50 font types.

Webworks WordPress Theme

Info & Download | Demo

9. ShopDock
Standard License: $39, Developer License: $59

Powered by WooCommerce, ShopDock is an Ecommerce design with a difference. Rather than having to go to the checkout page to view the number of items in their cart, a permanent shopping cart (the ShopDock) is displayed at the bottom of every page using Javascript. It sounds a bit gimmicky but is actually a very useful feature.

Coded in HTML5 and CSS3, ShopDock has a responsive design and it also comes with 7 colour schemes and a great looking customizable feature product slider on the home page.

ShopDock WordPress Theme

Info & Download | Demo

10. Perseus
Regular License: $35

A simple yet beautiful WordPress design that is suitable for blogs or portfolio websites. The portfolio template allows you to place portfolio items in 1, 2 or 3 columns. You can also add a nivo slideshow to any of your pages.

It’s not the most feature rich WordPress theme available though this simplicity should appeal to those of you who are looking for a basic yet elegant design for their website.

Perseus WordPress Theme

Info & Download | Demo

11. Eleven40
Regular License: $24.95, With Genesis Framework: $79.95

Powered by the Genesis framework, Eleven40 is a beautiful responsive design that can have a 1, 2 or 3 column layout. It also comes with 4 colour schemes and works with custom headers, featured images and threaded comments.

Eleven40 WordPress Theme

Info & Download | Demo

12. Vintage Camera
FREE

A free, retro blogging design that comes in 5 different styles. It has a responsive design and supports WordPress post formats such as videos and quotes, custom flyout menus and 3 widget areas in the footer. Custom header and background options are supported too.

Vintage Camera WordPress Theme

Info & Download | Demo

13. Delicacy
FREE

A beautiful clean design that was developed for food related blogs. Recipe details such as preparation time can be added underneath the post editor, though the design could easily be used for any type of blog.

It also features a nivo slider on the home page, 4 custom widgets, 6 colour schemes and 6 background patterns.

Delicacy WordPress Theme

Info & Download | Demo

14. Resolution
FREE

One of the best looking free WordPress designs released this year. Resolution is big, bold and stylish. It uses beautiful fonts and blog post pages have no sidebar so that more emphasis is placed on content. The theme comes with a basic options area that lets you customise the background image and it supports WordPress menus too.

Resolution WordPress Theme

Info & Download | Demo

15. Convertible
Access to all Elegant Themes designs for $39 per year

A great theme for marketers, Convertible allows you to create professional looking landing pages easily. Pages can be designed using a user friendly drag and drop page builder. 13 modules are included to help you build your page including image and content sliders, testimonial boxes, tabbed content and ribbon headers. It also boasts a very cool Ajax powered options page.

Convertible WordPress Theme

Info & Download | Demo

16. Sundance
FREE

Sundance is a clean blogging theme from the Automattic team. It supports sticky posts and custom headers, backgrounds and menus. A full page template is included and the home page has a beautiful video carousel to showcase your latest video posts.

Sundance WordPress Theme

Info & Download | Demo

17. Veles
Regular License: $35

A clean corporate design that comes with 3 different home page layouts. It also comes with a services template, contact template, about us template, blog template and 4 different portfolio template layouts. 5 different sliders are included too and there built in short codes for styling your content.

Veles WordPress Theme

Info & Download | Demo

18. Feature!
Regular License: $45

Feature! is a community magazine theme that integrates beautifully with the popular plugins BuddyPress and bbPress. Coded using HTML5 and CSS3, it comes with 6 different colour schemes and 100 background patterns and there is a built in review system with 3 different thumbnail types.

Unlimited sidebars can be created if you want to give each page a unique look. 6 custom widgets and lots of short codes are built in to the theme too. It’s a great option for an online magazine.

!Feature WordPress Theme

Info & Download | Demo

19. Domena
Regular License: $20

Domena is a simple clean template that will help you sell your domain name online. A light and dark version of the design are available and there is 4 different colour schemes available for buttons and links etc.

What makes Domena so special is it’s integration with Google Analytics. This option will be particularly useful to those who are selling domains with good traffic. A mobile version of the theme is also included.

Domena WordPress Theme

Info & Download | Demo

20. Pixem
Regular License: $35

Pixem is a unique responsive portfolio design that was coded using HTML5. It’s an incredibly versatile theme which comes with light and dark colour schemes. It also includes 12 background images, 2 portfolio styles, four custom post types, seven custom widgets and 8 unique page templates.

Pixem WordPress Theme

Info & Download | Demo

21. HyperGrid
Regular License: $35

One of the best gallery showcase templates released over the last few years, Hypergrid is a great design for galleries and online portfolios. Advertising has been integrated into the design perfectly and it comes with a built in submission form to encourage visitors to submit their own websites or designs. The only thing it lacks is the option to charge visitors for submissions.

Hypergrid WordPress Theme

Info & Download | Demo

22. Big Company
Regular License: $30

Big Company is a clean corporate design that comes with 15 different colour schemes. What sets this apart from most other business designs is the ability to customise every single page with a different background. This is a great tool for branding different areas of your website.

A fantastic looking pricing table manager is also built into the theme and there are numerous custom page templates too.

Big Company WordPress Theme

Info & Download | Demo

23. Handmade
Regular License: $35

With a cute design that is more common on personal blogs, the Handmade theme from Obox is a fully functional WooCommerce eCommerce design that stands out from the crowd. Large images are used throughout the theme to list products and it has a stylish blog template as well.

Handmade is a great choice for an arts and crafts shop or a personal blog and is powered using the OCMX Live theme framework so WordPress beginners will be comfortable using it.

Handmade WordPress Theme

Info & Download | Demo

24. Right Now
Regular License: $35

Right Now is a stunning WordPress design for photographers that was developed using HTML5 and CSS3. The rotating full screen background supports images and video. Visitors can change the background using a gallery slider at the bottom of the page. Thankfully, there is a button at the bottom of the page for visitors to turn off audio if they find music from your video annoying.

The theme also supports over 450 Google fonts though one of its best features is the gallery manager that lets you upload more than 100 images at the one time. It’s shaping up to be one of the best selling WordPress themes in the ThemeForest marketplace in 2012.

Right Now WordPress Theme

Info & Download | Demo

25. Wisdom Of Life
Regular License: $35

Wisdom Of Life is a clean corporate theme that has a magazine style layout. It was designed for charities and non-profit organisations though could easily be adapted for a news or business website. It includes options for events management, 4 different portfolio page templates and lots of custom widgets.

Wisdom Of Life WordPress Theme

Info & Download | Demo

What’s your favourite design from the beginning of this year? If your favourite theme didn’t make our list, please leave a comment below and share it with other Noupe readers.

(rb)


Useful WordPress Tools, Themes And Plugins


  

If you’re looking for some great ways to improve your WordPress workflow, read on for a massive collection of free themes, plugins, tools and tutorials. These resources were all linked via the Smashing Magazine Twitter stream, Facebook stream, and other social-media streams around the Web.

These awesome resources have now been organized and consolidated for easy reference to help you get the most out of the world’s #1 publishing platform. Enjoy!

Free WordPress Themes

There are probably a billion WordPress themes available these days. But not all of them are worth using or even looking at. Fortunately our readers send in some amazing and beautifully designed themes for us to check out and share. So without further ado, here are some of the best WordPress themes we’ve discovered along the way, neatly summarized and linked for your surfing pleasure.

Grid Portfolio Theme
Beautiful minimal and modern WordPress themes. Design for illustrators, photographers and graphic designers.
The focus should be on your work, not the theme.

Grid Portfolio Theme

Foghorn Theme
Foghorn is a minimalist WordPress theme built off of the foundation of Twenty Eleven. It has a custom options panel for switching layouts, removing sidebars, uploading a logo, and changing footer text.

Foghorn Theme

BonPress: WPZOOM
BonPress is the perfect personal blog theme. Packed with a post formats feature (for audio and video) and multiple custom widgets, like Twitter, Flickr, it will offer you a unique experience from blogging.

BonPress - WPZOOM

Roots WordPress Theme
Roots is a starting WordPress theme made for developers that is based on HTML5 Boilerplate, Starkers, and the most popular CSS frameworks.

Roots WordPress Theme

NeueGrafik: A Free Modern WordPress Theme
This theme is totally unique and simple, it’s great for any graphic designer, illustrator or photographer to showcase their portfolio.

NeueGrafik: A Free Modern WordPress Theme

Free Minimal Swiss Design WordPress Themes (4 Themes)
In this post the authors release yet another freebie: an original set of four exclusive minimal, clean WordPress themes designed by Marios Lublinski and released for the Web design community.

Free Minimal, Swiss Design WordPress Themes (4 Themes)

Free HTML 4.01/HTML5 WordPress Theme: Spectacular
A free WordPress theme that aims to provide a warm and pleasurable atmosphere for personal musings and ramblings.

Free HTML 4.01/HTML5 WordPress Theme: Spectacular

Scherzo: Free WordPress Theme
A clean, readable theme. Boasts a responsive design, which means it displays perfectly on all devices, including mobile phones (not just iPhones), tablets and desktops.

WordPress › Scherzo « Free WordPress Theme

Unspoken WordPress Theme
Advanced WordPress Premium theme that was developed from your proceeding wishes. Unspoken is our first, clean, simple and easy to customize premium WordPress theme specifically designed for your news or magazine website.

Unspoken WordPress Theme

Free WordPress 3.1 Theme: Splendio (With PSD Sources)
A new freebie: a beautiful theme, designed by Vlad and Elena Scanteie which was developed exclusively for Smashing Magazine and its readers.

Free WordPress 3.1 Theme: Splendio (With PSD Sources) — Smashing Magazine

Suburbia 1.1 WordPress Theme
Suburbia is a free premium WordPress theme for magazines. The layout is very clean and flexible and designed in a modest and minimalistic style.

Suburbia 1.1 WordPress Theme

Portfolium 1.1 WordPress Theme
Portfolium can be used on portfolio websites or blogs and has a minimalistic design that is perfect as is or as a foundation for your custom design.

Portfolium 1.1 WordPress Theme

Typominima: A gorgeous typography-based minimal WordPress theme
Neat and flexible grid-based theme for WordPress CMS and Portfolium that can be used on portfolio websites or blogs. If you are designer, artist, photographer, or other creative specialist, you can take a full advantage of Portfolium’s fresh minimalistic design — perfect as is, or as a foundation for your custom design.

Typominima — a gorgeous typography-based minimal WordPress theme

Modernist: Free WordPress theme with focus on typography
Yet another freebie: a beautiful Modernist WordPress theme, designed by Rodrigo Galindez, and released for Smashing Magazine and its readers. This theme is based on the design ideas of Jan Tschichold, Josef Müller-Brockmann, Dieter Rams, and other modernists.

Modernist: Free WordPress Theme with Focus on Typography

Free HTML 5 Responsive WordPress Theme for Photographers
Photum is a theme to use with WordPress that will turn your site into a clean portfolio that you can use to show off your photos.

Free HTML 5 Responsive WordPress Theme for Photographers

Renova WordPress Theme
Renova, a new single column theme for WordPress. The main design of Renova concentrates on a minimal style dedicated to those writers who need a simple layout, without the useless stuff. Just words… your words.

Renova WordPress Theme

Free E-Commerce WordPress Theme: Balita: Smashing Magazine
In this post the authors release yet another freebie: the Balita WordPress theme, a theme dedicated to shops that sell products for children.

Free E-Commerce WordPress Theme: Balita — Smashing Magazine

Ari WordPress Theme
A free WordPress theme for WordPress 3.0+ and translation-ready.

Ari WordPress Theme

WordPress Anniversary Theme
On January 25, 2003, a seemingly one-off comment by “Mike” on Matt Mullenweg’s blog started a chain reaction that resulted in the creation of WordPress. Today, WordPress powers millions of blogs and websites, making it incredibly easy to build a website!

WordPress Anniversary Theme

Free WordPress 3.0 Theme for Portfolios and Magazines: JournalCrunch
In this post the authors release yet another freebie: JournalCrunch WordPress 3.0+ theme, a theme for either portfolios or magazines with an integrated journal.

Free WordPress 3.0 Theme for Portfolios and Magazines: JournalCrunch

Academica: Free WordPress 3.0 Theme For Educational Websites — Smashing Magazine
A free WordPress theme designed specifically for educational websites such as universities, schools, etc.

Academica: Free WordPress 3.0 Theme For Educational Websites — Smashing Magazine

Free Theme: Quality Control, a Simple Ticket or Bug Tracker
This theme allows for the easy creation of a ticket / support system right within WordPress, and for free.

Free Theme: Quality Control, a Simple Ticket or Bug Tracker

Free Designer Theme
Beautiful minimal and modern WordPress themes. Designs for illustrators, photographers and graphic designers. The focus should be on your work, not the theme.

Designer Theme (Free)

HTML5Press
HTML5Press lives here. HTML5Press is a WordPress theme based on the HTML5 template by Jesper.

HTML5Press

Landing pages, squeeze pages, sales pages, and A/B testing made easy for WordPress
The authors deliver high-quality premium WordPress themes and plugins that make it easy to take your website to the next level.

Landing pages, squeeze pages, sales pages, and A/B testing made easy for WordPress

Bubblog Theme
A modern, clean WordPress theme. It has a management console, is widget ready, advertisement ready, and is an easily customizable theme to use.

Bubblog Theme

WordPress Plugins

Besides themes, plugins are another way to customize your WordPress website with advanced functionality and interactivity. As with themes, there are plugins for just about everything you can possibly imagine. But also like themes, it can be difficult to sift through the fluff, and find those gems that truly improve your website.

When you do find a WordPress plugin that’s great, you just have to share it with others in the community. So put on your plugin-checking goggles, because it’s about to get interesting!

Event Organizer
Event Organiser adds event management that integrates well with your WordPress site. By using WordPress’ in-built ‘custom post type’, this plug-in allows you to create events that have the same functionality as posts, while adding further features that allow you to manage your events.

WordPress › Event Organizer « WordPress plugins

Ninja Forms: A New Free Plugin for Creating Forms in WordPress
Every website needs forms – it’s an integral part of visitor/customer communication. However, custom forms can be a downright pain to code.

Ninja Forms: A New Free Plugin for Creating Forms in WordPress

Bookings: Zingiri
Bookings is a WordPress plugin allowing you to provide online booking services for your website.

Bookings — Zingiri

How To Safely Store A Password
bcrypt uses a variant of the Blowfish encryption algorithm’s keying schedule, and introduces a work factor, which allows you to determine how expensive the hash function will be. Because of this, bcrypt can keep up with Moore’s law. As computers get faster, you can increase the work factor and the hash will get slower.

How To Safely Store A Password

WordPress › Welcome Pack « WordPress Plugins
Welcome Pack is a BuddyPress plugin that enhances the new user’s experience

WordPress › Welcome Pack « WordPress Plugins

WordPress › Pricing Table « WordPress Plugins
WordPress Pricing Table plugin will help the admin to publish a pricing table on your WordPress page, or even to post content to it. WordPress Pricing Table plugin has a full-featured (but easy to use) administration option to create a pricing table.

WordPress › Pricing Table « WordPress Plugins

WordPress › Anti-Splog « WordPress Plugins
The ultimate plugin and service to stop and kill splogs in WordPress Multisite and BuddyPress, from WPMU DEV.

WordPress › Anti-Splog « WordPress Plugins

WordPress › Email Address Encoder « WordPress Plugins
A lightweight plugin to protect email addresses from email-harvesting robots by encoding them into decimal and hexadecimal entities.

WordPress › Email Address Encoder « WordPress Plugins

The Sweet Plugin: User Switching
Today’s Sweet Plugin is User Switching, which has quickly become one of my all-time favorite plugins. It allows admins to easily switch to another user, skipping the log-in / log-out process, which can become quite time-consuming for testing the websites of different users. This is one plugin that is seriously worth checking out.

The Sweet Plugin: User Switching

welaika/wordless – GitHub
Wordless is an opinionated WordPress plugin that dramatically speeds up and enhances your custom themes creation.

welaika/wordless - GitHub

Pin, organize and show your favorite places through OpenStreetMap/WMTS, Google Maps/Earth (KML), GeoJSON or Augmented-Reality browsers » Leaflet Maps Marker WordPress Plugin
The WordPress plugin “Leaflet Maps Marker� allows you to pin, organize and show your favorite places through OpenStreetMap on your blog and via different APIs on external websites or apps

Pin, organize & show your favorite places through OpenStreetMap/WMTS, Google Maps/Earth (KML), GeoJSON or Augmented-Reality browsers » Leaflet Maps Marker WordPress Plugin

Front End Upload, a New WordPress Plugin — Monday By Noon
Announcing Front End Upload, a New WordPress Plugin

Announcing Front End Upload, a New WordPress Plugin — Monday By Noon

Simple:Press
Welcome to Simple:Press — the feature-rich, completely integrated and fully scalable forum plugin for WordPress.

Simple:Press

Types WordPress Plugin: Easy Custom Post Types

Types WordPress plugin — Easy Custom Post Types — Yoast

WordPress › Wordgento « WordPress Plugins

WordPress › Wordgento « WordPress Plugins

yolink — widgets / yolink Search for WordPress
Optimize your website search, maximize engagement, and position your website to drive organic search rankings with the most powerful search solution for WordPress.

yolink - widgets / yolink Search for WordPress

More Fields « More Plugins
More Fields is a WordPress plugin that adds boxes to the Write / Edit page. These boxes contains input fields, so that additional (more) fields can be added to a post. For example, if you write about books, you can add a box where you can enter the title and the author, etc. The boxes can be placed either to the right or to the left of the Write / Edit page.

More Fields « More Plugins

Usernoise Modal Feedback: A Free WordPress Contact Form That Just Works
WordPress websites are always in need of a good contact form. Are you looking for a feedback / contact form that works right out of the box? Should it have an attractive aesthetic, with a simple yet full-featured form? Look no further than the free Usernoise Modal Feedback Contact Form plugin.

Usernoise Modal Feedback: A Free WordPress Contact Form That Just Works

WordPress SEO by Yoast, version 1.0 — Yoast
The SEO plugin by Yoast helps all our editors add SEO juice to their post fast and easy. Editors should focus on writing content, not gaming results. But they are the ones most suitable to write descriptions and titles for their own stories. This plug-in allows them to do just that without needing an SEO expert to walk them through the process. An invaluable tool for any professional blog.

WordPress SEO by Yoast, version 1.0 — Yoast

Michael Fields » Post Format Queries

Michael Fields » Post Format Queries

WP Document Revisions — Document Management for WordPress
WP Document Revisions is a document management and version control plugin for the popular content management system, WordPress. Built for time-sensitive and mission-critical projects, teams can collaboratively edit files in any format — text documents, spreadsheets, images, sheet music… anything, while seamlessly tracking the document’s progress as it moves through your organization’s existing workflow.

WP Document Revisions — Document Management for WordPress

WordPress Tools

Beyond themes and plugins, there are tools and resources to further help with improving the presentation, organization, and functionality of your WordPress-powered website. Here is our growing collection of WordPress tools that we’ve collected from around the Web:

Manage WordPress Websites from One Dashboard — ManageWP.com

Manage WordPress Websites from One Dashboard — ManageWP.com

WordPress Mobile Pack
The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress website and blog. It includes a mobile switcher to select themes based on the type of user that is visiting the website, a selection of mobile themes, extra widgets, device adaptation, and a mobile administration panel to allow users to edit their website, or write new posts when they are out and about.

WordPress Mobile Pack

zencoder/html5-boilerplate-for-wordpress
This theme is built on the HTML5 Boilerplate by Paul Irish and Divya Manian. The sole purpose of this theme is to save developers the time it takes to apply the HTML5 Boilerplate to WordPress. The “HTML5 Boilerplate” name is used with permission from Paul Irish.

zencoder/html5-boilerplate-for-wordpress

Default WordPress Generated CSS Cheat Sheet for Beginners
The goal of this cheat sheet is to assist beginners who are looking to get into WordPress theme styling.

Default WordPress Generated CSS Cheat Sheet for Beginners

Reverie: Versatile HTML5 WordPress Framework

Reverie: Versatile HTML5 WordPress Framework

HTML Sitemap for WordPress
There are plenty of plugins out there that will help you make an HTML sitemap

HTML Sitemap for WordPress

Web Design WordPress Function List

Web Design WordPress Function List

WordPress TextMate Bundle
The WordPress TextMate Bundle is a TextMate bundle that is built with the sole purpose of reducing the amount of time spent digging around the WordPress core to look up those little things that we work with every day.

WordPress TextMate Bundle

WordPress 3 Template Hierarchy
The idea is that WordPress will look for files in a theme that will be used to render the current page in a specific order.

WordPress 3 Template Hierarchy

OnSwipe — Insanely Easy Tablet Publishing
Make your blog look beautiful on tablet Web browsers in under 3 minutes.

OnSwipe — Insanely Easy Tablet Publishing

WordPress Initialization

WordPress Initialization

Wonderflux — WordPress free, open source theme framework

Wonderflux — WordPress free, open source theme framework

WordPress Widget Boilerplate
The WordPress Widget Boilerplate features file organization, documented code, and is built with the WordPress API for best practices.

WordPress Widget Boilerplate

Force Reload of Scripts and Stylesheets in your Plugin or Theme — tutorial plugin theme — WP Engineer
Force Reload of Scripts and Stylesheets in your Plugin or Theme

Force Reload of Scripts and Stylesheets in your Plugin or Theme — tutorial plugin theme — WP Engineer

Instant WordPress
Instant WordPress is a complete standalone, portable WordPress development environment. It turns any Windows machine into a WordPress development server. It can even run from a USB key.

Instant WordPress

Reverie: Versatile HTML5 WordPress Framework
Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of device. Reverie follows HTML5 Boilerplate standards, and is hNews microformat ready. It is optimized for search engines, while at the same time improves readability.

Reverie: Versatile HTML5 WordPress Framework

andreascreten/wp-cli — GitHub
A set of tools for controlling WordPress installations from the command line.

andreascreten/wp-cli — GitHub

WordPress Tutorials

Wrapping up these super-useful themes, plugins, and tutorials, here is a hand-picked collection of some great WordPress tutorials:

Using TextMate for WordPress Code Cleanup
In this post, the author will show you how to add two useful commands to TextMate, then move through the steps taken for theme code cleanup, finally putting the commands into practice.

Using TextMate for WordPress Code Cleanup

WordPress Internals: How WordPress Boots Up — Theme.fm
The authors have written their own Twitter (or other service feed plugins / widgets), to those who are simply interested in PHP and software architecture. They invite you to join us on a journey deep into WordPress core code.

WordPress Internals: How WordPress Boots Up — Theme.fm

Importing WordPress Users via CSV Files
Conceptually, the idea is simple: import the data to create actual users for a WordPress-powered website. The trick is to clean up the data as much as possible to ensure valid username and password information. Once the data is good, importing it is easy, using a plugin.

Importing WordPress Users via CSV Files

How to Redirect Logged-In Users
WordPress provides a variety of ways to redirect logged-in users. In this DiW post, we explain each of these methods along with some useful tips and tricks along the way. These techniques enable you to redirect logged-in users to internal pages, external pages, and even return them to the current page.

How to Redirect Logged-In Users

How to Build a Shortened URL Service with WordPress Custom Post Type
The point of this tutorial is to push the limits of WordPress, and that’s going to take some real thought!

How to Build a Shortened URL Service with WordPress Custom Post Type

Ajax-Powered Error Logs for WordPress
This tutorial shows you how to set up dynamic error monitoring on any typical website. But the script will require some tweaking to get it to work with WordPress.

Ajax-Powered Error Logs for WordPress

Scaling WordPress for High-Traffic
This talk (presented by Envato’s very own developer extraordinaire, Ryan Allen), will detail some of the potential pitfalls and solutions when maintaining massive WordPress blogs, such as “Tuts+”.

Scaling WordPress for High-Traffic

How to optimize plugin loading — Practical
This tutorial is primarily for plugin developers, but it can also be useful reading for anyone working with WordPress, to help them better understand how plugins load, and what can be done to improve them.

How to optimize plugin loading — Practical

WordPress Optimization — DreamHost
There are many reasons why you may want to optimize your WordPress blog — primarily, you want your website to load quickly. That of course encompasses a number of other things such as wanting to make sure your website can handle large volumes of traffic without choking, and making sure your website’s processes aren’t being killed due to using too many server resources.

WordPress Optimization — DreamHost

WordPress HTTP API — easily GET or POST in WordPress — Yoast
The WordPress HTTP API makes fetching from (or posting to) remote servers a breeze. It does this by allowing you to be transport agnostic when you either fetch or post something. The HTTP API will choose the fastest and most reliable method out of the five different transports available in PHP. It will take care of discovering what transports are allowed on that server at that time.

WordPress HTTP API — easily GET or POST in WordPress — Yoast

WordPress SEO Tips — WPShout.com

WordPress SEO Tips — WPShout.com

Admin Bar Tricks
In this DigWP post, the authors round up a ton of tips, tricks, and plugins for ultimately mastering the WordPress admin bar.

Admin Bar Tricks

Optimizing WordPress Permalinks with htaccess
The topic of this post is how to use htaccess to optimize WordPress permalinks.

Optimizing WordPress Permalinks with htaccess

Writing Unit Tests For WordPress Plugins
When my WordPress plugin had only three users, it didn’t matter much when it broke down. By the time I reached 100,000 downloads, every new update made my palms sweat. My first goal for the WordPress Editorial Calendar was to make it do anything useful. I was new to JavaScript as well as PHP, and didn’t really know what I could pull off. In a few days I had a proof of the concept. In a few more days I had a working version, and was asking friends to install it. The calendar worked… sort of. I spent three times as much time fixing bugs as I did with coding. Once the plugin worked, I wrote unit tests to make sure it kept working. The unit tests for my calendar use QUnit, but they really use just three functions: test, expect, and ok. This article shows you how to integrate unit tests into your WordPress plugin, where to write unit tests, and how they can help you.

Writing Unit Tests For WordPress Plugins

How to Setup Your Own Nginx Powered WordPress Server
Nginx is a Web server software that allows your server to serve files. Nginx is fairly new to Web server work, relative to other popular Web servers. If you look at the graph below, you can see Apache as the “top dog� (going all the way back to before 1995), while Nginx just started showing up in March, 2007.

How to Setup Your Own Nginx Powered WordPress Server

Group WordPress Project: A Purpose & A Name
This time, the author is looking to narrow things down a bit, and needs your help to determine the overall purpose of the theme, and to start thinking about a possible name.

Group WordPress Project: A Purpose & A Name

Inside WordPress Actions and Filters

Inside WordPress Actions and Filters

How To Create Custom Post Meta Boxes In WordPress
Creating custom meta boxes is extremely simple — at least it is once you’ve created your first one using the tools baked into WordPress’ core code. In this tutorial, the author will walk you through everything you need to know about meta boxes.

How To Create Custom Post Meta Boxes In WordPress

How to use Ajax in WordPress
AJAX is the technology that lets you update the contents of a page without actually having to reload that page in the browser.

How to use Ajax in WordPress

Limiting The Visibility Of Posts In WordPress Via Usernames — Smashing WordPress

Limiting The Visibility Of Posts In WordPress Via Usernames — Smashing WordPress

How to Sync A Local And Remote WordPress Blog
If you prefer to work on your WordPress projects locally, but have to get them to sync remotely, then this tutorial is for you.

How to Sync A Local And Remote WordPress Blog

WordPress Multisite: Practical Functions And Methods — Smashing WordPress
Multisite is a powerful new feature that arrived with the release of WordPress 3.0. It allows website managers to host multiple independent websites with a single installation of WordPress.

WordPress Multisite: Practical Functions And Methods — Smashing WordPress

The Definitive Check List for Publishing Your WordPress Plugin
This tutorial will guide you through publishing your plugin in the WordPress plugin directory. It works as a check list to help you make sure the plugin will be ready for the prime time by the time you hit publish.

The Definitive Check List for Publishing Your WordPress Plugin

Last Click

More than 40 Keyboard Shortcuts to Use in the WordPress Editor

More than 40 Keyboard Shortcuts to Use in the WordPress Editor

WordPress functions.php Snippets

WordPress functions.php Snippets

WordPress Snippets
Code snippets for WordPress developers

WordPress Snippets

Huge Collection of Code Snippets: HTAccess, PHP, WordPress, jQuery, HTML, CSS
There are all sorts of different types of code and snippets that just keep growing and growing… and finally it gets to a point where I just need to dump everything, and start over again fresh. That’s the purpose of this post.

Huge Collection of Code Snippets: HTAccess, PHP, WordPress, jQuery, HTML, CSS

(jvb) (il)


© Smashing Editorial for Smashing Magazine, 2012.


Matthew Hawkins: Toying Around With Paper Engineering Creativity


  

When I was with a former employer there were rumors of upcoming layoffs (obviously the rumors ended up being true or I wouldn’t be referring to it as a FORMER employer). The company denied the rumors, which sent employees a message to be nervous. Sure enough, layoffs started. First it was some forced retirements. Then the sales force got hit hard. Naturally, the creative department, which was one of the largest of any American company, started suffering odd hits among the staff.

Many of these people were leaders in creative innovation that were completely undervalued and underused. Matthew Hawkins was one such individual. His success at making his passion the top priority in his life shows how much untapped potential went to waste while working for the company. But, as the saying goes, “one door closes and another opens.� The open door also allowed him to profit from his passion, rather then let it bypass his pocket and go directly to his employer.

Matthew Hawkins. Self portrait in paper.

How He Started A New Creative Path

“Well,â€� Matthew begins, “I was working at a greeting card company as a production artist and they had these free soda machines. So every time you went to get a soda a little plastic cup would drop down and at the end of every day I’d amass a small stack of plastic cups. One day I turned one over and drew a face on it with a Sharpie. Then I used some index cards and made little paper limbs for my little ‘Cupenstein.’”

“So I started making more and more cup figures,” Matthew resumed, “and started making more and more elaborate paper accessories like cars and whatnot. In a little while these creations were more paper than plastic cups. About this time I came across the website http://www.paperforest.blogspot.com and they feature artists who were making these amazing little paper crafts and sharing the templates online. I made a paper craft character to promote a comic I had just released. I was hooked and things just took off from there.”

“While at the card company,â€� he continues, “I got a couple art directors interested in the idea of putting some punch out and assemble toys inside of cards, so we developed a line for Father’s Day. We thought kids and dads would enjoy making these models. So I was given the time and resources to fully develop them.â€�

Unfortunately, as can happen with innovative ideas, Matthew’s ideas were a bit too fresh for some. As he relates the story, “they were presented to a certain retailer that didn’t go for them and I’m not sure why we never tried the concept again. People seemed to dig them. I know I’ve hit roadblocks with other companies because they feel they aren’t instant gratification, they’re too hard to build, kids don’t have the attention span or parents don’t really want to spend time with their kids — they want something to throw at them to keep them quite for a few minutes. I disagree with all these things and that’s why I continue to work with companies who believe these toys are a great project for families and kids and have great value and fun.â€�

Luckily, Matthew landed at a company that saw value and fun in his work. “I do a lot of papertoys for my current employer, who specializes in fast food premiums — stuff you would find in kids meals from fast food restaurants. We use ‘papertoys’ (Matthew’s term for his paper creations) to cost balance plastic or plush toys. So we might do a month of papertoys so we can afford to do really cool plastic or plush toys the next month or will put one papertoy in with a group of plastic toys. With the price of oil/plastic going up, shipping getting more expensive and a rising wages in China, papertoys have become a great option for us. They are cheaper, can be domestically produced and at the end of their life, biodegradable! I also design and illustrate a lot of kid’s menus for them.

Just a few of Matthew’s creations for fast food premiums.

Matthew has also discovered that his 3d work has become an art form, showing in galleries around the globe. “I have sent papertoys to shows in LA, New York, Vancouver, Amsterdam. Places like Rivet Gallery in Columbus and Pink Hobo in Minneapolis. Lately I’ve been doing these larger scale Shadow Box type pieces that use my paper craft atheistic but applies it to a more ‘hang on the wall’ type art. I love doing large freestanding pieces but they don’t sell because people don’t know what the heck to do with them!â€�

After so many creations and successes on the market and in galleries, it was inevitable that Matthew do a collection in book form. “Urban Paper was my first book experience and it sold out in its first year but didn’t get a second printing,â€� he reflects. “Mostly I think due to a bad economy when it came out a few years back but since then I’ve done publishing projects for books and toy kits that have been selling well!â€�

One of the many books in which you can find Matthew’s work. Check out his site for more!

There’s a good chance you’ve already seen Matthew’s papertoys in a magazine or newspaper. As a 3D illustrator, he has had some impressive clients. “I started out wanting to do editorial illustration,â€� he recalls, “so I love it when I get a chance to build a little paper craft scene or toy that gets used for illustration. I’ve done stuff for a kid’s magazine, alternative newsweeklies and even did a papertoy version of Rupert Murdoch driving a paper machine robot for Newsweek!

Cover of The Pitch — Kansas City (Village Voice Publishing).

Naturally, I had to ask how long it takes him to create one of these pieces, from concept to finished piece, as it’s not just design but also paper engineering. “A long, long while,â€� he answered, dodging the question nicely. “I really have no idea. All I know is it always takes longer than I think. I enjoy the process so I don’t really count the hours but when a commercial project comes down I’m almost always under the time quoted.â€�

With a growing reputation and exposure, Matthew’s work is gaining popularity. I asked what projects he has on the horizon. “I’m actually doing some small kids crafts and a big paper craft piece for an upcoming event at the Nelson-Atkins Museum in Kansas City, Missouri. I also have a full year of gallery shows to which I’m sending pieces. But this year, I’m really concentrating on getting some retail stuff in the market place. I went to Toy Fair a few week ago and saw a lot of crap paper craft kits being offered and I thought ‘HEY! I can make crap paper craft kits, too!’ So, I’ll be focusing on some of those projects.â€�

What’s Matthew’s future in this creative avenue? “I’m just going to keep plugging away, and I want to get back to doing more free models to download from my site. I love to share these things for free as it was a big part of what inspired me to start making them. I’m working with a few different toy companies to make a few retail papertoy kits for the market.â€�

Matthew imparts some advice for those who want to explore making 3D papertoys. “Grab a piece of paper and start cutting, gluing and folding! Really explore the medium with your hands. Don’t open up Illustrator and start making cubes.â€�

Creativity Is The Key Basis To Success!

It’s been a while since Matthew left his fulltime job and the safety of a weekly paycheck. I asked how he feels about his success as a 2D illustrator/designer, moving into the 3D arena. “It’s weird!â€� he admits. “It wasn’t something I planned. I just found something I enjoyed and shared it. As soon as I stopped trying to make a career drawing and designing what I thought would sell and just followed my passion, things just started to happen for me!”

“I’ve managed to make a decent career doing what I love.” He adds, “I find having that background in concepting, illustrating and character design gave me a leg up over some paper engineers who are more engineer-centric and not as creative. So I’ve found a sweet spot between the technical and the creative. I love it when I get to jump a technical hurdle in pursuit of a creative goal.â€�

One of Matthew’s innovative projects.

Matthew’s piece from the Pee-Wee Herman Show in Los Angeles.

Available at Barnes & Noble: Robot Wars. Build ‘em, battle ‘em, love ‘em!

Andy Warhol and his fifteen minutes of fame… unless you leave him out in the rain!

I asked Matthew what other uses his toys might have and he answered: “Kindlingâ€� demonstrating how important it is to have a sense of humor about one’s work. His papertoys are worthy of a place of honor in our lives… though not when on fire! Mostly because they are whimsical, fun, colorful and beautiful; but also because it reminds us that creativity is boundless and that is our strength and gift. Use it well.

Check out Matthew’s site for more information, lots of more cool papertoys, videos, books and other stuff. You can even download some free toys!

(rb)


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress