13th
August 2010
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
Read More
11th
August 2010
Today we are talking to the winners of the BaseKit-iStock competition that was held earlier in March in collaboration with our friends from iStockphoto.com. Participants to the competition had to create a website using BaseKit and iStock images
Lets find out now how they are getting on with BaseKit and their goodies!
First let’s talk to Steven Butler who came in first place for his website Eddy’s excellent adventure.
How did you find out about the competition?
I initially found out about the competition through my iStockphoto email newsletter.
What drove you to join the competition?
Of course the potential to win some awesome prizes definitely influenced me to explore the Basekit site, but I was initially very impressed with how easy it seemed to build and manage a site directly from your browser.
How did you come up with your design?
It took me a few days to finally decide on the right concept for the site I wanted to create. After browsing the iStock images for a while I began sketching down potential concepts to build a site around. I was originally drawn to the image of the Chihuahua wearing the goggles. It was a nice image that I felt had good potential for the homepage. Being a dog lover, I felt good about creating something fun surrounding the idea of a dog who travels the world. My coworker has a Chihuahua named Eddy so that’s where the name comes from. Once I had my idea the rest just fell into place.
Inspirational resources?
My main inspiration was from my Beagle, Grace. Beagles are very curious dogs and she is always snooping around exploring everything so the articles are written from her perspective. As far as the design is concerned, I wanted to create something nice and clean. A blog site that was organized and showcased some of Basekit’s features.
What did you think was the hardest part of creating your BK site?
The creation of the site was not hard at all. From a production standpoint, BaseKit made creating the site easy, therefore, I didn’t have to get caught up troubleshooting code so I was able to concentrate on my design and content.
How long did it take you to create your site?
It took me about 5 days from concept to completion.
What did you like the most about creating your site with BaseKit?
As a designer, the most difficult part is the production and coding of the site. This tends to cloud the design process because there are so many variables with html, css, forms, databases, etc. Unless you are an expert developer and designer you have to find a happy medium between the two. With Basekit, the coding is taken care of so I get to focus on my design and not get caught up with how to make it work.
What’s the best tip you could give to the BaseKit users?
I would say to just be creative! If you have not built a site yet, build one. Don’t wait until you have a client that needs a site. Build a pesonal portfolio site, blog, etc. They have a variety of great tutorials on their You Tube page that will give you enough knowledge to hit the ground running.
How does the code-free template design process compare with workflows you’ve have used in the past?
This was my first experience using a code-free process. It is a huge time saver. The other great thing about this is that once the site is live, it is very easy to make updates, add content and pages.
How much time could you save by being able to replace the design of the site without having to change the content (i.e. template replacement)?
That would depend on the site but I would say it could potentially save days, even weeks, worth of work.
Do you think you’ll use BaseKit (more) in the future?
Yes, I am already working on a couple of new websites that I hope to have live within the next 2-4 weeks. Why (not)?
Now, let’s get an other perspective from the first runner up, Neal van den Eertwegh who designed the cool website a Taste of Tokyo, which acts as a tourist guide for people visiting Japan.
Let’s find out how Neal got on with using BaseKit and what was his inspiration for creating his website.
How did you find out about the competition?
I already made two BaseKit sites and thus found out about the competition via the BaseKit newsletter.
What drove you to join the competition?
For one, the ipad of course. But also because I like the way BaseKit works, it’s so simple to use, and setting up a site is a matter of minutes, who wouldn’t join?
How did you come up with your design? Inspirational resources?
Both my designs came from the photos istock photo had supplied. But I’m also kind of a Japan nutt, so choosing that Tokyo photo was an obvious choice.
What did you think was the hardest part of creating your BK site?
Coming up with the idea, once that was figured it was easy riding.
How long did it take you to create your site?
I’m not sure, but I think I worked on it for about two weeks, but that’s mostly on details and such. Actually uploading the site took me one afternoon.
What did you like the most about creating your site with BaseKit?
Not having to go through the hassle of slicing my designs and make it look the same in my Internet browser.
What’s the best tip you could give to the BaseKit users?
Take a look at the BaseKit videos; they are an excellent guide on understanding how BaseKit works.
How does the code-free template design process compare with workflows you’ve have used in the past?
You aren’t down in the code anymore. You’re only concern is the design.
How much time could you save by being able to replace the design of the site without having to change the content (i.e. template replacement)?
With BaseKit, this is just a matter of making a new PSD design and uploading it. Normally you would have to slice the PSD and go into the code again.
Do you think you’ll use BaseKit (more) in the future? Why (not)?
Definitely, BaseKit for me is an excellent prototyping tool. I make my PSD design, upload it to BaseKit and show it to a client. A website says more then just an image.
What feature(s) would you like to see next in BaseKit?
Custom widgets and Wordpress support! The current widgets are superb, but for more elaborate, user supported websites we definitely need those! Oh, and an iPad app of course.
We were very impressed with Steven and Neal’ designs and are glad that they’ve enjoyed using BaseKit and found our tool easy and efficient to use. Your prizes were well deserved, hope your having fun with them!
Interview conducted by Freek Dix @ BaseKit
Read More
9th
August 2010
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
Read More
6th
August 2010
There’s a balance to be struck when writing for web, and it’s the difference between sounding like you’re writing a letter to the Queen of England or, on the other end of the scale, sounding as though you’re baby-talking a tiny Chihuahua. The arrival of the web brought with it a dilemma for those looking to fill it with content.
How a web-writer approaches their audience depends very much on how much they know their readers – but there are a number of rules that can be more generally applied to ensure that you don’t sound like you’re out of touch with the people at the other end of the cable.
As with everything in life, the key to getting good in the game of digital article-writing is practice. But even those of us who write multiple articles a day can slip up from time-to-time. Take a look at the rules below and help yourself to minimise the risk of sounding far sillier than you actually are.
Don’t approach every post like a journalist
You have an audience and you have an instrument – your computer – by which you can feed them information. With that kind of responsibility, it can be tempting to slip into a bad habit – a syndrome I refer to as The Bad Journalist Habit. Sometimes, when we start typing, the copy that pops from our fingers can somehow arrive as starchy, uptight and stilted, reading like the over-ordered, thunderously delivered words of a terrible news anchor. It happens to all of us, and there’s no explaining why it happens. It simply happens.
When it does kick in, the only way around it is to wipe the slate clean. Go and make a hot beverage, reconvene with yourself and remember that you’re writing for web. Your audience won’t be expecting total authority. In fact, they really don’t want to be patronised in any way shape or form, so when this kind of earnest and clunky text starts to appear before your very eyes, it’s time to take a step back from the word processor and envisage your audience demographic and how to write in a way that they’ll find appealing. But also don’t sound like you’re unhinged.
So often, however, things can start to swing in the opposite direction. In looking to reverse the formal Bad Journalist style you might sometimes slip into, you might find yourself writing as though you envisage your readers are all teenagers who expect swearing, pop culture references and an over-reliance on web slang. Both bad habits start when you forget that a web readership is made up of a ton of different character types – of all ages, creeds and classes. If you write specifically for one, you risk alienating another, so keep your strokes broad and ensure that nobody will feel left out.
Naming sources
A constant source of neuroses for the writer can be the worry of whether or not your second hand information has been justly referenced back to the originator. This isn’t a dissertation and you don’t really want to be sticking footnotes and addendums in your piece when you eventually reach the end, so it’s important to make the most of your hyperlinks. Like a gift from the gods, they’re there to be used to the maximum, making your life easier and making your readers web experience a far more engaging one. So long as you hyperlink back to your sources, nobody’s going to mind if you didn’t come up with the info yourself. Your readers and even the people who originally created the work you reference will be glad of the link, and you’ll have added value simply by dint of revealing your sources.
Do I use web-slang?
This is trickier than it might seem. Though slang is frowned upon in traditional journalism and column-writing, on the web the rules have changed somewhat. Because we’re all using what is essentially a new technology, we’re constantly having to adopt newly created words as a matter of course. New software and applications are being found every day, and if we want to survive in the online environment we are forced to adapt. Also, as new cultures arise from the dust and out of nowhere, they can go global off the back of a viral buzz and forge new terms and phrases to enter common use before you’ve had chance to catch up.
If you asked ‘I can haz…?’ instead if ‘May I have…?’ online ten years ago, you might have drawn concerned emails from your readership, but now any web-savvy onlooker will instantly know what you’re talking about.
The wisest thing to do is to proceed with caution. Be arch when applying well-known web terminology, but don’t stuff every sentence with FTW and ROFL. It might start to look a little desperate.
Proofread, then proofread again. Even if you’re getting subbed
When writing for any medium, this is the golden rule. Even if your piece is going to fall into the hands of a trusted Editor, you can never read your article too many times. Even on the fourth or fifth read-through, you’ll find worthwhile tweaks and adjustments that can be made – so give your copy the benefit of at least two re-readings. Double that and you’re heading in the right direction. Simply sending off copy the second you hammer down that last full stop is the first step down the mountainside of disaster.
Constantly bone up on online copy
Even if you’ve got a massive readership, your stats are rising and there’s no end to the inspiration you’re finding for your articles, there’s still every reason to keep reading around your topic online. If you constantly expose yourself to similar and better writers in your field, you can only hope to improve your already sparkling prose.
So, stick a couple of dozen blogs on your chosen specialism into your Google reader and make sure that you set aside regular time-patches to catch up with other writers. You’ll not only see where (and if) you’re going wrong, but you’ll also grab ideas from the tricks and wordplay of others. After all, there’s no better way to learn the trade than to study the masters, your competitors, and the comments of your readers – so make sure it becomes a habit and you’ll end up among the best in the business.
This post was written by Liam Tucker of the excellent Watch With Mothers. Which is another great way to waste your day. – Want to write for the BaseKit Blog? – Drop us an email.
Picture from waihey on Flikr creative commons
Read More
