1stwebdesigner

Joost de Valk, Founder of Yoast, Shares His Success Story

Posted: 26 Apr 2012 02:00 PM PDT

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Joost de Valk is the founder and CEO of Yoast.com. He’s one of the top SEO and WordPress experts in the world, best known for his great WordPress plug-ins. Joost also runs a WordPress Podcast and speaks at a variety of conferences.

Joost, please introduce yourself to our readers.

I’m Joost de Valk, founder and CEO of Yoast.com. I’m also a 30 year old husband and father of 3 kids (2 boys, 1 girl) from a small town called Wijchen in the Netherlands.

Background

What is your background in web development?

My background is kind of “funny”, I built my first website in ’94, 12 years old at the time, on a computer my parents lent me the money for because I’d broken theirs one time too many. I played around with small websites for quite a while but never really built anything substantial in that time.

Professionally my career started in 2002 as a Java developer, as I like to call it, even though I was mostly coding JSP and JSTL at that time and wouldn’t have been able to write any “real” Java code. My official job title wasn’t developer though; I was an account manager and was mostly working on translating the needs of clients into something the developers could make technical designs for. From this job I went to another sales job, but in that sales job a small miracle happened: they “forced” me, although it didn’t take much forcing at all after my first day, to work on a Mac.

Out of interest for HTML and CSS, I became active in the WebKit community, eventually becoming a committer on the WebKit team, a “title” I still hold, mostly because I built hundreds of automated test cases and maintained their Bugzilla. Through all my work in reducing bugs (a process where you take a webpage that causes an issue and start taking away everything until you have the smallest possible test case), I learned an awful lot about HTML and CSS. One of the things I specialized in was CSS3, which I was and am a huge fan of, causing me to write so called “CSS3 Previews”. I published those on my then domain joostdevalk.nl and hit many a Digg front page with those, back when Digg still had traffic to give.

That section on my site became so popular I decided to spin it off into its own domain, css3.info (which I have since sold), the first domain for which I really seriously started using WordPress. That’s when I had my “rebirth” if you will as a developer: I started developing WordPress plugins to do things I wanted to do on css3.info, beginning with robots meta, which still exists but is also at the core of my WordPress SEO plugin.

What is your background in SEO?

Time would teach me that while I like talking to people and don’t mind selling them stuff at all, I’m not a born salesman. I’m somewhat of an in-between between developer and marketing man, and in my next job I would become an SEO, which I would describe as exactly that. I was taught at Onetomarket in both some of their old blackhat ways (they’d been banned from Google the year before and knew exactly why) and their new methods. While we didn’t use the old methods for clients, I found, and still find this true today, that if you follow what blackhats do you can learn an awful lot about the behavior and choices of search engines.

WordPress plug-ins

Why do you focus so much on WordPress?

Because I love using it and love the community around it. It’s great to be able to build something and help so many people. Of course that wasn’t always true, in the beginning I “just” did it because it was the most user-friendly way to power my websites. Now it’s a part of my business and I dare even say, a part of who I am online.

How did you come up with an idea to create WordPress plug-ins?

I scratch my own itches. WordPress doesn’t do something I want it to do? I’ll make it do it. 95% of my plugins have been built because of that, the other 5% were paid projects for clients.

How do you find needs in the market that you can fill with your WordPress plug-ins?

I don’t think I find needs, those needs find me. It turns out that my itches aren’t that weird, more people need the same functionality, so I build that functionality and release it to the public. In some cases I have probably “created” my own market a bit; in my article on WordPress SEO I have proposed strategies that people adopted, for which they needed my plugins.

What is your process of creating a plug-in?

It starts with a piece of code I built for myself, not too much stuff around it, just my own needs, from there on some plugins evolve into plugins I release. At that point I usually need to add an admin interface etc., which is usually far more work than building the plugin itself. That's followed by the even more cumbersome creation of documentation, the thing in which all of my plugins "lack" the most.

How do you market your plug-ins?

By now, a blog post about them is usually enough to get people interested. When I first started it took a lot more work but I still go through somewhat of the same process today as I did back then: I email a few friends in the industry, leave a comment on blog posts that are topically related, basically, I make myself known to my audience, usually fellow marketers, who will then spread the word.

Why do you think your plug-ins are so popular? What is your secret?

Quality and doing what's promised on the "tin". Instead of calling one of my plugins an all-in-one plugin and doing only half of what's needed, when I call my WordPress SEO plugin all-in-one it's because it's truly all you need for your WordPress sites' SEO. When I call a plugin "Google Analytics for WordPress", it does just that: add Google Analytics to WordPress. With, admittedly, a whole lot of options that you can choose to use but you don't have to use.

SEO

What got you interested in SEO?

I was looking for a new job, clearly unhappy and not functioning very well in my position at the time, when my wife showed me this job for an SEO. I'd played around with search engines a bit, knew my way around all the HTML and CSS standards so I got hired. To be honest, until my wife showed me that job opening, I'd never considered becoming an SEO. I'll be eternally grateful to her for showing it to me (and for marrying me and bearing my children, but that's another thing altogether).

How did you learn what you know about SEO?

In several ways: I learned at my then employer, Onetomarket, but mostly, I learned by reading SEO blogs and forums and testing whether what they said about SEO was true. SEO is very much something you have to learn by doing and by deep diving: open up server logs and look for the movements of Googlebot around your site. Try to understand it, try to think as a search engineer. Once you start "getting" that, it's the most fantastic job in the world.

How did you get from an interest in SEO to being a world-renowned SEO expert?

I built stuff, then I told people… I was in the lucky position that some of the people I told about what I built were very responsive. My first conference was a small conference called SEO Days by Dave Naylor. During that conference Dave took me aside for a while and we had a great chat, after which he connected me with friends of his, people like Chris Sherman and Danny Sullivan who got me speaking gigs on their SES and later SMX conferences and guys like Matt Cutts of Google and Greg Boser of now BlueGlass.

Just a few days before I went to that conference I filled out a long survey on SEO ranking factors Rand Fishkin of SEOmoz had emailed me, which later became one of the biggest pieces of SEO research of that year.

Combined, all these people seemed to like what I did, and still do, so I did more of it and more people responded, from there on it was just a big upwards spiral.

Fusion

Your personal brand is unique because it’s a fusion of web development and SEO with a sprinkle of content marketing. How did you come up with an idea to combine all these things?

I'd love to tell you I planned this from the get go, but that would be nonsense. It just "happened" and when I saw it happen, I took the chance and built it out. Only recently have I become more eloquent about my university background (I studied Theology and International Business, though I finished neither degrees), because I think mostly what I learned in Theology applies to so much of what we do today.

Content marketing, "story telling", etc. All that is just the old art of evangelization in a new package. Evangelization, coming from Greek, means nothing more than "spreading the good message", that's what companies ought to be doing with their products, governments with their policies and heck, developers with their programs and plugins.

How did you go about actually blending it all together? What were the biggest lessons learned there?

I didn't really blend it myself. I just wrote about what I did and at some point it became clear to me I was "WordPress SEO guy" to a lot of people and they were looking to me for advice and plugins in that area. The funny thing is that in my work as a consultant, I'm far more a "Large Site SEO" guy and a "News SEO" than a "WordPress SEO" guy, as most of my consultancy clients are companies with enormous websites and the issues that arise from that, but my "public" image is now completely affixed to WordPress in the first place and SEO as a close second.

Many people want to become world-class experts, but only few do. How did you get to where you are now? How did you grow your brand and your business?

To become a "world-class" expert you have to be humble in admitting what you don't know, as well as nimble in making sure you get to know that what you don't know but need to know as soon as possible. As soon as you've acquired knowledge worth sharing you then need to start giving away that knowledge through a blog, articles in magazines and speeches on conferences.

It's not something that happens overnight. I've been doing this for 8 years now, growing a following in the process. So it takes hard work, dedication and you need to forego monetary reimbursement for quite a while. I would never have been where I am now if I'd decided to sell my plugins early on, or if I'd kept my WordPress SEO knowledge to myself.

Final words

Last, but not least, what would be your advice to someone who would like to combine his or her strengths and build a strong personal brand and a successful business on them? What’s the most important thing there?

The single most important thing is to do what you love. I know no-one in our industry who has become a thought leader, a world-class expert or a "guru" by doing something other than what they love. The reason for that is simple: love for what you do will make your work not feel like work; allowing you to put the necessary (often ridiculous) amount of hours in to gain the knowledge and the profile you need.

Thank you, Joost!

How to Design a Sleek Downloader Interface Using Photoshop

Posted: 26 Apr 2012 06:00 AM PDT

I’m back once again with another cool web interface tutorial. Today we’ll be making this sexy file downloader with crisp and clean details. This can be used for web and mobile applications, perfectly cool for smartphones and tablets too!

As you will see there are quite a lot details in here, the whole point and also the hardest part of adding details is to make them noticeable, but not TOO obvious. Make them soft, clean and smooth. Pick colors with not too much contrast and especially play around with the opacity until it feels right.

You’ll also learn how to create a simple pattern in your design with the use of the pen tool. Patterns can be a key to perfection in your designs. Use them wisely, too many patterns can destroy a design.

Now, let’s see what we are going to make:

As you can see, there’s a lot of detail in there. But the level of contrast and cleanliness is still perfectly balanced.

Alright, let’s start this off!

Step 1 – Building the main shape

First we have to make the base shape of this file downloader.

This shape exists on 4 separate layers.

Reference:

We start off with the “List bg” layer.

Create a (about) 308px by 130px big rectangle with the Rectangle Tool.

Once you have that you’ll need to add some style to that thing!

This is what it’s gonna look like:

Layer styles:

Gradient Overlay:

Stroke:

Inner shadow:

Drop Shadow:

Your shape should look similar to mine by now. You may have noticed the gradient I used in the stroke. This is because of the gradient I had in the background. To keep the contrast even on every spot I had to make that gradient.

Next we’ll make the background for the downloading file.

Reference image:

This shape is also 308 px width, but only 50 px high.

Layer styles:

Gradient Overlay:

Stroke:

Inner Shadow:

Drop Shadow:

I made the lines on there with the pen tool. Use the shift button to make perfect 45○ angle lines.

After you made the correct shape, use ctrl + click on the layer thumbnail to load up the selection. Then make a new layer and fill up your pen tool shape with a solid white.

These lines could move from the right to the left when the file is actually downloading to show some activity.

After this, duplicate a few times until the whole thing is filled.

Only thing left for the main shape is the bottom part. This shape makes the whole downloader way more dynamic. It gives it a sort of 3D effect.

Grab the Rectangle tool again and make a new layer called ‘Bottom’ see layer reference image on top for how to stack the layers.

The shape:

The layer styles:

Gradient overlay:

Stroke:

Drop Shadow:

That’s it. The main shape is there.

Step 2 – Let’s get some content in there

Before we’re gonna add the text and icons, we have to create the yellow progress bar. This bar visualizes the progress of the download.
2 Layers here. The full width progress bar. And the yellow bar on top of it.

The full width bar first. #343434, pick yourself a nice height.

Layer styles:

Inner shadow:

Drop Shadow:

Then, the yellow bar, of course, having the same height.

Some layer styles:

Gradient Overlay:

Inner Shadow:

You can play with some patterns on this or anything you want. Bring out your creativity ;)

That’s it for the progress bar.

2 Things left to do:

Fill in the active downloading file
Create the list of the files to be downloaded.

The top:

Font: Open Sans download here.

Size: 10 pt.

Light grey color.

Next is the active state of the download.

Layer styles:

Gradient Overlay:

Inner Shadow:

Drop Shadow:

Applaud yourself, you are almost done ;)

Last bits: (For the cancel icons, mine came from the iconsweets icon pack. you can pick your own though.)

That’s it guys. You’ve just made a sexy file downloader! The details look awesome, don’t they? Thanks for following this tutorial and if anything is unclear, feel free to leave a comment!

Final image:

RssA1

joi, 26 aprilie 2012

1stwebdesigner

1stwebdesigner

Background

WordPress plug-ins

SEO

Fusion

Final words

Step 1 – Building the main shape

Step 2 – Let’s get some content in there

Niciun comentariu:

Trimiteți un comentariu