13th
August 2010
Read More
The world of the web is rapidly changing as the dawn of HTML 5 and CSS3 is here. With this, there are many new design trends appearing and in this article I will attempt to outline the ones I believe are most influential in my approach to design.
Oversize
Over sized logos, images headers and footers are currently very popular, they grab the viewers attention with interesting and realistic graphics to encourage interaction and a longer viewing period on the site. They also provide a more user friendly alternative to static splash pages wherein a link must be clicked to pass though to the rest of the site. It’s important to consider that in our current “instant gratification” society, people will spend milliseconds deciding whether to read on or navigate away from your page. Thus an eye catching header, banner and logo, could have a positive effect on viewing times.
Typography
As site logos and headers get bigger and bigger the typography used is increasing in size to match this. As long as the page doesn’t look cramped, bold messages in fonts such as Impact have attention grabbing power.
As many are aware, there is currently a revolution in web fonts. Previously, designers had to stick to the 16 web safe fonts in an effort to make their web pages accessible to the largest amount of people. Now with companies such as TypeKit, who provide accessible fonts to the general public, the designer has a much wider choice.
As Web Design evolves, visible influences from print design, both past and present, can be seen. Publications such as ‘The Times Newspaper’ have a requirement to replicate the look and individuality of their publication on the web. Especially since magazine sales are decreasing and more people are using mobile devices to read their favourite newspapers and magazines. However, with all these new fonts to play with there is a danger of going overboard and stifling the message.
Hand drawn Graphics
Reality seems to be slipping into the world of web, with more and more designers developing an penchant for ‘real’ imagery such as drawn graphics and photography throughout their pages. Gone are the times when gradients and reflections were king, designers are creating more gritty and real work using light textures and noise. Creating new perspectives on the page also interests and surprises the viewer. For example, a photo of a designers desk or an artists canvas, or even the inside of a fridge used as the background image to a site.
Social Networking
Social networking is becoming increasingly important and useful as people can now easily upload their work or photos straight on to sites such as on Flickr, Behance, LinkedIn , as well as Twitter and Facebook. The work is already circulating, and creating a website with the same information that could be considered unnecessary. Single page websites catch the viewers attention, and collate all their links in one place.
As designers we all know it’s essential to be aware of new trends, and ‘what’s hot’ and ‘what’s not’. However, it’s also important not to get carried with the flood and create designs based entirely on what you think the ‘latest thing’ might be. Your client and the needs of your project need to take precedence over any fashion that might be common at that time.
This post was written by Asia Simpson and Holly Kennedy from the Design Team @ BaseKit
9th
August 2010
Read More
We spend the majority of our time designing for other people; we take a design brief and we design with our clients and their users in mind. We use their company logo, their brand’s colours, their content and quite often their ideas. Sure, there’ll always be aspects of the design that we are not 100% happy with, but so long as the paying customer is happy then we have done our job and done it well.
Designing your own portfolio site is quite unlike any other site you’ll design, there is no client, no specific set of requirements and nobody’s ideas but your own. When you say these things out loud, it sounds like any designer’s dream: no limitations and full creative freedom. It’s only when you finish your third or fourth redesign that you realise that you are far fussier than any client you have ever worked with and that creating a design that you are 100% happy with seems almost impossible.
I must have come up with at least eight or nine different designs (I think I coded at least three of them before changing my mind) before I was finally content with my own portfolio site. I say content, because I don’t think I’ll ever be “happy” with it because I’m too close to it and far too fussy.
However, the multiple redesigns taught me a few things about designing a portfolio site.
Keep it Simple
Keeping it simple was the biggest problem I faced when designing my portfolio site. I had all these crazy ideas about what would look great, bizarre colour combinations, slightly off the hook layout ideas – all in the pursuit of being slightly different and to standout. In end I just drove myself insane – I was over-thinking it completely.
In end I came to the conclusion that I’m a web designer and developer – I am by no stretch of the imagination a graphic designer. I am no-where near that creative, but I am capable of creating highly usable and visually appealing websites, so I decided I should just focus on that. Everything else seemed to fall into place after that.
A Blog is a Good Idea
Not only is including a blog on your site great for SEO and bringing more traffic to your site, it’s also an opportunity for you to show that you know what you are talking about. If you are passionate and knowledgeable about what you do, a blog is the perfect way to show this to potential clients and a good way to potentially start a discussion with other designers, which may in itself lead to other opportunities.
Never Use a Template
This really should go without saying but never ever use a web template for your portfolio site. I’ll be honest I was really tempted to at one point. I wanted to build my portfolio site on WordPress but didn’t have a clue about creating my own theme or where to start, I considered using one of the many available WordPress themes. That being said, I realised that I’m a designer so my portfolio should be designed by me for me – so I learned how to develop for WordPress. My point here is, don’t use someone else’s design for your portfolio site, no matter what.
Don’t Waffle
Don’t use 12 twelve words when 7 will do. This is especially true of your homepage, don’t try to squeeze in as much content as possible – try to include a short introduction that sells yourself and what you do to potential clients. If you get their attention they’ll look deeper into your site.
An Effective About Page
This is your opportunity to really sell yourself and stand out from the competition. Tell your users about your background, how did you end up in the industry, what parts of your job do enjoy the most? These are all aspects of you as a designer that make you different from every other designer out there. You can even mention your hobbies, especially if they are a bit different from the norm – for example you might love surfing, and so might the guy who’s currently reading your story. This makes you unique to that potential client and since he can already relate to you on your shared love of surfing, he may well get in touch for his next project.
Showcase only your Best Work
Don’t include every site you have ever designed, your users are probably not interested in that website you designed whilst still at design school. Your best work will also more than likely be your most recent work and therefore probably still online.
Another good idea is to only showcase the types of projects that you are keen to work on again. For example if you enjoy working on E-Commerce sites and want another E-Commerce project it might be a good idea to focus on this when showcasing your work.
A screenshot of your last piece on your homepage with a nice call to action button linking to your portfolio page is always a nice touch too. Show people what you can offer from the offset and invite them to explore further.
Multiple Contact Options
Not everyone has the time to give you a call or to write you a long email. Provide as many contact options as possible. A nice short contact form always goes down well, maybe also instant messaging options like MSN / Yahoo Messenger or Skype.
If you’re anything like me then you probably struggled with your own portfolio site, you tend to be your own worst critic and over-think it completely. The best piece of advice I can pass on is to keep it simple, once you have come up with a design, don’t look at it or think about it for a week. Then come back to it and see how you feel about it then, you’ll be surprised how your opinion that design can change once you have taken a step back.
This post was written by Lee Harding of Lee Harding Web Design – creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!
Photo from Flikr creative commons
5th
August 2010
Read More
You can always focus on your proper execution of the design principles, but what about creating a rich user experience through the use of psychology? Understanding more about your viewer as an individual and meeting their needs is the core foundations in Maslow’s ‘Hierarchy of Needs’ as pertaining to design.
What I’d like to do is go through each level of the hierarchy to help you better understand what exactly your client needs or wants whether you are providing them a site, game, or application. Creating the base of our hierarchy ‘pyramid’ is functionality. What good is your product if it doesn’t work? Having the basic functions of your website in place such as ‘Back’ and ‘Forward’ and you links hyperlinking to their correct destination. Because since the internet’s public induction, these are the core elements that are expected out of any website.
Reliability is the second tier of our hierarchy structure. Making sure that your site’s performance isn’t only stable, but it remains consistent, time and time again. People look for reliability in the products they use. If it worked fine yesterday, why not today? With little to no reliability you can also expect little to no people wanting to return to your site. It’s easier to get frustrated with unreliability and just walk away.
Is your site or design over complicated? You don’t want to complicate things and confuse your user. In addition to being easy to use, is your design forgiving? If the user messes up a portion of their sign-up form and it erases all of their previous entries or crashes the site, let’s face it, I would think it would be considered a usability failure. A usable website has a navigation system that is easy to understand and use, an organization that makes content easy to browse, readable text, and a layout in which orienting oneself is straightforward.
Designs regarded as proficient are perceived to function at a high level. A design that allows people to do things not previously possible and to expand on basic functionality is considered to be great. A proficient website might include advanced search options, the ability to combine data from different sources into more sophisticated levels of information and Web-based tools.
After all of the base needs have been met you can start to explore your creativity, which is the top of the hierarchy. Try to provide your user with a rich experience, give them options if need be. Think of fun ways to incorporate them and let them have a bit of fun themselves. You can add certain changes to your design to accomplish this. A creative website might include AJAX effects, aesthetic appeal and interaction through voice commands. Do we really have to get everything right at one level before committing resources to higher levels? Will a market tolerate a product that fails for no reason 10% of the time if it does everything beyond expectations the other 90%? Again, while the hierarchy intuitively makes sense, the needs and desires of the market will likely determine what is most critical to improve in the hierarchy.
Less is more – the simplest designs are often the best. You don’t want to over-populate any one of your web pages with too much of anything (images, content, etc) and you certainly do not want to make your readers scroll down a page for 30 seconds to find what they are looking for. Have a good balance, make sure everything is easy to access, and make sure your site looks neat. When things have been laid out in a way that has some order to it, and is not just clustered together, it is more professional and is much easier to look at, both initially and for extended periods of time.
Do you think this process is a waste of time? Or does following these core design principles based out of psychology help you succeed online?
This post was written by Joshua Rapp of Rappsody Studios creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!
28th
July 2010
Read More
I quite often get asked by friends if I had to take a course to be a web designer and how I got into the industry. My background is quite similar to that of many web designers in that I never had any kind of formal education in design or indeed an art or technology related degree.
When I finished college I had no idea what I wanted to do career wise but knew that I wanted to go to University – so I took the best course that my A-Level grades would allow. I ended up studying Law at the University of Liverpool, although I never really enjoyed it, this is where I first discovered my love of the web and design. A friend of mine was studying Animation and showed me a few pieces of his work in Flash. Now being the geek that I am, I knew I just had to have a go for myself. After scouring the web for Flash tutorials, I discovered Photoshop tutorials. Flash quickly got put to one side and I became pretty much addicted to experimenting in everything from Photo manipulation techniques to creating web layouts. This then turned into reading up on User Interaction, Usability & Accessibility and learning to hand code HTML and CSS – when I should have been reading up on Criminal Evidence and admissibility. I finished my degree, but I knew that a career in Law wasn’t for me and that I wanted to be a web designer. I managed (after various jobs) to land a role in a small IT Team as a designer. After that everything thing else just seemed to fall into place.
I’m entirely self-taught when it comes to web design (like many others) and it just goes to show that you don’t necessarily have to have a formal education in design to get into the industry. With enough hard work and determination you can make it as a designer, even with no formal training.
Make sure you Enjoy It
As much as I love design, there are times when it can really get you down, whether it’s an overly picky client or you’re feeling particularly uninspired. My point is, make sure that your love of design is strong enough to see you get through these times. Like any career, if you don’t love what you do then you will never be the best that you can be.
Learn Photoshop
Photoshop is the tool you will use the most during your web design career, so it makes sense to fully understand it. Photoshop is so versatile that it can be picked up relatively quickly but takes a really long time to fully master. The best way to learn Photoshop is to follow as many tutorials as possible, but don’t just limit yourself to web layout tutorials – I’ve learned techniques from Photo Touch up tutorials that I’ve been able to use when designing web layouts.
The most important part of following tutorials is to understand the steps and the techniques used, for example if the tutorial is telling you to apply a certain layer style try to understand what that particular function does and why it was used. Pay attention to the steps involved, don’t just mindlessly follow the tutorial otherwise you’re not really learning anything.
Once you’re starting to get the hang of Photoshop, maybe instead of just following tutorials you can experiment and put your own twist on them. One of the best ways to get your head around Photoshop is to experiment with all the different tools to understand what they do and how they can be used together. You can find some great tutorials on www.psd.tutsplus.com/category/tutorials/ and www.good-tutorials.com
Get on Twitter
If you haven’t got a twitter account get one and get involved with the design community. I’d start off by following some of the more experienced designers and maybe even design studios. One of the great things about the design community is that everyone is willing to help each other out, if you’re having trouble or need help with something, send out a Tweet and you can guarantee that someone will get back to you with some advice.
The other great thing about following other designers on Twitter is that they regularly tweet links to articles on the latest technologies, design trends, best practices and tutorials.
Try following some of the designers on lists like these: http://vandelaydesign.com/blog/social-media/designers-on-twitter/
Swot up by Reading Web Design Articles & Books
Being a web designer is so much more than learning how to use Photoshop and making things look “nice”. There’s so much to consider when designing a website: Usability; Accessibility; Colour Theory; Grid Systems; Wireframing; User Experience and User Interaction to name but a few. Smashing Magazine is a great resource for all things web design and development. Another useful resource is Sitepoint which contains some really good articles on design principles and hand coding should you decide to learn to code.
Learn or at least be aware of HTML and CSS
With tools such as the Basekit Web Site Builder you don’t necessarily need to learn how to hand code HTML & CSS in order to create stunning websites, but another string in the bow and all that. A good understanding of HTML & CSS will not only give you a better insight into how websites are built, it will also help you in your designs as you will begin to realise what is and isn’t possible with HTML & CSS when coming up with design concepts.
Although the Basekit Web Site Builder is great for building new websites, if you want to work with clients who already have an existing website you would need to know HTML & CSS. By knowing how to hand code HTML and CSS you will open yourself up to a wider range of projects in the long run.
Stick with it
When you are first starting out, it is difficult – very difficult. There is so much to take in and learn that it is easy to feel overwhelmed, especially when you take a look at the portfolios of some of the more experienced designers. I wrote a post for BaseKit a few months ago, which is definitely worth a read if you are new to the web design industry – The Newbie Designer Confidence Killer.
Design and Build a Portfolio Site
Once you’ve learned the basics by following tutorials and reading articles, it’s time to put your new found skills to new use by building a portfolio site. Even though you may not have any commercial projects that you can showcase, you can always work on some personal projects that you can show off to potential clients. The Basekit Web Site Builder would be the perfect tool to build your first portfolio site!
This post was written by Lee Harding of Lee Harding Web Design – creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!
Picture from Flickr user Helen Olney
