I have read several articles which talk about designing websites straight in the browser and skipping Photoshop altogether. My immediate thought was to dismiss this, until I read some of the benefits which make a lot of sense.

Typography

A huge downside of designing in Photoshop is the way it renders text, and how different it is when you attempt to recreate this text in a browser. The font size is almost always different and this can hinder your whole design.

When a design has been agreed the client wants to see a final product which is identical, if the text looks completely different, it is hard for your client to be happy.

However there are a few ways around this. Tools such as Typetester let you see exactly how it will look in each browser, so you can choose a font to suit your design.

Client Satisfaction

A major benefit of designing right in the browser is that the client will never hold any false expectations about what they will be receiving from their site. They will be able to see from the outset how it looks in different browsers and how it will feel to use their site. If they are happy with the design early on, it makes the job a whole lot easier as once the design is agreed the site will be mostly coded already, meaning there will only be small tweaks and changes to make.

Web Tools

Say for example you had designed a site for a client, they liked the layout but wanted to try a few different things. They ask for rounded corners – if you are in Photoshop you now have to go through each element and make painstaking changes which are time consuming. Whereas in the browser you can simply add the ‘border-radius’ property and the job is a gooden!

With all the new CSS3 elements it also means the same applies for other things such as drop and text shadows – and because you are designing directly in the browser the client will always be able to see how it looks in older browsers and will never be under any false pretences that it will look exactly the same in all of them.

Less Experimental

The major downside for me when it comes to designing in the browser would be feeling limited with regards to experimentation or breaking out of the box with an exciting layout. There are no real boundaries with Photoshop and that is what I love about it. Designing straight into a browser makes it much more difficult to express your creativity and as primarily a designer I feel this would hold me back.

Conclusion

In conclusion, I personally don’t think I will be making the switch from Photoshop just yet. I feel like I can express myself much more with a completely blank canvas and no boundaries. I can however see the advantages of designing straight into the browser, and for some projects I understand it could be very useful.

I wouldn’t want to get into a trap of using boring layouts with no exciting design elements. I like a challenge, and one of the best ways to improve myself as a designer is to create interesting layouts and then methodically work my way through the development stage enhancing my skills.

Meagan Fisher has written a brilliant article on the subject, you can check it out here.

To start using LESS you will need to use the less.js file which can be found on their website, and the .css file you would usually use will now be .less.

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Variables

First lets get started with the simple variables. This is basically the same as defining your variables in php. Instead defining the same colour over and over again for various element on your page.

<!--LESS-->
@grey: #353535;
p{color:@grey;}
a:hover{color:#fff; background-color:@grey;}

p{color:#353535;}
a:hover{color:#fff; background-color:#353535;}

The beauty of this is that if you decide that you want to change the colour for everything with #353535 you will only need to change it once.

Mixins

Mixins are a great way of defining all the properties of one class with another. This is especially useful when you are using CSS3 element with the browser prefix. Imagine writing out the css border radius or transition with the browser prefix multiple times!

<!--LESS-->
.transition (@transition: all 0.6s ease-in-out)
-moz-transition: @transition;
-webkit-transition:@transition;
-o-transition:@transition;
transition:@transition;
}

img {.transition;}
img:hover {.transition(all 0.2s ease-in-out);}

There are other uses with LESS including Nested Rules and Functions and Operations, but this can be a bit tricky if you haven’t fully grasped the concept. So I shall leave you with this quick overview on variables and mixins for you to have a play around with.

As it is the last thing people will see, the footer is a good place to put useful things which you may want people to remember. This could include a phone number or other contact information, links to other sites, and a site map.

Some people however like to get a bit more creative with the way they display this information. Below I have listed 10 sites with examples of interesting footers, be it through an exciting design or just what information is featured within them.

Design Bombs

http://www.designbombs.com/
Design Bombs footer is great simply from a design point of view. It features a great little illustration which really helps finish off the page nicely.

Sam Rayner

http://samrayner.com/
Sam Rayner’s site has a nice interesting footer. I really like the brush stroke effect at the top and the use of thumbnail imagery brings in some nice call to actions which will help keep the users attention.

Vimeo

http://vimeo.com/
Vimeo features one of the best footers from the design side. It really finishes off the page nicely with a large illustration which changes from time to time.

Florida Flourish

http://www.floridaflourish.com/
Florida Flourish is a brilliantly designed site which features a very large footer which is made to look as if it is underground. Its a great concept and a large amount of space is filled effectively with the latest news and other interesting articles.

Freelenz

http://www.freelenz.at/en
Freelenz has a nice simple footer which contains great content for a blog site. There are links to the recent entries and also recent comments. As well as 3 most recent photos being pulled in from flickr. It is also nicely designed which is a bonus!

Poogans Porch

http://www.poogansporch.com/
This is a really nice and simple but well designed site. It is a small site but contains all the information a potential customer could want. The footer features lots of useful information including a site map, opening hours, the address, and a phone number.

Insite

http://insite.net/home/
Insite is another example of a site incorporating important information in the footer. This includes contact details, as well as links to the company on social networks. A flickr photo stream is also present.

Soho Fixed

http://www.sohofixed.com/
Soho Fixed is a really bold site with great imagery. The footer contains a nice image of a road with navigation links above it. These links have a great jQuery effect on hover. There is also a newsletter sign up and social links.

El Passion

http://elpassion.pl/
I really love this site. It’s a great design and the footer is beautifully simple. Right at the bottom is a site map with important links and just above that is a nice and simple but well designed contact form.

GLG London

http://www.glg-london.com/
GLG London is a site which features great illustration and this theme is extended into the footer. It has a really nice newsletter sign up form as well as jQuery tabs featuring the latest Tweet and a Facebook ‘Like’ button.

This is where the Menu area came in to play; although it didn’t pull in the links automatically it was a quick solution to my problem.

Firstly I styled up my links as normal and hard coded in the header titles for each group.

Then in WordPress I went to the Menu area and added several menus for each different category. All you need to do then is select the pages from the sidebar and it’s a simple as that, you can drag each menu item around so they are in the position you need them in.

The last bit is to add the code to pull in your menu items, in replacement of the links you had previously added.

<p class="footer-header" >Category Name</p>
<?php wp_nav_menu(array('menu' => 'menuname1')); ?>

There are many similarities between almost all of the app web designs around at the moment. As you would expect they all feature high quality images of a device and the interface of their app. Things that set certain apps apart from others can include high quality vector illustrations and interesting layouts.

I am going to outline five of my favourite application web designs and why I like them.

Path

https://path.com/
The Path website is a very simple design and features a full screen video of someone using the app. I have chosen it in my top five because the app itself is probably the best designed app I have ever used. It has been specifically designed for mobile and this has really boosted the user experience.

The app had a recent update which was met with great reviews amongst its users. It’s just a shame that more people don’t use it.

Spoonjuice

http://www.spoonjuice.com/
Spoonjuice are a company who create apps for all different platforms. There website is very well designed with a great use of colour. My favourite part of the site is the main navigation. It is laid out in an accordion where each section represents a platform they create apps for. You can then scroll between these and each app is marked by its icon.

It also features a nice slideshow featuring high quality imagery and vectors. This site is really brought to life by the small details, such as the slideshow being slightly inset and the subtle box around the latest tweet making it look like a speech bubble.

Tea Round App

http://www.tearoundapp.com/
Tea Round is a classically designed app site. It features nice imagery of the app itself working on an iPhone. There are also some really nice vector drawings such as a tea pot. There is also a great background and well laid out typography.

Once again there are small details which really bring the site to life – when you hover over the tea cup used as the ‘o’ in the logo it rotates. There is also a clear link showing where to download the app which is always nice.

Old Booth

http://www.oldbooth.com/
Old Booth has a great design which is really set off by its great use of typography, it is consistent throughout the page and really fits in with the theme of the app.

Once again it features a slideshow of images showing the app working on a phone, this helps to sell the product and lets users see how it works. There are also smaller features such as a jQuery content slider which break up the site meaning there aren’t huge blocks of content.

Panelfly

http://panelfly.com/
On this occasion I have saved the best ’til last, or at least my favourite. Panelfly is a “Digital Comic Experience” and its website is wonderfully designed. The large high resolution imagery at the top and throughout the content is complemented well with a great use of white space. Content is split up very well into smaller, more manageable chunks and smooth jQuery content sliders help to break up the text.

Conclusion

Like I said, these are just my favourite app website designs at the moment and there are thousands out there with some great layouts. What are your favourites?

There are thousands of examples of subtle patterns all over the web, I have just thrown together some of my more recent favourites.

Create Digital Media

Kerem Suer

Beckin Design

Mathieu Strabach

Dangers of Fracking

Adrian Baxter

Dont Worry Design Co.

Formfett

Radoor & Co

John Alex Jacob

To be able to use featured images you will need to activate it in the functions.php, to do this you can follow this blog, and just add the first snippet of code provided.

Featured images can be used when you add a post or page and can be fed through as a thumbnail next to the excerpt of your post. On occasions you may not want to use an image, and in this instance we would want to put a placeholder image rather than having a blank space.

So first we need to include the php snippet which pulls in the image.

<img src="<?php the_field('small_image_2'); ?>" alt="<?php the_title(); ?>" />

To add a placeholder image we just need to add a if statement.

   <?php if (get_field('small_image_2')) : ?>
          <img src="<?php the_field('small_image_2'); ?>" alt="" />
          <?php else : ?>
          <img src="images/placeholder-small.jpg" width="110" height="110" alt="<?php the_title(); ?>" />
          <?php endif; ?>

This php statement is first checking to see if there is an image attached to the post and the else statement then calls in the placeholder image if there hasn’t been an image attached.

As a website designer it is important to stay up to date with the latest trends within the industry. 2011 has been a big year for web design for a number of reasons – CSS3 and HTML5 have become more prevalent and designers and developers are starting to push their limits and are using the newest technologies in order to create sites which are getting ever more impressive.

Today I am going to run down a list of a few things that I think will become prominent throughout the web design community in the next year.

Ribbons and Banners

Ribbons and other banners have taken over from the shiny ‘web 2.0’ badges and are already very popular within web design. They can be used to add some depth and texture and are great for highlighting different areas on a page and providing that extra bit of flare which can really set one website apart from the rest.

There are hundreds of tutorials and free PSD downloads available online already and I can only see this trend growing and continuing for the year to come.

Typography and Custom Fonts

With the release of CSS3 and the @font-face rule there are now hundreds more fonts available for web designers and developers to use within their websites. Websites such as Google Fonts allow users to simply grab a small bit of code that goes into the head of their site and then call on a particular font within the CSS. This makes it extremely easy to implement many different fonts throughout a website and will help to add creativity and flair to a design.

Infographics

There are already some really cool infographics around on the web, and with the rise in popularity of vector art I think its popularity will peak in 2012. Infographics are a great way of getting information across to a user, without them being bombarded with text. Being able to play around with facts and figures and combining them with typography can create some wonderful pieces of work.

Parallax Scrolling Websites

Parallax scrolling sites have risen in popularity hugely during 2011 and there are some excellent examples of experimental and interesting approaches to this style of website.

Having such a large canvas to work on is hugely beneficial for the designer and I expect to see people pushing the boundaries of this technique throughout 2012 to create some really inspirational web designs.

Fixed Navigation

Fixed navigation is handy on a site that has long pages of content. The navigation will sit in the same position on the page and remains there no matter how far down the page you scroll. This makes the website much easier to navigate and can be really effective on blogs.

Responsive Websites

Responsive websites are a type of site that adjusts to fit screens of many different sizes, from large monitors, to small mobile screens. The layout is cleverly designed to alter when the browser size is changed. This tends to include things like the navigation being simplified and slotting into place, and the overall width of the site decreasing to make a longer website which is easier to view on a mobile.

On top of these I also expect to see plenty more CSS3 transitions and cool JQuery effects too boost the interactivity of a site.

Large Background Images

This has to be one of my fave trends this year along with some of the others on this list. Using a nice background image can make a design really stand out, and is a good way of avoiding using the standard top banner area with a slider, and replacing it with some nice custom calls to actions/areas of interest. This style is only suited to some industries though, and you have to make sure you get the focal image right. But be careful, the design of your content areas have to be good, otherwise the focus will be on the image rather than the content of the website.

If you are looking to try this out I would suggest using BuildInternet’s Supersized or the Fullscreenr from nanoTux.

cpeople

Typography

With it becoming easier and less “buggy” to integrate “non web safe fonts” on websites, we’ve seen a massive increase in the number of sites using interesting typography. The one I’ve most enjoyed seeing is the clean retro style typography, which has less of the distressed grungy look and uses cleaner lines, heavy drop shadows and diagonal lines…. a trend I will be experimenting with in 2012!

Here’s a good example of how to achieve the clean retro type using CSS3.

bigbitecreative.com

Circles…(and other shapes)

I am guilty of using this, maybe a bit more than I should. But I like the fact the web designers are becoming more experimental with the shapes/grids they use. Using shapes other than the standards squares and rectangles adds a bit more interest into a design as you can give the illusion that your breaking out the “grid” without actually doing it.

teamtreehouse

Ribbons

I must admit I was on the ribbon bandwagon for a while but now I am slightly bored with it, and I’m hoping it’s not a trend that will carry through to next year. I think they work well when used subtly, but if your going to get over excited with it I think you should put the mouse down and step away… here are a few I think work quite well.

goateejoe

Texture

Yes I know this was trending this year, but it’s back again, and with good reason. Textures can work well for many sites and aren’t restricted for particular industry’s. They can very from full on and obvious textures, to subtler less invasive ones. Textures don’t always have to be used on backgrounds, and can be limited to buttons or call outs on a page. Definitely a good way to add depth to your design.

ecoki

Grid Breakouts

This is a trend I think we will be seeing more of in 2012. I love that the normal grids we are all used to working from is slowly being thrown out of the window, in favour of more unique layouts. The borderless grids with limited spacing are a refreshing change from the 2 or 3 column layouts we’re used to seeing. I’m still getting used to the diagonal style grids, not quite sure how long they’ll be around for though.

carlos5to

See you in 2012…

A new year, a new trend. Lets see what 2012 has in store for us!

I know when it comes to designing something for yourself, we as web designers become the biggest procrastinators! But look at is as an opportunity to design something to your taste and reflects you as an individual and as a designer. Sometimes it’s good to take a step back and design the site as you would for any client. Have your own “design brief” work from that and try not to deviate!

Here are some tips to remember when designing and developing your portfolio….

What do you want your portfolio to do?

Keep your objectives clear from the beginning. The main purpose of most portfolios is to showcase your work to potential employers, to sell your designs or development services or simply gain your own following in the design community. Which ever one of these reasons is for you, make sure you get the message across from the start.

Keep it simple and don’t over-do it

You need to find the right balance when designing your portfolio, you want it to look impressive without overpowering the actual work you’re trying to showcase. Try to keep the design simple and not overly cluttered, this way people can appreciate the look of your website as well as your other work. But remember don’t sacrifice your personal style in order to keep the site clean, potential employees like to see the individuality of your design.

Behind the scenes

Having an awesome design and great showcase of work is all well and good, but if your looking to get into web design you need to showcase your coding skills as well. What better place to explore and experiment with new technologies than your portfolio. Its not always possible to do this on your clients sites so trying out new coding skills on your own site can be beneficial. I know I tend to look at the coding on portfolios just to see if the coding level matches up to the design skills, and potential employees will be doing the same!

Conclusion….

Stop procrastinating and do it! The more you over think it the more likely you are not to get it done. And remember your site is just important as any of clients, if not more important. Keep it simple and showcase your best design and coding skills…the job offers will soon pour in!