Feature
Post

Category
Design

6 WordPress Themes for iPhone Apps

Recently I had to go through the WordPress themes for iPhone apps for a client. Surprisingly there aren’t many available and not all are really great. The best is always to have a theme designed specially for your app, but time and budget can play you parts.

Not everyone has a big budget to develop an iPhone app, let alone have a WordPress theme designed for your apps website. In this case your best options are premium themes, but beware! If you plan to invest in a theme, make sure the website you are buying from offers; documentation, support which mostly comes in form of a users forum and check the money back policy.

The better themes comes with PSD files that make it easier to adjust the theme more to your app style guide. It also help as a visual guide to double check if the theme displays in the browser as it should be compared to the PSD.

I listed the six most notable themes out there, they are all premium, ranging from $175 to $10. My preference goes to Apz, due that it supports certain key plug-ins, has a user forum and WooThemes offers a complete demo with admin login.

Apz

WordPress Themes iPhone Apps

Fone

WordPress Themes iPhone Apps

iPhone App

WordPress Themes iPhone Apps

AppifyWP

WordPress Themes iPhone Apps

my Application

WordPress Themes iPhone Apps

AppCloud

WordPress Themes iPhone Apps

Feature
Post

Category
Design Focus

Friday Focus 06/24/11: Pixel Focus

This Friday Focus we’re putting a spotlight on designs that exaggerate pixel sizes for a mosaic, rugged look.

Designs of the Week

Blocklevel

I like the dark on top, light at the bottom look. I also like how the pixel pattern looks random but when you look more closely it’s repeated 3-4 times already. Interesting thing about their portfolio slider is that it goes both sideways and vertically, but the visual cue for the latter appears only on hover. Another notable decision here is that the description of their services comes before the slideshow (which usually appears as the heading).

Opala Rosa Choque

Love the surreal, Escher-esque illustration at the top, its liquid smoothness contrasting with the rough pixeled edges elsewhere. I also like that when you click on a portfolio item, the display is prefaced by “proudly presents”. Only two concerns I noticed would be: that blasted Facebook like button; that close button doesn’t really look like an “x” icon (but it does look like a real life button).

Teo Skaffa

I think pixelated type everywhere eventually tires the eyes, and in this day and age, this Flash site could have very well been done in pure HTML/CSS/JS. The oversized cursors is amusing though.

Moradito

Simple, colorful, and even has keyboard navigation!

Media Arc

Now this is a good example of using Flash to your advantage, although I’d wish the animations moved more slowly, or could be stopped.

GreenTent

Light, clean, and fresh-looking. I’m surprised the featured project section only contains one site, though—I would’ve added a link to the portfolio below the description.

F91W

I like the rainbow effect on the description text to echo the background. The search box just needed to be blended in better.

WPmonk

Love the hues and graphic work on the interface elements, which would be even better if they were in native CSS3 effects and custom fonts. Interesting choice to add the shopping cart status right next to the logo.

United Pixelworkers

Dare I say this site is pixel perfect? Everywhere I look, there are details I just fall in love with. Just an excellent model for a pleasant online shopping experience.

Social Media Weekly

DesignHow Much Design Is Too Much Design?
“…it does seem to me that, as much as we talk about the cruciality of design to the success of software that it’s also true that having too much design is often counter-productive.”

OptimizationBook of Speed
“The business, psychology and technology of high-performance web apps”

User Interface DesignAsciiflow
Draw tables in ASCII.

HTML5, JavaScriptLearning Canvas: Making a Snake Game
“In this tutorial I’m going to show you how to make a simple snake game using canvas. You know, like you used to get on your Nokia phone.”

CSSSprite Cow
“Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.”

Feature
Post

Category
Code

CSS Layout Techniques

Not everyone is busy daily with CSS, which makes it understandable you don’t know CSS layout structure and code by memory. It’s good to have some good sources providing ready basic code to get started on a new website. The pro of using these layout is that they are already tested and bug free. More →

Feature
Post

Category
Design Focus

Friday Focus 06/17/11: Owly

This week’s Friday Focus features not just any kind of bird, but owls. They’ve been used everywhere from personal portfolios to mainstream portals and we’re going to check them out.

Designs of the Week

Joe Nyaggah

I remember this site having a different owl a year or so ago, but this guy’s whole brand revolves around them. I like the detail of the RSS ribbon at the top right—it actually looks like felt to me. I also like how the fine borders cross and run from top to bottom.

The Stuffed Owl

Lovely illustrations, and it’s nice that they’re on a textured paper background. Not too fond of the Times New Roman font choice but it seems a bit popular on author sites. Just one little quibble: it appears that body text and link colors are used interchangeably throughout the site, and that makes for a very confusing experience!

Owl & Fox

I like the uneven gradient of the navigation, looks randomly generated. Nice copy and tooltips as well. I wish there were more orange in the rest of the site though.

AOL.com

In sites like these, there will hardly be integration with a a graphic and the layout and design concept, so colors are the bare minimum way of coordinating. Clean solid lines all around.

Owltastic

Probably the poster child of this week’s bunch and one we’ve actually featured before, but’s been redesigned since. Not drastically though. There’s a new owl illustration, but the color palette, soft shadows, scallops, and clouds remain.

Social Media Weekly

CSSA Whole Bunch of Amazing Stuff Pseudo Elements Can Do
“For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup.”

AccessibilityAccessibility and HTML5 Block Links
“HTML5 has many new elements and features. One of these is block links—we have the ability to wrap a link around block level elements. Here we take a look at the impact that this can have on accessibility.”

Javascript, OptimizationOne script, seven ways
“Refactoring is also an effective way to share knowledge, particularly if you pair with someone more experienced while you do it. The goals are already defined and understood – you can see how it works, so you’ll know when the new version does the right thing.”

Feature
Post

Category
Code

17 Miscellaneous WordPress Plug-ins for 2011

Time to revise those WordPress plug-ins. WordPress is still the most common used publishing system by experts an amateurs alike. Which means also the most targeted by hackers, spam, bots, etc. I compiled a list of new and older, still popular and useful plug-ins for you to try out.

Some plug-ings have been around since last year and this is the first time I come across them. Goes to show how much option there is for WordPress that one can still be surprised by what there is available plug-in wise.

More →

Feature
Post

Category
Design Focus

Friday Focus 06/10/11: Three ways to 3D

Designers have tried to achieved the three-dimensional look on websites in different ways, and we’ve touched on this in the form of folded elements, parallax scrolling, and 3D type. This week, we’re looking at three more inspiring techniques that push the envelope and make websites more interactive than ever.

Designs of the Week

BeerCamp at SXSW 2011

This Inception-inspired site is probably a landmark in experimental web design. “You mustn’t be afraid to dream a little bigger, darling.”

Caixolândia

We’ve seen many implementations of the parallax effect over the years, and all continue to be impressive, but I don’t think I’ve seen one that implements this type of layering that puts moving objects both in the foreground and background. If the zooming effect is a little too ambitious for you, this one is the closest feeling to immersion you can get.

Balencic

Flash is still the go-to solution for more complex 3D animations such as the one on this site. I also like the idea of using the human anatomy in a quirky way. I also like how the navigation moves up and stays fixed as you scroll lower, but I’m not fond of the justified text.

Social Media Weekly

DesignArt and the Web: Line
“We are excited to announce Carsonified’s first book called ‘Art and the Web: Line, Shape & Form’ written by Nick Pettit. This book is part of a larger series that Nick is writing about the elements and principles of art, as they relate to the web. We are releasing each chapter as a blog post on Think Vitamin and at the end, you will be able to download the entire book for free.”

CSSIn defense of CSS hacks — introducing “safe CSS hacks”
“How do you target Internet Explorer in your CSS? Do you use CSS hacks, conditional stylesheets or something else? [...] People have been advocating three different approaches: conditional stylesheets, CSS hacks, or conditional classnames. All these techniques have their pros and cons. Let’s take a look.”

CSSSpinning the Web
“What I’m doing here is using some basic CSS to generate art, using web sites as the medium. For the series I linked, I spun all of the elements on a page using transform: rotate() to see what resulted.”

TypographyCSS Mask-Image & Text
“There are currently 2 webkit CSS properties that I’ve grown to love and hope gain more traction & browser support. My favorite would have to be background-clip:text, but it currently degrades poorly. A close second is mask-image, which you can apply to text.”

HTMLAbout Obsolete Features in HTML5
“Many developers will be familiar with the word “deprecated” when referring to elements and attributes that no longer validate or that are no longer part of the current HTML spec. This was the term used in previous versions of HTML, but not with HTML5.”

Feature
Post

Category
Design Focus

Friday Focus 06/03/11: North East South West

Here’s an interesting technique to try out in this week’s Friday Focus: designs that have four main navigational items arranged at right angles to each other, much like the four main directions on a compass.

Designs of the Week

Prince Street International Films

I like how each section content is perfectly contained in the boxes. It makes me wish the whole site fit into the height of the browser window so I can see the wide view of the whole site.

ap-o.com

There’s a running pixelated theme in the design, as well as blocks of black for the headers. There’s also an interesting peekaboo effect with fixed backgrounds that’s also growing popular these days. I like the idea of placing the navigation at the four corners of the site, but it makes moving back and forth between each screenful of content a hassle—better if there were keyboard navigation too. And for the millionth time, I wish we had a way for Twitter tweet and Facebook like buttons to blend in better with the design.

Kiki Kaloudi

I never really enjoy the look of Courier or any other fixed-width font on a site, but I do like the hand-drawn touches here, and splashes of red there.

Conway Cowork

What’s a little surprising with these sites is that they don’t really use the 4 cardinal directions to their advantage and, say, animate the page to scroll to that particular direction. Instead they all still scroll vertically. Here’s another graphing paper pattern meets hand-drawn graphic elements design, with the wildly popular yellow and black combo.

Social Media Weekly

DesignDesign Professionalism
“The designer’s guide to taking back your profession.”

ProgrammingLost Type
“The Lost Type Co-Op is a Pay-What-You-Want Type foundry, the first of its kind.”

Optimizationzbugs
“Merge, Minify, and GZip Compress JS & CSS”

AccessibilityHTML5 and Accessibility
“HTML5 is not the accessibility disaster that some would have you believe. It tries to build accessibility in by design rather than bolt it on afterwards, and this is A Good Thing; if something is left to authors to add, they won’t. Just look at how many images have no alternate text, or useless alternate text.”

JavaScriptByte-saving Techniques
“This is a collection of JavaScript wizardry that can shave bytes off of your code. It’s mainly intended as a reference for those creating entries for 140byt.es.”

User Interface DesignThe Gap Theory of UI Design

Feature
Post

Category
Design

Icons and Grunge Fonts

Time again for some fresh icons and fonts. This week you’ll find listed here five different icons; hand drawn, social,, for the cloud, android and credit cards. A couple of them are vector only which gives you more control over the size and color.

For the fonts choice this week we are going grunge. Since I have been following web design almost nine years now, grunge has never gone out of style. Especially grunge brushes are always popular.

I don’t know about you, but since all the excitement about HTML5 and CSS3 have died down, it feels kinda slow in the front-end world. When was the last time there was a new awesome jQuery plug-in that does something no one thought about before?

Meanwhile give a look at these icons and fonts while we wait for the next popular “it”.

247 Hand Drawn Web Icons

Icons

The Cloud Icon Pack

icons

Native Android Icons

icons

Free credit card Icons

icons

Social Stamps Icon Set

icons

Web Icons Tile-Style

icons

Grunge Fonts

A Lolita Scorned

Grunge Fonts

Aquiline Two

Grunge Fonts

Appendix 3

Grunge Fonts

Calamity Joe

Grunge Fonts

Belisa Plumilla Manual

Grunge Fonts