If you have’t already noticed, Flickr has recently underwent a major redesign. Among other things such as a terabyte of disk space and a new and inspired user interface, Flickr has also recreated one of those tiny details that are generally forgotten or dismissed by others – we are of course talking about the often ignored avatar.

With the new design, Flickr ‘retired’ their old ‘Howdy’ avatar, and commissioned visual designer Charis Tsevis to create a series of vibrant avatars that would reflect the Flickr community and product.

The attention to detail from Charis is phenomenal, just have a look at these:

Retro Camera

Twin-Lens Reflex Camera

Olympus-like DSLR Modern Camera

Smart Phone

Polaroid

Canon-like DSLR Camera

Nikon DSLR Camera

Medium Format Camera (like the Hasselblad)

Fujifilm Point n’ Shoot

Leica Light Point n’ Shoot

Sony Point n’ Shoot Camera

0

Nikon Compact SLR camera

1

The Avatar Collection

2

It was in 2003 that the first version of WordPress came out. It did not have many things to brag about back then — there is not much a blogging tool can brag about anyway!

Fast forward ten years, to 2013. What started as a humble blogging platform has today established itself as the world’s most loved and popular Content Management System.

Yes, that’s right. WordPress is ten years old today!

In order to celebrate this special occasion, WordPress users and enthusiasts all around the world are organizing meetups and parties. All of this has been in the planning for quite some time now. Among other things, you can also get your hands on anniversary tees and other wonderful merch.

In the internet world, where new technology and software is released almost every other day, surviving (oh, and dominating) for ten years is an awesome feat. Considering the popularity of WordPress, it surely looks poised to enjoy stardom for many more years to come!

Happy Birthday WordPress, and thank you!

What are your plans for today?

When sitting down to plan a website you will likely consider a number of factors. These revolve around your general target audience and what they might be looking for. As desktops are getting larger there is more of a need for bigger font sizes. Oversized typography and webpage graphics will generally herd visitors deeper into your layout.

I want to look at just a few design trends related to building oversized websites. The term “oversized” implies that maybe the design is too big, however I think it is more accurate to say the website appears much larger than a typical design. Websites would often utilize smaller fonts to save space and appear more professional, dating back 10+ years ago. But there is nothing unprofessional about increasing your text sizes and including more space between your page content within a more modern design.

Catching Eyes Above-the-Fold

One of the biggest advantages for larger website elements is the captivation you will receive from visitors. This means when you setup large page elements above-the-fold your visitors are more likely to scroll down and check out the rest of your content. It will not be the case with every visitor, but it is much more likely to occur with glamorous designs.

The agency layout for Bronco has a unique mix of smaller and larger page elements. At the very top you can see their logo and some related links to their services pages. Each of the various colors and text effects will naturally catch your eye right after the page finishes loading. And since it looks like there is a lot more to be found lower in the page, you may feel curious to scroll down and continue reading.

On the website for 1minus1 I feel there is a similar approach but heavily focused on graphics. Each of the top navigation links is big enough to clearly read where they go. And the heading design is definitely enticing, but it is the lower page graphics which initially make you say “wow!”. This is a wonderful response you want to elicit from visitors within the first few seconds after landing on your homepage.

Large Screen Imagery

I like to see photo slideshows and video previews right on the homepage of any new website. This is an extended connection offering a brief insight towards their company, what they do, and what they have done in the past. I especially think these page elements work nicely in portfolios and design agencies, such as the website for Capcan.

On their homepage you will find a big fullscreen image slideshow which transitions between a number of different works. I also like on their portfolio page which uses a fullscreen grid of thumbnails for the display listing. These larger graphics are much easier for users to see and therefore interact with.

Also on the homepage for Price Ink you will notice a similar design feature. One solid homepage graphic along with a few columns underneath. Each item will showcase a different icon design as the heading portion. It is a feature which works nicely for professional businesses and studios who want to quickly share their areas of expertise.

Readable Web Copy

My personal favorite reason for utilizing bigger page elements is the readability. On mobile devices and tablets you can still quickly get through the content – especially using media queries which automatically adjust the font sizes. But for readers on desktop computers it provides a simpler method of getting through and reading each paragraph of your content.

The portfolio website for Mohammad Eshbeata showcases a prime example of bigger and more readable web copy. The homepage design is built using parallax scrolling which minimizes the effort of the visitor. Also the font colors contrast brilliantly against the changing background styles.

Trent Walton uses an even more minimalist approach in his web design. This is the ultimate choice for contrast because your text will be large, crisp, and easy to scan from a distance. The biggest problem is that not everybody will have a website to use this for design quality. I greatly admire Trent’s website because of the various font choices, and how it all appears very natural in the layout.

Fullscreen Backgrounds

How could we talk about oversized websites without delving into full-screen background images? There are plenty of free open source plugins such as Backstretch which allow you to create full screen backgrounds very quickly.

The example from J Dawgs also includes some really nice text animation. I think all of these aesthetics coupled with the background image provides a very unique experience to the user. Yet these websites are typically used for static content consumption, and a large background image may get in the way of your font choice.

Try using segments of your page to split into block-line content elements. This makes designing big fonts and graphics a lot easier because you can split up horizontal slides as the user scrolls vertically down the page. But again, this feature is mostly advantageous when you can make good use of your homepage design. Not every website will need a full-screen background image unless it is directly relevant to the web copy.

Parallax Effects

Websites using a parallax scrolling feature often have a navigation bar which allows visitors to jump between sections on the page. This toolbar will generally be fixed onto the top of the page for easy access. Many designers have come to loath this technique, but I still really enjoy the accessibility. The latest redesign of Smokey Bones features exceptionally large elements with a fixed scrolling navbar.

I have always been a fan of this restaurant and I like to check their website frequently. This was quite a surprise to find a new design and witness how great the entire interface looks.Each of the horizontal panels is using some type of texture or background image, and the content is still quite clearly legible. By keeping all of this on a single page you save the user from more HTTP requests and it saves them time browsing through information.

Parallax design is a much more complicated topic but I feel it pairs nicely with oversized content. Graphics, videos, text, and anything else you may place on your website will be easy to access and easy to understand. The homepage design for Thrive Solo uses a lot of circles and icons for containing alternate content sections. It can be a great technique for bridging the gap to explain your website’s purpose while also keeping visitors curious at a distance.

Showcase Gallery

Along with these general design trends I also want to include a small inspirational gallery of website designs. This collection focuses on websites using big graphics, big logos, oversized backgrounds, and large typography. Bigger websites are not always better, yet they can draw in a lot of attention with just a short amount of time. See if you can locate any familiar design themes in this showcase, or even pinpoint newer trends with your own research.

Manos

0

Bitfoundry

1

Cage

2

Nova Crystallis

3

ZHNG Studio

4

Mozilla Firefox

5

Theme Trust

6

Data Driven London

7

Geckoboard

8

Seed Spot

9

Leaderbe

0

Cujo

1

Carsonified

2

Accolado

3

KK Designs

4

24ways

5

Skewed Icons

6

Paradox Labs

7

Px Background

8

Mr. Henry

9

Simple as Milk

0

What Cheer

1

Web Visionary Awards

2

Snowden Industries

3

Rareview

4

Boxee

5

Fajne Chlopaki

6

Merge Agency

7

Chris Boddy

8

Francisco Inchauste

9

You might also like…

25 Beautiful Content Heavy Websites

WideArea is a simple and lightweight JavaScript and CSS library (2KB JS and 4KB CSS) which helps you to write better, simpler and faster.

Kraken is a lightweight, mobile-first boilerplate for front-end web developers. It includes just the essentials: A CSS reset to ensure cross-browser compatibility, a responsive & mobile-first grid, a well-designed & fluid typographic scale, CSS3 buttons, basic form styling and optional add-ons for functionality.

Minimalect select replacement for jQuery that will replace select elements with a nicer and minimal styled control.

demarcate.js is a jQuery based editor for Markdown. It lets you edit directly on a page and generate Markdown from the HTML elements.

Forecast Font is a web-font for creating multi-layered weather icons. It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style.

0

1

2

3

4

5

6

7

8

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week. And of course, don’t forget to click the ‘Change Viewport’ button to explore each site in detail.

Adam Hartwig (Responsive)

Adam HartwigChange Viewport

Mister

Mister

Neue Yorke (Responsive)

Neue YorkeChange Viewport

Brault & Barnes Design (Responsive)

Brault & Barnes DesignChange Viewport

Dunked

Dunked

Idiom (Responsive)

IdiomChange Viewport

Shadow (Responsive)

ShadowChange Viewport

Thinglist (iOS App)

Thinglist

Getting started in freelance web design work can be scary, especially if you are planning to do it full time. It is important to get the right design tools for your business, but that can be costly right? Maybe so, but not for the thrifty freelancer.

This first thing you will need to begin freelancing (besides a computer!) is software which will allow you to build websites. I am currently a Windows user, but much of the software and tools listed here is either Mac compatible or has decent Mac alternatives. Below are my recommendations of free and low cost software that does not compromise on quality.

Text Editor:

The bread and butter program for any web developer – this is no doubt where you will spend most of your time. Luckily, we are blessed with some great free text editors. My personal favourite is Komodo Edit. The latest version (8 at time of writing) has support for all of the web languages including HTML5 and the CSS pre-processors LESS and SASS.

I find the syntax highlighting, HTML tag matching and autocomplete function suit my needs perfectly and there are plenty of customisation options to make the experience just as you want it. It also has a built in FTP client for live editing files, it works very well but I definitely don’t recommend live editing websites (read on for the version control section!).

Alternatives: Notepad++ (FREE) and Sublime Text 2 ($70, free trial is available).

CSS Pre-Processor:

If you are not pre-processing your CSS, then you really should be – it can really speed up the way you write your CSS and even if you just use it in its most basic form (variables and nesting) you can still save a lot of time and effort. Being a SASS and Windows user there’s unfortunately not that many options for which application to use. I find Scout to be a nice and simple free tool and I’m yet to have any issues with it.

Alternatives: CodeKit ($15, Mac), SimpLESS (Free, Windows) and Fire.app ($14).

FTP Client:

Every web developer needs to upload files sometime. My client of choice is the free FileZilla. There is no solid reason for using FileZilla over some of the alternatives, but it has never let me down so I’ve never found a reason to switch. It quite simply does what it says, and very well (+ the frequent updates are reassuring).

Alternatives: WinSCP (Free) and CyberDuck (Free).

Version Control:

Many people are scared to switch to version control, but once you have you will never go back to live editing by FTP ever again. Version control is particularly useful on client sites where you simply cannot afford to make mistakes by live editing. My version control system of choice is Git, which I chose due to its popularity and support. There are two things you need for Git version control – somewhere to host your repositories and a Git client to handle the changes.

Many will have heard of GitHub, which is free for open source projects but charges for private repositories. Luckily, there is an alternative – BitBucket (https://bitbucket.org/), it allows unlimited private repositories for free for up to 5 users (perfect for small freelance teams!). BitBucket however does fall down slightly on deployment, but there are scripts available which automatically deploy your commits by FTP. Version control has notoriously been not very user friendly. As Git is now being used so extensively in the web design industry, better tools are being released. My Git client of choice is GitHub for Windows (Mac client also available). It has a great interface and despite its name is also compatible with BitBucket.

Alternatives: GitHub (free for open source, from $15 a month for private repos) and Beanstalk (from $15 a month but has deployment built in).

Design Software:

Whilst designing in the browser is becoming more popular, I still can’t step away from Photoshop/Fireworks for mock-ups. It is one of the few applications I pay for but the pricing may not be as bad as you think. Recently Adobe have moved away from a one off fixed price model for their software (they still do offer this though) and have introduced Creative Cloud.

Creative Cloud allows you to pay monthly to use Adobe software which is perfect for freelancers and really great for cash flow. Just £17.58 a month if you are willing to commit annually or £27.34 if you would like to be able to cancel at any time represents good value for money and avoids a large one off cost. It also has the added bonus of 20GB of online cloud storage and product updates at no extra cost.

Alternatives: Gimp (Mac & Windows, Free) and Sketch (Mac, $49.99).

Web Hosting:

This is a pretty basic requirement for any web developer. The websites we build use PHP and MySQL (predominantly WordPress) and we also sell hosting to our clients, so PHP hosting and the ability to create new accounts for clients is essential. There are literally thousands of web hosts and if you already have one that you’re happy with then stick with it.

We use MediaTemple on their DV service. It is certainly not the cheapest option available but is very scalable, has great support and great performance. The cheapest DV is $50 per month and is by far enough to get anyone started – if you don’t plan to host your clients then the GS service is a good alternative at just $20.

Alternatives: There are literally thousands.

Billing:

Let’s talk about money – something freelancers usually don’t like talking about. So you have got all of your development tools and you’ve even managed to score your first client, but how do you bill them? You could just send them a PayPal request, but what if they don’t use PayPal or you’re getting paid by bank transfer or cheque? Luckily, there are plenty of apps to tackle this. Your major decision here is whether you want to pay for a monthly service, or take a one off hit.

A nice option for a one off payment is Pancake – you install it on your own server and it has a huge volume of tools available such as invoicing, project management, time tracking and the ability to create proposals. This comes at a one off cost of $49.

Another option is a hosted solution such as Harvest. This is going to set you back $12 a month for a basic account but it offers a super simple interface for time tracking and invoicing your clients.

Alternatives: Invoiceable (free with advertising or one off payment of £49).

Payments:

It’s all well and good sending a client an invoice, but how are they actually going to pay you? My preferred method of payment is bank transfer – it is by far the cheapest and quickest way of getting paid. All you need is a bank account.

Bank transfer may be perfect for bigger projects, but what about recurring or small payments? This is going to differ from country to country but PayPal allows subscriptions and can be a good way of collecting a recurring monthly payment from clients for services such as hosting and maintenance. PayPal fees are a bit higher than the average, so remember to take this in to account when setting up your pricing. I wouldn’t recommend taking large PayPal payments for projects – it’s expensive and can be risky if the client initiates a charge back.

Alternatives: There are plenty of these from good old fashioned cheques to companies such as GoCardless, Striple and Authorize.net.

Contracts:

You should always have a contract in place for any work you are taking on, these can be expensive if you are paying for a lawyer or a solicitor to draw up bespoke contracts for you when you are starting out it is much more cost effective to use an off the shelf contract – take a look at this Speckyboy article which has a good list of free contracts available.

Always remember to thoroughly research the laws in your country before setting up a business and always seek advice if you are stuck – this isn’t something you want to get wrong!

Other things you may need to consider:

The above list will certainly get you started but there are undoubtedly some other things you may want to think about when setting up that are beyond the scope of this article and will definitely change depending on your country, so in no particular order:

• Telephone (VOIP services are great for this!)
• Broadband (you probably have this anyway)
• Business insurance
• A business premises or access to a premises for meetings
• Travel costs
• Taxes
• Accountancy

So there we have it, all of the software to start developing awesome websites for next to nothing. We make it a minimum cost of zilch – £0 and a maximum cost of around £50 per month. Who said business has to be expensive?

Have we missed any killer tools? Let us know in the comments.

The latest business trend on the Internet is single-page websites. Sure they’ve been around for a while, but only recently have they been embraced on a larger scale. And why shouldn’t they?

A single-page site means less confusion for the user, key information is just a click or scroll away, and you can put tons of your best work front and center. This Mighty Deal from Flashmint lets you get in on the fun with 20 HTML5 one-page Website templates with the Parallax Effect!

One Page Responsive Parallax Templates Highlights:

• 20 Website Templates
  This bundle features 20 high-quality, professional HTML/CSS templates for your website (note: These are not WordPress templates, but website ones). You’re sure to find a design and layout you like among so many great choices.
• Responsive Design
  All these templates were built with a responsive design. That means they’ll not only function on any device, but look great too. Whether it’s a desktop computer, laptop, smartphone or tablet, you can rest assured that your site will continue to impress no matter how your users are viewing it.
• Customizable
  Your purchase of this Web Template Bundle means you’ll receive the necessary CSS, HTML and PSD files for each template. That makes it easy to customize your templates any way you’d like, from adjusting colors to adding images.
• Royalty-Free License
  All these templates come with a royalty-free license. You can use any of these templates on a single domain for either personal or business-related projects.

Take a look at the amazing templates included in this bundle:

The Themes

Portfolio (Demo)

Professional Portfolio (Demo)

Web Designer Portfolio (Demo)

Photography (Demo)

Photographer Personal Page (Demo)

Responsive Portfolio (Demo)

Fashion Models (Demo)

Wedding (Demo)

Business Parallax (Demo)

Responsive Single Page (Demo)

One Page HTML5 Portfolio (Demo)

0

Corporate Responsive Parallax (Demo)

1

Business Responsive Parallax (Demo)

2

Responsive One Page Portfolio (Demo)

3

Travel Parallax Responsive Site (Demo)

4

Hotel Responsive (Demo)

5

Spa Salon Responsive (Demo)

6

Restaurant Responsive (Demo)

7

Photo Portfolio Responsive (Demo)

8

Photographer Responsive (Demo)

9

Pricing:

This collection of 20 responsive, one-page HTML website templates normally sells for $700, but for a limited time only, you can get all 20 for just $19! That’s an insane savings of 97% off the regular price!

There is no doubt that a rightly designed website is important for a strong online presence of your company. Your website has every capability to make or break your business. Having a website that represents an individual, brand or entire business can help in increasing your profits and customer loyalty. For those of you interested in launching a website to represent your specific product, services or any online content, seeking out the best website programming specialists is the ideal solution. Today, modern websites are designed significantly more than just simple HTML as web programming has turned out to be increasingly sophisticated. You require a strong technical website with good programming skills to make sure that your website functions properly on the ever-changing and complex web.
It is always beneficial for a novice webmaster to learn different web coding languages. There are many reasons why everyone who wish to work with website need to learn basics of web programming. The most compelling purpose is the need to tweak or edit web pages. While designing a website by yourself or getting designed by professional website programming companies, you are likely to edit maybe one or more webpages. When this need to tweak your website arises, it becomes critical to have knowledge on basic coding skills. Other reasons to learn web programming include creating neater or cleaner pages, repairing broken pages such as links within the pages and enhancing your web pages with effective designing.

Creating a website may be easy. However, creating a practical website is the difficult task. Most website owners do not heed to coding or programming aspects of the website as they look only for the layout of the website and not the interface aspect of it. However, the truth behind each website designing is the numerous programs and coding used in designing a website to run on different browsers. These website programming and coding languages make your website compatible and appealing.

Web designers and developers all over the globe choose different programming languages according to the client’s requirements. These languages include HTML, XHTML, CSS, XML, JavaScript, PHP, ASP.NET, Perl, Python, JSP, Ruby on Rails and ASP classic. A web designer would use a combination of one or two languages while designing a website. HTML is the foundation language for designing web pages.HTML continues to evolve and remain staple of web coding community. Other languages will use html within the coded pages or integrated in scripting pages. Once mastered with html basics, you can venture into other website programming languages. PHP is the popular programming language and is known as an open-source alternative. The main advantage of using PHP is that a dynamic website can be opened quickly on various web browsers and you can protect your site with the aid of its secured layers. User friendly website can be easily developed using PHP and is the most preferred programming language by web developers. The .Net framework is used for building, deploying and running several web applications and services with quicker and easier programming. This programming language reduces the quantity of code required in building large applications and can be run on only windows platform.

Due to the diversity of programming tasks, it becomes critically important to choose a language. It can be decided upon the analysis of your project and judging every aspect of your website requirements. With the various website programming languages, the decision completely lies on you and your budgetary aspect to choose from.

Last weeks jQuery Hotshot giveaway ended on Friday and it is now time to announce the winners. Here they are:

Congratulations to our winners. Packt will be in touch with you over the next few days with your prize.

About the Book “jQuery Hotshot”

jQuery Hotshot walks you step by step through 10 projects designed to familiarise you with the jQuery library and related technologies. Each project focuses on a particular subject or section of the API, but also looks at something related, like jQuery’s official templates, or an HTML5 feature like localStorage. Build your knowledge of jQuery and related technologies.

Learn a large swathe of the API, up to and including jQuery 1.9, by completing the ten individual projects covered in the book.

Some of the projects that you’ll work through over the course of this book include a drag-and-drop puzzle game, a browser extension, a multi-file drag-and-drop uploader, an infinite scroller, a sortable table, and a heat map.

Learn which jQuery methods and techniques to use in which situations with jQuery Hotshots.

You can download a sample chapter here: Chapter 3 – “An Interactive Google Map”.

Are your forms converting? Have you tested them? How would you even go about testing the effectiveness of your forms?

Well, it’s quite easy with A/B Testing, which is a fairly straightforward process. You perform A/B testing by creating two versions of your form (one being the original as a control) and splitting your visitors equally between them. When your forms reach a statistically confident number of conversions, you then pick the winner. The winner will be the control form for the next test, and you can continue this process indefinitely.

Doubtless, there are always the best practices of web form design to fall back on in order to maximize effectiveness. Still, in order to help you in your process, I’d like to share a comprehensive list on what to test in your online forms, from the most general to the most specific. Let’s check them out.

Design

Layout

A decluttered page is a proven method of focusing attention. There are multiple layouts available for use in web forms (such as 1, 2, 3 or 4 columns.) More columns will cause frustration, and it’s also best to keep your form down to one for your mobile visitors’ convenience.

Label Alignments

There are 4 possible alignments to give your field labels: top, right, left, and inline. When testing alignments, keep in mind the language that your visitors speak, as well as the width and height of your form. Be extra careful when using inline labels.

Colors

This is really tricky. To best test your colors, you should be familiar with some basic aesthetic principles, such as contrasting and complementary colors, etc. Although you may like the color red, that doesn’t mean your visitors will. By testing colors, you can make your form grab their attention without being too extreme or gaudy.

Image Source: Site Para Empresas

Fonts

This seems like an obvious thing. “Use web safe fonts when unsure.” You should also keep in mind that font sizes should also be tested within certain age groups, like those in the range 65+.

Image Source: isotipo.net

Content

Headline

The headline quickly describes what your form is all about. Your form’s goal can be to collect leads, however, you shouldn’t just put something like “Sign Up”. The visitor needs to know what he or she stands to gain by signing up! For example, which of these will have the highest conversion rate?

1. “Sign Up Form”
2. “Free E-Book”
3. “Sign Up & Get Free E-Book”

Length

The most important trait of a good web form is that it is absolutely no longer than it needs to be. Experiment with removing unnecessary or intrusive questions. Is your site the kind of site that needs to ask a home address? Could shortening your form result in more cooperation?

Image Source: VisualLizard

Submit Button

Your form’s final step should be tested carefully. Does making the “Submit” button bigger/smaller or a different color change your results? What should the text read to get your users excited about sharing their input? Use text that’ll contribute to defining your form’s purpose to the user. If you’re giving away a free e-book, for example, try having the submit button read “Get Free E-Book.”

Image Source: JotForm

Hints, Tips, & Sub-Labels

Does guiding your user through the process help? If you have labels already, you could also test what happens when you remove them or modify them. In the same vein, do hint boxes beside form items help or hurt?

Captcha

Nobody likes captchas except a form’s creator. I know you don’t want to get spam or waste your submission limit, but it’s important that you test the form without one. That way,you can see if you really do get any spam (i.e. is the captcha necessary?) and whether or not omitting it improves your conversion rates.

Image Source: Captcha.net

Context

Relevancy

This of course is obvious, you should put specific forms on their relevant pages. A “Contact Us” form should be on a Contact page. Different types of forms can be used on different parts of your site.

Dynamic vs. Static

You can test having your forms pop up when visitors complete a certain action on your site against placing it in a static location on your page.

Some A/B testing tools you can use for your forms

There are a variety of online tools available to facilitate A/B testing and each have instructions on their respective sites about how to start testing your forms. Some of the sites on this list offer their services for free, while others require you to pay.

Wrapping it Up

Testing is a cumbersome process for each web element and when it comes to online forms, it deserves more attention due to its position as the backbone of user generated data. By testing the form elements above with the help of A/B testing services, you can improve the conversion rates dramatically and get one step closer to perfecting your web forms.