RSS

Category Archives: Web Design

25 Outstanding Minimalist Website Designs

Minimalism is popular with many designers, primarily because the lack of clutter can help to create a positive user experience. While it is not a style that works in all situations (and what style does?), minimalism can be extremely effective when it is done effectively. It would seem that minimal websites would be easy to design due to the lack of excess, but achieving a high-quality minimal design can prove to be more difficult than expected. In this post we’ll provide some inspiration for you own work by showcasing 25 beautiful, minimal websites.

Co:c0llective

Co:c0llective

Epic Paul Snowden

Epic Paul Snowden

Gravity Framework

Gravity Framework

Craig Coles

Craig Coles

Upperdog

Upperdog

Young Turks

Young Turks

Purty Pixels

Purty Pixels

Decorated Playlists

Decorated Playlists

Ben Bate

Ben Bate

Bit This!

Bit This!

Viljami Salminen

Viljami Salminen

MmDesign

MmDesign

Temple

Temple

That Made

That Made

Helen & Hard

Helen & Hard

Yaron Schoen

Yaron Schoen

Jason Drakeford

Jason Drakeford

Grain & Gram

Grain & Gram

Helen Anna

Helen Anna

Jamie Gregory

Jamie Gregory

Enfant Terrible

Enfant Terrible

Ideas on Purpose

Ideas on Purpose

Positively Melancholy

Positively Melancholy

Offset Media

Offset Media

Distrop

Distrop

 
Leave a comment

Posted by on January 14, 2012 in Web Design

 

Free Download: Interactive Portfolio PDF (InDesign Template)

If you find yourself frequently exchanging emails with potential clients, you may be interested in sending them a PDF file that shows off your work. This free InDesign file will allow you to do just that. You can customize the file to include your own details and samples from your own portfolio, save it as an interactive PDF and email it to potential clients.

Portfolio PDF

This InDesign file has been created by The NetMen Corp and it can be downloaded for free.

Here are some basics details and instructions for editing the file:

  • It comes in InDesign CS5 format, as well as an IDML file to convert it for InDesign CS4.
  • The free font Expressway is used.
  • To add your own portfolio items, save the .jpg files in the same folder as the InDesign file, select one of the existing thumbnails, open the links panel and click on re-link, then select your image.
  • The social networking icons at the bottom can be linked to your own profiles. Select one of the icons and open the hyperlinks panel (Window > Interactive > Hyperlinks).
  • When you are ready to save it as a PDF, go to File > Export and select Adobe PDF (Interactive). Exporting it at 300 ppi will give you the best image quality.

Download the file (13.2 MB zip file)

 
Leave a comment

Posted by on January 14, 2012 in Photoshop, Web Design

 

Juggling Between Freelance Designer and Business Owner

The world of digital design is full of both young and experienced talent. Freelancing has slowly become a more affordable career path for many web designers and developers. But it’s not enough to just create pretty websites in HTML/CSS. You also need to have some sense in marketing a business!

colorful air balloons with Google, inc.

There is a thin line between the responsibilities of a web designer and a freelancer. Some overlapping examples between the two jobs are design skills like Adobe Photoshop, Dreamweaver, and JavaScript. But you’ll also need to understand client relationships, basic time management, project organization, and a few other corporate-class ideas. It can be a tough, but I hope these tips will help you juggle the numerous tasks assigned into the freelancing world.

Never Overload Yourself

This is a big lesson which takes some practice before you can understand. Many young web designers are often eager to jump into the freelancing business and start earning money. Over time you pickup project after project, and soon you’ve got no time left for yourself. It’s a self-defeating cycle of endless stress.

You need to figure out what is realistic to accomplish in any given day/week/month. Each person’s schedule will be different depending on their obligations. But we can all find time for work, even just hours a day. So it’s only a matter of planning out a proper to-do list.

downtown tokyo japan - city traffic

Manage what you can at first and slowly increase your workflow as time goes on. I started freelancing with 1-2 web projects per month and slowly moved up from there. This process gets easier as you meet more people and build credibility for your name. But you have to know when you’ve reached your limit and learn to say “no” – even when the additional work & money is tempting. It’s not worth the strain on your mental health and some clients will be understanding in waiting a few weeks for your services.

Practice New Skills

It’s important to prioritize your design skills first above all else. Working freelance is a privilege compared to the routine 9-5 lifestyle. As time pushes forward you may become complacent with such a schedule. But try to keep your passion for design in check and held at the utmost importance.

Each of us is coming into the web design field with a different skillset. Most beginners already understand HTML and even a small amount of CSS. It’s important to keep on practicing these languages even if you are well-versed.

Xcode and iOS Simulator - programming in Objective-C

The industry is always advancing, so there’s likely new trends to pick up on. And if you grow tired of the easy stuff why not challenge yourself? Try to master a new skill such as Adobe Photoshop, Illustrator, Fireworks, or even another language such as JavaScript. The HTML specs have also introduced new media elements such as native video/audio components.

iPhone 4S Black - Apple mobile phone

Staying on top of your game will keep you ahead of the competition and surely improve the quality of your portfolio. It can become a distraction if you have too much work on your plate. So make sure between client work you take at least a few hours to brush up on some interesting topics. I prefer to spend a day or two researching into new ideas I’ve never studied before. This opens me up to a deeper understanding of web design which I can apply to future designs.

Work Out Steady Pricing

How much you charge on any given project will greatly reflect upon your experience. It’s crucial that you can pay bills at each month’s end! Managing your earnings can be an exhilarating process to some, much nicer than the cut-and-run weekly paycheck. You gain leverage and control over your financial life in areas many haven’t experienced before.

But don’t obsess over your prices and payment methods for too long. Clarify upfront with each client how much you’ll be getting paid and through which method. This pushes all the business talk out of the way so you can jump right into the design work. At the end of your day it may be wise to go over each contract again – possibly a 5-10 minute rundown on your current status.

Relationship Building

We all know how important networking can be in the business world. Ultimately it’s who you know that will help you succeed and make a name for yourself in the design industry. You must spend some time networking your brand and getting your portfolio links out there. E-mails, social networks, online forums, and job boards are just a few places you can start out.

United Kingdom - quiet diner and cafe bar

You don’t want client work to become an annoying chore in your day. Keep a healthy relationship with all your contacts. If your work is good, they will most likely come back for any future design needs. And positive word-of-mouth references are always helpful towards gaining steady business in the future.

How people find your work will greatly impact their first impressions. Make sure you present yourself in a compassionate and professional manner. You’ll impress even the toughest clients and make a strong name for yourself.

Focus on Individual Tasks

The months may grow overwhelming as your work piles up. Don’t let your focus wane too much off course, or you’ll find it difficult to get anything done. I find it helpful to break up the day into segments of focus. You could start with design and web layouts for a few hours, then switch to coding, and finally end with e-mails and other paperwork.

Playstation3 Move Controller - Light up the cat

This is just one loose example schedule, but you should feel out whatever works best. The ability to hold a solid focus for a few hours is crucial – even if you end up switching between different tasks over time. Ultimately you should be able to reflect on each day and feel at ease with the amount of work accomplished.

Conclusion

I hope this article can reach even a few aspiring freelancers. The career path can be stressful at times, but also extremely rewarding. You set your own hours and have the freedom to work with anybody you choose! The growth process is exhilarating, especially for graphic & web designers. If you have your own freelance management tips feel free to share with us below in the discussion area.

 
Leave a comment

Posted by on January 12, 2012 in Graphic Design, Web Design

 

20 Inspiring Examples of Colorful Web Designs

Last week we showed you examples of white usage in web design and today, for our last web design inspiration post of the year, we decided to show you some examples of colorful websites. We will show you how colors can give your design a nice and personal style. From small details and colorful typography to completely colorful backgrounds, there are a lot of colors to inspire you.

The Neighbourhood

Colorful Websites

Shelton Fleming

Colorful Websites

Captain Dash

Colorful Websites

Dangers of Fracking

Colorful Websites

10 years in type

Colorful Websites

Brooks – Shoe Advisor

Colorful Websites

Shoppub

Colorful Websites

Life in my Shoes

Colorful Websites

espacio creativo

Colorful Websites

Macquarie University – Green Campus

Colorful Websites

La Maddalena

Colorful Websites

Kinetic

Colorful Websites

Pioneer Steez

Colorful Websites

small studio

Colorful Websites

Adrian Baxter

Colorful Websites

Gimme

Colorful Websites

Nike Vision

Colorful Websites

Formfett

Colorful Websites

Foundry Collective

Colorful Websites

Protest

Colorful Websites

Source:

The Best Designs
unmatchedstyle
CSS Design Awards

 
Leave a comment

Posted by on January 12, 2012 in Graphic Design, Web Design

 

Usability Design for Online Web Forms

Designers aren’t just creating pleasing graphics for the Internet anymore. As a web designer you need to consider other properties of user interaction and coding. UX design is possibly the most important topic to cover, and this is especially true designing web forms. All webmasters should understand this message.

featured image - Tokyo subway station

Your goal is to offer the simplest path for your users to move from filling out input forms to hitting the submit button. There isn’t a lot of special effects required, although jQuery form plugins have always been a popular topic. In this article I’d like to focus on the user interaction and how each visitor is experiencing your forms. There are techniques you can use to streamline the process which converts to less frustration in your audience.

Keep a Small Focus

I’ve heard dozens of users complaining about signup forms which require too much info. If you’re looking to increase user registrations then you want the form to be as simple to complete as possible. The same goes for newsletter signups and other similar types of input data.

The minimum number of fields will vary depending on your objectives. Registration forms may ask for a username, e-mail address, and 2 password fields. This is certainly reasonable and users looking to signup will be expecting about this length. But consider other signup forms such as the default WordPress style.

Default WordPress signup registration form

Here your visitors are only required a single username and e-mail address. The system then generates a password and sends an e-mail to the given address. This works to reduce original form size and keep spammers at bay. You don’t need to verify your e-mail through a link, but you do need access to your inbox to acquire your new login password!

Perform Actions as Expected

The one thing most users hate is unexpected page activity. You will absolutely want to keep your form behaving in a natural manner, and reduce any JavaScript extras to a minimum – popup guides and Ajax validation are key components. Usable forms shouldn’t be split into multiple columns and spanned across the page. This is just one example of poor technique.

Macbook Keyboard - web and digital keys

Another mistake I run into often is misuse of the tabindex HTML property. This attribute is wonderful from a usability standpoint since your visitors can fill out forms even without a mouse. But if you have these numbered out of order, or only fill out a few input fields then the whole system is thrown off. This is certainly true with signup forms but even more-so with other types of input – especially online shopping carts.

Security is Priority #1

Whether you’re dealing with customer credit card numbers or simple e-mail addresses you should always put website security first. Visitors are trusting your website and backend code to process each form properly and store user data in a secure database.

If possible I recommend using an SSL certificate on your entire domain. This way users won’t just be protected during signup, but their entire viewing session will be protected via https. It can be a bit of work, but some web hosts like Fat Cow will actually aide you in the setup process. It’s certainly not a requirement for every site but it doesn’t hurt to go that extra mile for security. Your users will feel much safer, and it builds a level of trust going forward.

Security Control Room Photo

Additionally don’t fall for some of the more obvious ploys to detect data. Always use a POST data type in your forms unless the information isn’t exactly “private”. GET requests should only be used if the URL structure can benefit from the data(ex. search pages like search.php?q=my+search+terms).

Tokyo Night Traffic

Both of these methods will pass backend data in a similar fashion. But GET data is processed openly in the URL and is susceptible to hijacking. POST data is much more secure, especially behind an HTTPS connection. This fantastic guide by Think Vitamin explains the differences in an easy-to-digest format.

Large, Spacious Inputs

I have listened to a lot of arguments surrounding the sizes of web forms. Standard CMS brands including vBulletin, Joomla!, and Drupal use fairly smaller text sizes for input fields. These are generally default 10px-12px fonts with very little padding.

Diigo signup registration form

The signup form on Diigo has a very spacious layout! You need to alleviate room between the many different input elements. Also bold text lets you know which fields have been entered and which are still untouched. As you highlight each field the form responds with a faint blue tint – just a marker to let you know where your cursor stands.

The classic Digg registration form was designed and built in a very similar way. Twitter’s registration formis also oversized so you can’t miss a beat. They are not afraid to use extra white space which gives prominence to the input fields. Their system of labels is also very unique by setting placeholder text when the field is empty. By dropping the color to a light grey you can easily distinguish between user-added text and the field presets.

Conclusion

There are a whole library of new trends emerging in web design. The newer CSS3 specs are still growing in popularity and we can see these properties in various layouts. Web forms are no different and deserve just as much attention from designers.

I hope these guiding principles behind user experience can invigorate you towards building better web forms. The process of handling backend data can be tricky even with simpler languages like PHP. But with just 1-2 weeks of practice you can likely figure out a system that works for you. Web developers both frontend and backend would do well to learn and understand these paradigms. If you’d like to share ideas on building accessible web forms please let us know your thoughts in the post discussion area.

 
Leave a comment

Posted by on January 12, 2012 in Web Design