Hot WordPress Themes For Freelancers For Personal Branding

In order to succeed as a freelancer and build a successful brand, website creation is paramount to displaying a professional image. WordPress makes it easy for freelancers to build beautiful, professional websites that are not only impressive to potential clients, but also easy to manage and customize.
The right WordPress theme can make or break your website, so its important to choose one that is clear, concise, simple to navigate and overall generally pleasing to the visitor.

Below are some of my picks (free and premium) for the hottest WordPress themes for freelancers:
1. Typominima – Free
Typominima is a great theme for freelancers who want to spotlight their writing and publishing experience. It’s a simple, clean design that can be used to showcase a writing portfolio or simply to use as a blog in conjunction with a freelance writing business. The theme also includes some design customization options.
2. Boldly – Free Download Here
Boldy is a simple, yet robust WordPress theme by Site5.com. It comes with helpful features such as a theme options page, Ajax-based contact form and a Nivo slider. This theme is perfect for the freelancer who wants to start a professional website that lists everything a potential client needs to know.
3. Fotofolio Landscape – FreeDownload Here
Fotofolio Landscape is a WordPress theme designed by Wordspop.com for photographers to showcase their work to clients. This theme would also do well showcasing a designer’s work.
4. Suburbia – Free
Suburbia is a great fit for a freelancer who is interested in showcasing magazine work or a blog. The design is simple and minimalistic and it also has some flexibility such as a logo uploader and a theme options page.
5. Smashing Multimedia – Free
Smashing Multimedia was designed by Smashing Magazine for podcasters, videographers and photographers or anyone who needs to easily embed videos and images, rate them and showcase them in their own blog. The theme comes with layered PSD source files and a help guide as well.
6. Businezz – Free
If you are looking for a “corporate-looking” theme, this design will meet your needs. The home page includes testimonials and real-time news updates from your blog showcased in a clean and crisp layout.
7. Berita – Free
One of my top picks in the “free” category, this theme is simple and easy to navigate. It is a great starter theme for those freelancers who are transitioning to building a company brand for their services. It has a casual feel, yet it allows you to showcase your work and your services in a professional way.
8. Strange – Premium
I like this premium theme because it works for either portfolio-based content or a business website. It offers a variety of customization options that are easy to change even for the novice user. You can modify layout, styling, colors, sidebars and fonts directly from the backend admin.
9. U-Design – Premium
I am slightly biased with this premium theme because I use it for my personal website. I love the clean design and the many layouts available. It is built with SEO in mind as it relates to content placement on the home page and it offers easy customization of colors for backgrounds, links, text, menu links, etc. I have had the theme for a month and I am still finding new ways to customize the site to complete it. It gets a “thumbs up” in my book.
10. MyResume – Premium
MyResume is a premium theme suited for the freelance professional who needs a digital resume to showcase to clients. It is sleek and easy to use and allows the user to add new pages and tabs and a custom portfolio as well. It also integrates well with social networking sites and includes sections for services and testimonials.
11. Client Machine – Premium
To be honest, this design has me a bit envious and I may have purchased it had I not already decided on a theme. It offers a clean, professional design and it comes with features such as built-in invoicing and the ability to create professional project proposals. You can also display testimonials, contact forms and social media icons with customizable widgets. A rotator is available as well so you can showcase your specialties by choosing from a library of 20+ icons.
12. Studeo – Premium
Studeo is a feature-packed premium WordPress theme designed for any freelance creative professional or a creative agency. It includes a filterable portfolio, custom widgets and custom page templates.
13. Rockfolio – Premium
Rockfolio is a simple premium theme with high-end coded CSS, compatible with all the major browsers. It is a great theme for freelancers starting a small business or simply showcasing their work skills. Some highlighted features include easy to edit html coding, lightbox portfolio sections with gallery view options, and PSD files.
14. Classica – Premium
The Classica theme puts your talents and skills front and center. It is a clean and beautiful design that allows you to present your work professionally. It is a great theme for any type of artist whether graphic, motion, print or web.
15. Lightspeed – Premium
Lightspeed is a clean, versatile theme perfect for freelance professionals. It includes the Content Composer v2 which allows you to drag & drop your content and layout with ease. Version 2 of the Content Composer comes with a templates system that allows you to continually utilize Content Composer templates by saving, loading, importing and exporting them with other themes that use this same system.
16. Semantic – Premium
The Semantic theme is a great choice for a web design company or a smaller scale business. It is clean, professional and includes many features that are easy to implement and customize.
17. vCard – Premium
For those freelancers who are looking for a simple, electronic resume or business card, vCard (Virtual Business Card) is a solid choice. Its minimal design is clean and professional and allows you to showcase your experience and customize your layout.
18. Multi-theme – Premium
Multi-theme would work for any freelancer in a wide variety of industries. It is a more universal theme and it can showcase portfolios, blogs, and any other services you offer.
19. Fiero – Premium
Fiero is a simple, yet bold theme designed with the artist in mind. If you are a photographer, digital artist, graphic designer or anyone who wants to showcase your amazing designs, this theme is an ideal choice. There are many different color options available or you can use the included PSD files to completely customize the look.
20. Intense – Premium
Intense is suitable for a freelancer with an active business or blog. It includes a custom accordion slider, portfolio pages, PSD files and more.
21. Vendor – Premium
Vendor is another powerful universal theme which will suit any company or business looking to expand on the web. With extensive theme options and customizable widgets, you can control content layout, manage your showcased products and advertising media as well as display your latest tweets, posts and videos.
22. Harmonia
Harmonia is catered to the freelancer who is interested in regular blogging. It is completely customizable and also features many options for showcasing and selling your services.
23. The Novelist
The Novelist is for the serious journalist, writer or copywriter who is more focused on showcasing his/her work. It is the perfect avenue for authors to display snippets of their work or simply to blog about their expertise.
24. Bookpage
Bookpage is a great choice for the freelancer/internet marketer who has an e-book to sell. It comes with payment options, book sample carousel and testimonial functions. And at only $8, it’s a pretty sweet deal.

Graphic Design Basics Part 2: Design Principles

In the first part of the series we covered the basic elements of graphic design with shapes, lines, textures and color among others. Today we go a bit more in-depth and will take a look at the principles of design, which are very important to know because they’re what separate the good designers from the amazing designers. Some of the principles we’ll cover today are applied unconsciously, but they definitely exist and we will show you examples from the web to illustrate the concepts.

1. BalanceBalance is how the elements of a design are distributed throughout a layout. If the balance is good, then stability is assured, although lately many designers go for unbalanced designs because they are dynamic and offer a totally different perspective. The personal pages are the most suitable for slightly off-balanced layouts, and you will see some examples soon.
To be able to notice what kind of balance a website has, you need to know the three types of balance: symmetrical, asymmetrical and radial. The first one takes place when both sides of a design are the same in shape, lines, texture and so on. Because this is the way we design today, this happens most of the time along a vertical axis, so when we talk about the two sides of a design, we talk about left and right. There are also examples along the horizontal axis and sometimes even along both of them, but these are rare. The symmetrical designs are pretty much most of the websites on the internet until 5 years ago.
The second type of balance occurs when the two sides of a website do not look like each other, but still have elements that are similar. Although it is called asymmetrical, they still provide some symmetry, like the first type of balance, only at a lower level. Asymmetrical websites are becomimg more and more popular nowadays (see WordPress layouts with content on one side and sidebar on the other).
The radius balance takes place when design elements are placed in a circular pattern. They give a sense of movement, dynamism, but it is not seen very often on the internet, because even the most experienced designers have problems laying out such a design.
As said earlier, balance is achieved through shapes, colors, textures, lines and the other elements we’ve talked about in the first episode.
Florida Flourish is a good example of a total symmetric website
Duplos uses an asymmetrical layout which works really well.2. Dominance and Priority
These two principles are together because they are strongly linked. They both have a lot to do with the user experience because a lack of priority and element dominance can be confusing. The dominance level is the one which prioritizes the importance of different elements, such as menu, logo, content or footer. Sure, this is also done by playing with the font and size, but let’s go a bit deeper and see what dominance and priority mean.
There are three main levels of priority. We have the headline or call to action, which comes as a primary element; then we have the secondary elements like images needed to make a point or, most of the time, the navigation. They are obviously not the most important element of a website, but you can’t do it without them either. The tertiary elements are information like footer links, meta information on blogs or different elements, and a website can most of the time exist without them. However, they are used frquently because they complete the design in different ways, either by offering more information, or by completing the layout with some elements.
Area17 emphasizes the dominant element in the top left corner and the welcome message pulls you in as well because of the color.3. Proportion
Proportion is important and represents the scale of elements compared to each other. They have a strong effect on the user and are also linked with the previous principle. It is no surprise that larger elements have a stronger impact on the user than the small ones. Dominance, priority and proportion work together to assure the user sees the information properly on a website. Having a larger font in the footer than in the content is a mistake because it does not respect these three principles.
Bluecated Interactive uses proportion to draw the attention on the image.4. Contrast
This is another important principle not only of design, but also of photography and any other visual art. I don’t think we need to go too deep into this, because everybody knows what contrast means. Having enough contrast between elements makes sure that some of them stand out more than others. If designers wish to blend elements together, they do it by having minimal contrast between them. If the contrast is high, the elements are distinct from each other.
If balance is created through shapes and lines, the contrast can be created through color. However, lately the contrast has also been changed through typography and texture, so this becomes more and more popular. Having perfect typography can help you achieve not only the perfect contrast, but also proportion, dominance and priority. It is easy to see that the last three concepts we’ve talked about are slightly linked to each other in some ways. If we would talk a bit more general about this whole topic, we would be able to put all of them into the same paragraph.
eHarmony's "Find My Matches" button stands out because of a good use of contrast.5. Rhythm
This might be a new one for you. The rhythm of the page is the principle that makes the human eye move from one element to another. It ensures the flow of the eye and in which order users should see the elements. Now this is a difficult one to make, because everybody has their own way of looking at a website and making all of them do it the same way might be too overwhelming.
There are two types of rhythms: the fluid and the progressive. The first one is a variation and the best example is the movement of water, which flows in the same direction basically, but has a lot of variation in how it moves. The progressive rhythm occurs when there is a clear sequence on how the eye should move between elements.
David Desandro's portfolio follows a very regular, progressive rhythm6. Harmony and Unity
The last principle of design wants to ensure that even if all the principles above are used properly, it is still impossible to create a stunning design without harmony and unity, and this is quite often seen in real life. We often hear of rich people who have everything they want, but lack harmony and unity in their lives. It is the same rule in design. If all these elements work together properly, then you’ve achieved what we call unity. Only placing all these elements on a page without linking them to each other does not create a design, but a page with a bunch of elements. If the elements complement each other and the website is easy to the eye and offers a good user experience, then the work you’ve done is more or less finished.
There is no really need for an example here, we all know that websites with harmony and unity can be spotted all over the place; think of a website that you like a lot and that you always remember. That’s probably a website that has harmony and unity.
Conclusion
The second article of the series wraps up the process of analyzing the very basic principles of design you really need to know about. After reading the first two articles you pretty much have most of the knowledge you need to start designing your own layout, but wait a bit more. The third and last article of the series comes soon and will cover the basics of composition such as focal point, grid theory, gestalt laws and others which can also be used for products like magazines, flyers or brochures.
Read more in-depth
If this article only satisfied a bit of your curiosity, then I’ve gathered for you few other sources where you can read more about the basic principles of design.
Web Design Symmetry and Asymmetry on 1stwebdesigner.com
How to Use Size, Scale and Proportion in Design on Van SEO Design
Unity in Design on Van SEO Design
Developing Visual Rhythm in Web Design on Tynpanus
Principles of Design: Contrast on Sitepoint
Dominance on Van SEO Design
 

Create An eCommerce Landing Page In Adobe Photoshop

In this week’s tutorial we are going to create an eCommerce landing page using Adobe Photoshop. This tutorial is intended for new designers who are planning on designing an eCommerce template. So what are we waiting for? Ready your workspace and let’s get started.

Here is what we will be making, click on the image for full preview:

Resources for this tutorialSearchCart IconSocial IconsPhone IconsPatternIconsweetsStep 1: Setting up the DocumentStart by creating a 1400px x 1900px document in Photoshop.
Ruler Tool is very useful for this tutorial. Make sure that rulers and guides are turned on.
Rulers: Ctrl + RGuides: Ctrl + ;One thing important in using Ruler Tool is the Information Panel. The use of this is when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panel at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide, but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Background
As you can see in the full preview above, the template was divided into three backgrounds, first on the top which holds the logo, navigation and slider. Second a noise background that holds the products, and third on the footer area.
First Background: Using Rectangle Tool(U) color #b6c9c9 create a 100% by 600px. Download the pattern provided in the resource because we will be applying a pattern overlay to the shape we have just created.
Apply this Blending Option
Pattern Overlay
Second background: using the same tool create a 100% by 1010px shape.
Apply this Blending Option
Inner Shadow: #fff
Gradient Overlay: #fff, #f2e9e9
Stroke: #c7c3c3
Let’s add a noise to this shape by going to Filter – Convert For smart filters. Again, go to Filter – Noise – Add Noise.

Third background: using the same tool fill the remaining area with #007573.
Apply this Blending Option
Inner Shadow: #000
Pattern Overlay
Result!

Step 3: Working on the Header
The header for this template will contain the logo, navigation links, buttons, search and shopping cart.
LogoI used a font called Oswald which can be found in Google Fonts. Using Text Tool(T) 36pt place our logo in a separate word Phone & Shop. The distance will be 100px below starting from the top of the canvas and 20px from the left starting guide.
Phone: Apply this Blending Option
Gradient Overlay: #383e44, #5c636a
Shop: Apply this Blending Option
Drop Shadow: #000
Gradient Overlay: #f6f3f3, #fff
Result

Main Navigation
Notice our navigation has rounded corners on the upper left and right corners. First thing to do is select Rounded Rectangle Tool(U) and set the Radius to 10px. Create a 960px by 75px shape, place it 40px below the logo. Now that it is properly placed create another layer above it and fill the rounded corners in the bottom part. Once you have done it merge this two layers.

Apply this Blending Option
Gradient Overlay: #007472, #008e8b
Stroke: #007472
Result

Open up the Iconsweets icon set and grab the home logo and place it as shown in the screenshot below.

Apply this Blending Option
Drop Shadow: #000
Gradient Overlay: 0% #fff, 20% #dbdada, 40% #fff, 60% #dbdada, 80% #fff, 100% #dbdada
Result

Next we will add our Dividers. Select Line Tool(U) and create 2 1px lines. First line color will be #007472 and #009c9a for the second line. Place it 20px from the right of the logo.

Next is adding our navigation links. For this tutorial the links are BLACKBERRY, HTC, SAMSUNG, SONY ERICSSON, IPHONE. Font will be Oswald 15pt color #fff. The distance of each link will be 20px left and right from the Separators/ Dividers. I will leave it up to you to measure it using Ruler Tool(I). Also, add the same Drop Shadow as we did in our home logo.

Last thing we need to make is the hover state. We will just make an small arrow head facing the navigation links, to do this create a shape as shown in the screenshot below using Pecil Tool(B) in a separate layer.

Search
Select Rounded Rectangle Tool, set the Radius to 20px and also make the fill color to #fff. Once it is set create a 180px by 25px shape as shown in the screenshot below.

Apply this Blending Option
Inner Shadow: #007472
Label the search bar with text search phones using Text Tool. The text format will be Arial 12pt color #009c9a. Then lastly open up the search icon, resize it and place it as shown in the screenshot below. Search icon color will be #007472.

Top Navigation (Register & Login buttons)
For the text links I used Helvetica 12pt color #007472. Add it using Text Tool. Next select Rounded Rectangle Tool(U) set the Radius to 20px create a two 80px by 25px shape and label it with text Helvetica 12pt color #fff.

First Shape: Apply this Blending Option
Inner Shadow: #fff
Gradient Overlay: #e5a61f, #fbb829
Stroke: #d69d23
For the label text add a 1px Drop Shadow 30%.
Result!

Second Shape: Apply this Blending Option
Inner Shadow: #fff
Gradient Overlay: #2792c3, #34abe1
Stroke: #2792c3
For the label text add a 1px Drop Shadow 30%.
Result!

Next add the Cart icon, so go ahead and place it as shown in the screenshot below. For the text I used Oswald 14pt color #383e44, #fff and I added a Drop Shadow 30% to the #fff text.

Step 4: Working on Slider
This slider will contain a slideshow image for a specific post with title, description, price, and a button to link to that specific post. This slideshow will have 3 tabs for the purpose of navigating and switching specific posts. So let’s get started!
Slider PreviewStart by creating a 660px by 355px shape using Rectangle Tool(U).

Set the Foreground color to #c2e7e7. Next using Rectangular Marquee Tool(M) create a 460px by 130px selection. Next, select Gradient Tool(G) and set the gradient to foreground to transparent. Once it is set, fill the slection.

We will be adding title and description to the highlighted part using Text Tool(T). I used Helvetica Condensed 48pt color #383e44 for the Title and Helvetica Light 14pt color #50565c for the description.

For the price text I used Helvetica Ultra Light 48pt color #fbb829. For the view details button create a 140px by 45px shape using Rectangle Tool(U) and apply the same blending option as we did in the sign in button. The label text size will be 16pt.

Lastly you will need to add a sample image preview.

TabsUsing Rectangle Tool(U) create a 3 300px by 122px shape as shown in the screenshot below. For the first shape make it #fff and for the two remaining shape make it #e9e7e7.

Now we will be adding lines using Line Tool(U) to make the tabs looks solid and cool. So using Line Tool(U) create a lines as shown in the screenshot below. Line color I used is #d9d2d2 and #f5f5f5.

Notice in the preview of the slideshow in the first tab there is an arrow head indicating it is the active state. To do that select Pencil Tool(B) set the color to #d9d2d2. Refer to the screenshot below for you to know how I did it.

Next we will fill the tabs with text and the phone Icon. Download phone icons from the resource I provided and place it as shown in the screen below.

For the active state text I used Helvetica Bold 16pt color #383e44 for the title and Helvetica Thin 13pt color #009c9a for the description.

For the non active tabs I used the same size and color but for the description text color will be #50565c.
Text: Apply this Blending Option
Drop Shadow: #fff
Result!

Shadows & HighlightsCreate a selection as shown in the screenshot below and fill it with Linear Gradient foreground to transparent.

Mask the layer by clicking the mask icon from the layers panel. Now using Brush Tool paint the top area to make the shadow fades. Then lastly you will need to set the Opacity to 20%.

Duplicate the shadow layer and place it on the other side. Next thing, make a selection as shown in the screenshot below and use Radial Gradient to fill it with #fff gradient. Then, change the Blend mode to Soft Light.

Step 5: Working on Featured Product
We are going to divide 960px into 4 columns with 20px distance with each column from the right. Refer to the screenshot below for the guide lines measurements.

The first column will be for our sidebar and the rest will be the width of the featured products. The 45px measurement will be the height of the tabs. Using Rounded Rectangle Tool(U) set the radius to 10px and create a shape as shown in the screenshot below.

For the first tab you will need to duplicate the layer and cut out the not including area. Refer to the screenshot below.

Apply this Blending Option
Inner Shadow: #000
For the base layer apply the same blending option as we did in our main navigation. Also, font style and dividers are the same.

Lastly add a 3px border on the bottom color #fbb829.

Next we will create the base layer to hold the featured products. Select Rectangle Tool(U) create a 715px by 300px shape.
Apply this Blending Option
Stroke: #d9d2d2
Gradient Overlay: 0% #e9e7e7, 40% #e9e7e7, 50% #fff, 60% #f3f3f3, 100% #ffffff
Result!

Using Line Tool(U) add two 1px lines as shown in the screenshot below. Top line color #d9d2d2, bottom line color #f5f5f5.

Place a phone icon at the center in the second column and behind the phone create a selection at the very bottom as shown in the screenshot below and fill it with #000. Once you have fill it go to Filter – Blur – Gaussian Blur 1px.

Next create a 115px by 30px shape using Rectangle Tool. Apply the same blending option as we did in our register button. Refer to the screenshot below for more info of making the button.

Using Text Tool(T) add the name of the product. Text format will be Helvetica 14pt color #383e44. Place it as shown in the screenshot below and once you have done it group all the layer and duplicate it two times and place it accordingly for the third and fourth columns.

Next we will create a horizontal scroll. Using Rounded Rectangle Tool(U) set the radius to 20px and create a shape as shown in the screenshot below.

Apply this Blending Option
Drop Shadow: #fff
Gradient Overlay: #dbd8d8, #f5efef
Stroke: #d9d2d2
Create another shape using Rounded Rectangle Tool(U) as shown in the screenshot below. Apply the stroke as we did in the first shape.

Result

Step 6: Working on Products List
In this part I will not go on to detail because all styles here are the same on the featured product section. I will just walk on to an overview on how I did it.
Header Part
In here I created 45px of height shape using Rounded Rectangle Tool(U) and applied the same blending option as we did in main navigation & tabs. Text format are the same and styles. Notice at the right side there is an arrow and numbers. For the arrow I created this using Pencil Tool(B) and applied the same drop shadow as we did on every text. For the active number I used color #fbb829. Also for the distance from featured product & product list is 20px.

In this part all styles are copied from the featured product, so I will leave it up to you. height of each product list will be 250px. I moved the button on the right part and added a price on the left part. Distance from the boundary box will be 20px. The text format for the prize is Helvetica 18pt color #fbb829.
Step 7: Working on Sidebar
Sidebar will contain a Category list & What’s Hot list. Again I will not go on to detail in doing this Il just walk you through it.
Categories
In the header part size of the header is 45px, the same text style and format.

The height of the base will be 215px and I apply 1px stroke color #d9d2d2

Next I added a the list of categories using Text Tool(T). Text format will be Helvetica 15pt color #50565c. I also make a divider using Line Tool(U) color ##d9d2d2. The distance will be 15px top and bottom for the text. Just refer to the screenshot below.

Next I added a bullet using Ellipse Tool(U) fill color #d9d2d2.
Apply this Blending Option
Inner Shadow: #000
Result!

What’s Hot
In this part it is just a copy of categories section and I added a phone icon and price. So I will leave it up to you. Text, color, distance will be the same.
Step 8: Working on Footer
Footer section will be divided into 5 columns this will contain News letter, Account Info, Shipping Info, Quick Links, and Follow us.
News LetterUsing Text Tool(T) add the following text as shown in the screenshot below.

Using Rectangle Tool(U) create two 205px by 30px shape with a distance of 10px and label it “Name & Email” using Text Tool(T). Text format will be Helvetica 13pt color #009c9a.

Next grab a copy of sign in button and uncheck the stroke from the blending options. Change the label to Register and place it as shown in the screenshot below.

Account Info, Shipping Info, Quick LinksFor the header I used the same format as we did in the news letter. The links will be Helvetica 13pt color #fff. Dividers distance for each block is 25px and the dividers color is #009c9a.

Follow UsIn here still the same header format and then you will need to download the social icons and place them accordingly.
Social Icons: Apply this Blending Option
Drop Shadow: #000
And finally we’re done. I hope you learned something from this tutorial and may this tutorial help you in your future projects. For beginning designers I hope you followed this and if you have something to ask just drop it below. Thank you for reading and godless everyone. :)
Final Preview
Download PSD file here.