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
19th
July 2010
Read More
Infographics are very informative and beautiful. After reading lots of them, you can learn important information about everything. They are simple, colorful (not always) and funny. And I’m sure if you know how to gather data and do research and use a program such as Photoshop or Illustrator you can make a decent infographic if you try your best.
Visualizing data this way takes us back to primal instinct, because before man could read or write, he knew how to draw. And if you think about it the written language itself was adopted from drawings and symbols which became legible letters and numbers. I would have to say that the best example of infographics would be Egyptian Hieroglyphics, in where the symbols helped form a basis for the development of vowels and consonants.
Graphic representation is more accessible and understandable by the viewer; whether they are a designer or not. The human brain processes information in more of a visual sense first before it is read. Like with babies and small children, they must be taught to read and write, be they can begin drawing (even if they are squiggles) once you can put a crayon in their hand they have no issue drawing. Like the saying goes a picture is worth a thousand words, and that is one of the reasons that there is an infographic aboard the Pioneer 10 spacecraft that was launched in 1972. It contains the ‘Pioneer Plaque’; a pictorial representation of humankind, our planet, and our solar system.
I would assume that one of the pioneering technologies in the field outside of your obvious print and newspaper mediums would have to be Microsoft’s Powerpoint. If you break it down to it’s core elements doesn’t a infographic remind you of someone’s overly creative Powerpoint slide? But then again, being a designer, that is the wonderful thing about being able to visually represent you data. You can be as creative as you want as long as the information plays the key role in your design. Although lists and tabular information alone are nice and provide you with all you may need to know, adding that punch of color or design allows the viewer to interact visual and captures their attentions a bit more.
First, as we would any design, you’d like to sketch out your idea, maybe include some of your rough data. Don’t let yourself feel constrained in any form or sense. If you need to, you can display some of your data in a callout or two. Now you will want to use a creative program of you choice, mine of course for this sort of application would be Illustrator. Make sure to scan you drawing and bring it into the software to start building the graphics. If you are trying to create a 3D effect, remember to really make them ‘pop’ use three main tones for the objects:
- A base color
- A light area
- And a darker shadow
Taking things further and adding drop shadows will help give them a bit more depth. Make sure to convert repeating elements into symbols to help reduce your file sizes and headaches. After you think you have accomplished a visualization of your goal we can start plugging in your data. Less we forget in our design, the information architecture and hierarchy of importance are going to play a huge role in the success of our final product.
Critics of the infographic including traditionalists and newspaper loyalists. They have seem to come to the conclusion that the use of infographics can be seen as “chart junk” which demean the information that is being displayed. Which is funny because we wouldn’t have seen a rising tend in infographic design if it weren’t for mediums like print and the newspaper. In the 1970’s, British newspapers started to develop a series of charts and graphical representations to convey information in an understandable format to readers. This was rapidly picked up by USA Today when it launched in 1982, and spread to other mainstream media publications such as Time magazine. The infographic has even made several critics within the art community, the concept of the infographic providing both information and art, is not widely accepted. But as we can see your average viewer enjoys the visualization, and sometimes humorous, collection of the data presented.
Television is now starting to adopt the use of the infographic, and this may be the future for this application of information. We may start seeing new innovations in the televisual infographic. As a species we love our information, and we like it fast, hence one of the reasons the internet has been created. Maybe this is just a small evolutionary step on how we now process our information.
This post was written by Joshua Rapp of Rappsody Studios – designing with beauty and function. Want to write a guest post for BaseKit? Get in touch!
13th
July 2010
Read More
The BaseKit design team have been hard at work creating new themes for you to use to create beautiful looking websites. While BaseKit allows you to upload your own carefully constructed Photoshop design, we also have the option to create a site from one of our off-the-shelf themes. They are a great way to get a site up and out there in no time at all.
We’ve just added six – (yes six!) new themes to play with and create sites. We’re quite proud of them, so we’ll tell you a little more about each one…
Cafe Culture
The cafe culture theme brings a touch of European class to our theme library. A simple, bold design with a striking body image, a clear place to write your copy, and a sidebar already set up to take a Twitter feed this theme is a great place to start learning the basics of BaseKit.
Holiday Brochure
A fresh, bright theme capturing the spirit of summer – Holiday Brochure shows what BaseKit can do with images. Already set up to contain three columns of content this theme also give you the option to create your own areas for widgets at the foot of the page – well worth experimenting with – try dropping your own widgets in!
Grid Portfolio
Want to get your portfolio of work online but don’t want to spend hours making it look fancy? Think the work speaks for itself? Then Grid Portfolio is for you. A clean two column design with plenty of space to show off your work, whether it be design, photography, art or anything else. And while it may be simple, the subtle grid in the background means it is simple and not boring.
Peaches And Cream
Subtlety is the name of the game on the Peaches And Cream theme – a subtle pastel pallet and a large – but not too large main image show that this theme is understated but still has an impact. Four content zones are already set up ready to drop whatever you want into them. But remember – be subtle!
Relaxology
Relaxology is a site set up for text – look at all that space to drop your content into. And with BaseKit’s flex function you can keep writing til you’ve got noting left! A great and professional green and grey palate mean this theme is about business, however the navigation elements - white on black – mean it still has a very cool edge.
Style Fever
There is a lot going on within the style Fever theme – but it’s not cluttered. Navigation, a text box perfect for some explanitory words and a search bar all happily sit on the left column. The centre column has space for a main body of text and then splits into to – along for room with pictures. The right column currently contains another picture but this could easily contain an RSS or Twitter feed or map. Loads of editable areas mean this site is perfect to customise however you want it.
That’s it for now – but keep your eyes peeled – we’re constantly working on more themes!
24th
June 2010
Read More
I’m sure every designer has their own design process but I thought I would share mine and invite you to share yours. My process varies slightly depending on the project but follows the roughly same path.
1. Information Gathering
First of all I gather the majority if not all of my content. If I’m working on a personal project then this step is a lot easier as I will write my own text and I’m not dependant on anybody else. However if I’m are working on a client project it can be quite difficult to get all of the content needed before I even begin thinking about the architecture and layout of the site. If getting the majority of the content from the client at the stage is proving difficult, and let’s face it sometimes it can be very tricky, then I try to get enough information so that I can at least determine how many pages I’ll need and plan navigation.
I’ll also ask clients who their competition is, what they like and dislike about their competitors websites, what they want their own website to achieve and who their target audience is. I find this helps me to get a basic understanding of what the client is looking for in terms of both aesthetics and features.
2. Research
Once I (hopefully) have all the content and information I need to get started I begin researching. The type of project I’m doing will determine the nature of my research. If I’m working on a client website I’ll look at the websites of their competitors or at websites who share the same type of audience. I’ll take into account things that they do well and things that they don’t do so well.
I find this research stage useful for a number of reasons. For example if I was designing a website for a company who sold second hand cars and found that the vast majority of car sales websites all shared a similar navigation system or layout I would try to not stray too far from this system in my design so as so not to confuse users and allow them to navigate the site in a way they are used to.
3. Planning
At this point I’ll already have a few rough ideas as to how I’m going to organise the content into pages and sub-pages and how I’ll want users to navigate my site. I do the majority of my planning on paper; I find it easier to get all my ideas out on paper quickly without worrying about it being neat. Depending on the size of the site, I’ll scribble out sitemaps or flow diagrams; basically anything that gives me a clear understanding of how content will be organised and how users will find that content.
4. Wireframing
Once my content is organised into pages I start wireframing. Again, I usually wireframe on paper before I touch my laptop. I prefer using squared paper as I nearly almost always design to a grid based layout. I sketch out multiple layout ideas for different pages; header, footer, navigation, text, content etc. None of my sketches are particularly neat, there is probably only me that can understand them at this stage!
Once I have a layout and structure that I am happy with, I begin putting the wireframes together in Photoshop. Since I work to a grid based system I usually open up my 960px grid template PSD and translate my sketches into accurate, measured blocks in Photoshop. This way I know roughly how my layout will look on screen, how much space I have to work with for different features, if the page is too congested or too bare, roughly what size images I can use and a host of other things depending on the layout and content. This way I know if my layout will work before I begin the task of designing the visual elements.
5.Colour Scheme
I usually have a few colour schemes in mind from previous steps. If the client I’m working for already has a coloured logo or is a brand with established colours then the colour scheme has pretty much already been decided for me and I’ll just have to decide the best use for these colours, whether that be for headings, links, background colours, buttons, icons etc. If I have a free reign when it comes to deciding colours then I’ll usually play around on Kuler or design a quick moodboard. Moodboards are a relatively new concept to me but I have found them to be useful on more than one occasion. There is a great article on Boagworld that introduced me to the idea of moodboards.
6. The Design
Now I start designing the visual layout based on my wireframes. Sometimes I work on paper first, other times I’ll jump straight into Photoshop. At times I’ll need to design my own icons and graphics, sometimes the client provides them and sometimes I’ll use some of the great work that other designers have made available for use – of course abiding to terms of use!
When it comes to designing web layouts in Photoshop I’m obsessed with labelling my layers and grouping elements together, I find it saves me a hell of a lot of time later on when I’m looking for a particular layer!
7. Building the Site
Obviously if I’m working on a client project then I get approval on the designs before I start building the site. However if it’s a personal project then I can jump straight in once I’m happy.
At this point I start breaking up my PSD layouts ready for the web and then start the process of coding the site by hand.
However if coding seems like too much hassle, you can always use the BaseKit Website Builder which will build your website for you directly from your Photoshop design.
So that’s a quick overview of my process when designing a website. Is your process similar or do you take a different approach?
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!
