Helping ordinary people create extraordinary websites!
HOME TUTORIALS SCRIPTS WEB HOSTING BLOG FORUM
Get Our Newsletter
Your Email:
Blog Feed

Posts Tagged ‘Design’

The 10 Biggest Brands in Design Blogs (Part 2)



There’s been an explosion of resource, recruitment and tutorial sites, in Part 2 we continue our review of the biggest and the best of them, analyze their brands and make suggestions for their growth. Make sure you read Part 1 before continuing.

05. PSD Tuts (Tie)

Founder(s) - Unknown
History - PSDTUTS is a blog/photoshop site made to house and showcase some of the best Photoshop tutorials around. We publish tutorials that not only produce great graphics and effects, but explain in a friendly, approachable manner.
About the Brand - A strong thematic cohesiveness throughout their family of websites.
Alexa.com Ranking - 14,664
Other Properties - audiojungle.com, flashden.com
Ideas for Growth - Their team has successfully created a design and tutorial blog, the audio search engine and a monetized flash resource site. They should take the business model they used for Flashden.net and apply it to resources for AfterEffects or Premier. Alternatively they could create a portal for scripts like Hotscripts.com

(more…)





The 10 Biggest Brands in Design Blogs (Part 1)



There’s been an explosion of free design resources made available thanks to a number of sites that offer freebies and related tips. In this two part in-depth look, I examine the biggest brands in design blogs and suggest what they can do to make their brands even bigger and better.

This list was compiled and ordered by relevancy as well as their influence on the design community at large. I looked at each groups branding, site design, logo design, the strength of content and resources offered. I also looked at the number of properties each had. Alexa rankings were used to estimate site traffic although a high Alexa ranking did not always equal a higher ranking on this list. I did all this so as not to appear to be biased towards any particular blog or group.

(more…)





Designing and Coding a Wordpress Theme From Scratch (Part 9)

in PHP, Photoshop, WordPress by JonGos


Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”
Part 7 - “Beginning with PHP for Wordpress”
Part 8 - “Putting the Press in Wordpress with PHP”

Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic.

Marking Up Header.php

Your blog header file usually contains the title of your site linked to the homepage. In an HTML page we would simply add text or place an image and link to the homepage using <a href=”"></a>. The key to making our Wordpress theme, however, is we need to make all our links relative so that the end user can install the theme and use it with their own unique site with as little fuss as possible. It should just work.

(more…)





Designing and Coding a Wordpress Theme From Scratch (Part 8)

in General, PHP, WordPress by JonGos


Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”
Part 7 - “Beginning with PHP for Wordpress”


Putting the Press in WordPress with PHP

Wordpress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the Wordpress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.

(more…)





Art Supplies for the Photoshop Guy

in Design, Photoshop by JonGos


A common misconception is that you don’t need many tools if you’re using Photoshop or other computer based design applications. While you may not need as many as non-computer based designers, I think a case can be made for keeping an arsenal of art supplies around. Maybe it’s the former SCAD student in me talking but here is a breakdown of the non-software products I use in my workflow.

(more…)





Designing and Coding a Wordpress Theme From Scratch (Part 7)

in PHP, Photoshop, WordPress by JonGos


This is the seventh post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”


Beginning with PHP for WordPress

  • First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
  • Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.
  • (more…)





Designing and Coding a Wordpress Theme From Scratch (Part 4)

in Design, General, PHP, Photoshop, WordPress by JonGos


You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

(more…)





Designing and Coding a Wordpress Theme From Scratch (Part 2)

in Design, PHP, Photoshop, WordPress by JonGos


Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.

Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

(more…)





Designing and Coding a Wordpress Theme From Scratch (Part 1)

in Design, PHP, Photoshop, WordPress by JonGos


In this multi-part series I’ll detail how to create and design a Wordpress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. Before you continue you should look over other tutorials “Working with Wordpress Offline Like A Pro and “Color Proofing Photoshop” as some of the topics discussed there will come up in this tutorial like working offline to develop themes, and proofing your colors so that they translate accurately for the web. At the end of the entire series I’ll allow you to download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.

(more…)





Five Point Form: Mastering Professionalism as a Freelance Designer

in Design, Photoshop by JonGos


One thing many of my young designer friends tend to forget is that being self-taught, fast learning and full of raw talent is no guarantee for steady work. I should know because I consider myself many of those things yet for a while when I began freelancing I couldn’t get clients to save my life.

How did I turn things around? Well for one I had to force myself to adopt a five point system for improving my own work habits as a designer. I explain the five points that I mastered (Fundamentals, Versatility, Humility, Efficiency and Audacity) below:

1) Fundamentals: Learning Your Quick Keys

A great Photoshopper knows how to make amazing work. A better Photoshopper knows how to make amazing work while also knowing the fundamentals. I learned this when applying for work at a creative staffing agency called Aquent. At Aquent you can get some great work, make great contacts and make great money. The problem is Aquent only tends to work with talent that take and pass their assessment test. Does the assessment test measure talent? No, like most tests, it just wants to see you get the job done in a way that proves you know fundamentals, standards and how to work quickly. Aquent is corporate and they can’t risk hiring people who run the risk of embarrassing them. That isn’t to say most of my work for comes from them but being able to count on work from there and other corporate clients when I need it isn’t a bad thing.

Now, I like you, don’t agree with this method. Give me a job, tell me to do it, and I’ll do my best to get it done quickly and to the client’s liking. Well, the world doesn’t seem to agree with me because there are quite a few jobs that are more concerned with your history than your actual ability.

Aside from the fact that you’ll be able to quantify your knowledge to people who have no clue how to quantify the knowledge of a designer, you’ll work faster. You can’t tell me that using a mouse to jump around different layers changing fonts is faster than using quick keys to do the same task if you know them well. It’ll save you time, make you faster and thus increase your output.

2) Versatility: Learning to Work With Standards

I once heard a guy complaining about failing Aquent’s assessment test because they asked him to work only with em measurements. His argument was that it was absurd, that no one uses em because the real standard is pixels. Really? Clagnut makes a brilliant argument:

If the world were an ideal place, we’d all use pixels. But it’s not, we have the broken browser to contend with. IE/Win will not allow readers to resize text that has been sized in pixels. Like it or not, your readers will want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes. So unless you know (not think) your audience won’t be using IE/Win or will never wish to resize their text then pixels are not yet a viable solution…..Using ems, however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

So this is why companies like Aquent err on the side of IE compliant standards. As much as we hate to admit it, most of the world is surfing the web through Internet Explorer on a PC, a fact that isn’t going to change any time soon. The point is most website owners want to reach as wide an audience as possible so for your own sake, you should learn to be versatile. Work with measurements that will translate universally regardless of the platform the end user is viewing them on. It’s a pain, it’s time consuming and annoying to have to rework an entire site or design because you didn’t use universal measurements. If none of this matters to your client then it’s entirely your choice but as long as you can work in whatever they’re asking for you’ll never have to turn down a project for lack of ability in this area.

em, en, px (Pixels), pt (Points), pc (Picas), mm, cm, in, %. Find out what all of them mean, when and why you should use them. Start here and continue here.

3) Humility: Letting the Client Be an Ass

Another thing I had to learn was how to respectfully disagree or, (in some cases, silently disagree) with a client. The person who pays you, or contracts you or hires you will sometimes end up being a real jerk. They want what they want now and you’re the person in their way. In my experience, the more money they make, the less patience they have for your input whether you’re the voice of reason or not.

Hopefully the majority of your clients won’t be like this but when they are, you just have to learn to take it in stride. I once worked for a guy just would not let me leave a job. I tried to tell him I’d be more effective the next day, that we weren’t making any progress, that his expectations were unrealistic but he insisted. Sure, he paid me more for my time, but at some point it’s not about money, it’s abut not wasting time the clients or yours. I would have rather left and come back the next day well-rested to complete the task then stay all night beating my head against the wall. Despite my feelings, I did my part, we didn’t make much progress and after I realized he wasn’t going to listen to me I just tried to keep a positive attitude about the situation. The client realized he wasn’t helping and backed off.

If you let an unreasonable person remain unreasonable long enough they’ll end up in a corner where their choices end up making things worse at which point they’/// either a) blame you anyways or b) appreciate your tenacity for putting up with them. Stressing yourself out will only make the situation that much more unpleasant.

4) Efficiency: Working on a Schedule

I’m a naturally bad procrastinator so the only way I can get a job done is if follow a strict schedule of milestones and goals. To force myself to stick to that schedule I give allow my clients to subscribe to a calendar or rss feed like gCal, 30boxes or Basecamp. This will do two things, it will force you to recognize when you’ve slacked off during a particular period of the project, and it will let your client know when you’ve done so.

Project management tools are a big part of my workflow and have helped me become a more productive individual.

5. Audacity: Presenting Yourself Like You’re Ansel Adams

Another thing I’ve learned is that most people are completely incapable from recognizing real talent from anything else that might be put in front of them. If they aren’t designers, they don’t think like designers and they don’t really know what makes one designer better than another. Thus, they need to be convinced. I’ve seen people who choose horrible color palettes and layouts make upwards of $10K while people making photoshop designs that are nothing short of brilliant make pennies. The average client is waiting on you to tell them that you’re great, that you know your stuff and to prove it to the best of their understanding. This is why presenting yourself with confidence (not arrogance) is key to getting class “A” projects.

Of course once you actually are proficient and you’ve mastered all the previous steps, you’ll more than believe in yourself, you’ll know that you’re the right person for the job and if a potential client can’t recognize it then it’s completely their loss…





Blog Categories Blog Archives
Ask A Question
characters left.