2013 Website Design Trends

Leave a reply

2013 has been a year where I have really been able to get my teeth stuck into site design. I’ve checked out the latest developments from some of the biggest website names out there to some of the smaller lesser known sites that are attempting to push the boundaries. Here are just a few of the design trends I have observed.

Front-end Frameworks

Front-end frameworks are employed to control the look and feel of a website. For looks a framework comes bundled with CSS that style elements of the site like form fields and buttons, font styles, alignment and more. Newer and popular frameworks are also reactive and respond to re-sizing of the browser window or display of the site on mobile devices.

The most popular framework by far is Twitter Bootstrap or just Bootstrap for short. It comes bundled with some fantastic javascript libraries and has a great overall style and function right out of the box. Foundation is another very well-known framework, again with great style and function right out of the box.

Frameworks are in use by a range of websites, from big to small. It greatly reduces the hours spent styling and building in front-end functionality into a site

For a comprehensive list it is worth checking out CSS Front-end Frameworks.

Infinite Scrolling

Infinite scrolling automatically loads more page content as the user scrolls down. Twitter and Facebook have had this for a few years now. Since this avoids the need for the user to paginate to the next set of content the user is never interrupted as they continue to browser through content that the site has to offer.  It’s one of those features that can typically keep you browsing longer.

However, there are some pretty major pitfalls to this technique. Firstly, the footer of the page is now inaccessible unless anchored to the bottom of the browser window. I’ve seen many sites fail to anchor the footer after employing infinite scroll making it impossible to select any of the content found within.

Secondly, this may have an impact on site SEO. It is typically better practice to have less than 100 links on a page. Hiding content based on a particular user action, especially one like scrolling to the bottom of the page, are not typically spider friendly.

Anchored Navbars

This technique simply locks the navigation bar on the website to the top of the browser window. As you scroll down through content the navigation remains in the same place, allowing you to use other important links on the site. This is particularly handy for sites with infinite scroll.

Again, this is something that has been around for a several years, but it seems to be in vogue this year. I’ve also seen some implementations, some more interesting than others. Typically sites will keep the navigation the same, some will reduce the size of the navbar on scroll, some apply semi-transparency and others even change the navigation functionality, although this last point is not something I would ever advocate.

Horizontal Search Filtering

Sites are realizing that once filters are selected by the user there should be no need to have these filters get in the users way as they are browsing through content. In short, horizontal filters are less obtrusive than left hand filter selection, although the downside is  less real-estate for the filters. If you have few filters then this is for you, if you need many filters then left hand filtering might still be the best way to go.

Google Horizontal Filtering

Flat Styling

Last year the web seemed shiny. It seemed like every button would have some rounded and shiny effect to it. This was also employed in icons and other site elements to add depth. This year we are seeing the opposite. Flat and square is the new rounded and bubbly.

It certainly takes a lot of the complication out of sites. When done wrong, the rounded bubbly icons and buttons can look awful, especially if they have different depths, shadowing and glossiness levels. 

Apple have announced that they will also be adopting this style for their new Apple OS. This is a big departure from the skeuomorphism that Apple has previously adopted. Below shows Apple’s iBooks  app, far from flat this attempts to make the app look like a real bookshelf.

Apple iBooks adopting skeuomorphism

Death of the Homepage Slider

Homepage sliders were all the rage in 2012, however this year the opposite seems to be the trend. Typically users will spend only a few seconds reviewing the content on your page. Sliders present a challenge. If the slider is too slow to change then the user may scroll down, bounce or click deeper into the site before even catching the other points illustrated in the slider. Too fast and the user cannot take in the information.

Think about this, on sites with a slider how many times did you either wait to see all the content presented in the slideshow or clicked through and read all the content. People want information quickly presented to them, ideally a single message point.

Mobile Site Unification

Last year it seemed like we had a lot of companies creating versions of their sites specifically to cater to the mobile market. Often mobile sites would not even share the same functionality as the site you would view on your laptop or desktop.

This year seems to have spawned more unification of websites. The website you see on your laptop or desktop is the same you will see on your mobile device. This seems to be occurring for a number of reasons, the biggest being the unpredictability of the mobile market. Since the release of tablet computers and mobile devices that now have higher resolution screens it is difficult to know how to create a mobile version of the site that is optimized to the device. For this reason a lot of sites are adopting responsive design techniques into their existing site, allow the site to respond to the device it is being viewed on.

Content Tiling

Displaying content in new and interesting ways seems to be big on the agenda for 2013. Tiling content is especially on the rise. Flickr and Google seem to the first to adopt this trend, but other sites are also now catching on to the craze.

Having images presented with dynamic sizes adds a visual attraction that keeps the user browsing longer.

Summary

It seems that 2013 is the year for simplification. Sites are taking a no-nonsense approach to getting the message across and not overloading users with a dozen messages and calls to action. Simple and beautiful is clearly the way forwards.

If you have spotted other trends that you feel are on the rise or perhaps bigger than the ones in this post then please post your findings to the comments for other readers to see. Thanks!

African Animal 3D Models

Leave a reply

This week I will be continuing with my top inspirational 3D models list with this fantastic set of African animals. These all happen to have been created by Massimo Righi, an incredibly talented animal 3D artist.

Massimo has over 250 animal models available on the site with almost all of these modeled to the CheckMate modelling specification.

Giraffe
Hippopotamus
Lion
White Rhino
Zebra
Hyena
Cheetah
Lioness
African Elephant
Impala
Wildebeest
Cape Buffalo

Inspirational 3D Models

Leave a reply

TurboSquid is close to reaching 300,000 available 3D Models and to mark this milestone I wanted to take the time to highlight some of the amazing and inspiration 3D models that are available on the site.

This is the first in what I hope will be a series of posts showcasing the incredible content available.

British Street 3D Models

American Street 3D Models

Installing Symfony on WAMP

Leave a reply
  1. If you do not have WAMP already installed head over to the the WAMP website and download the latest installer.
    WAMP Install
  2. Once installed enable the apache rewrite_module by clicking on the WAMP icon in your task bar, navigating to the Apache > Apache Modules directory and  clicking on the rewrite_module.Enabling Apache Rewrite Module - WAMP
  3. Next you will need to enable the php_xsl.dll extension in the php.ini configuration file. To do this click on the WAMP icon in your task bar again, select the PHP folder and click on php.ini. Navigate to the
    php_xsl.dll extension and remove the semicolon from the line.    Enabling php_xsl.dll
  4. Save the file, click on the WAMP icon in the task bar and click “Restart All Services”

  • Adding PHP and MySQL as Windows Environment Variables

  • The next step is to add PHP and MySQL to your windows environment variables. You will first have to note down the full path to your PHP and MySQL folders. To do this navigate to your WAMP base directory (My was installed in G:\wamp).
  1. Navigate to wamp/www/bin/php/phpversion folder.
  2. Copy this path to a notepad document, you will need it after the next step.
  3. Do the same for your mysql directory including the mysql bin directory. For reference the complete paths to my folders were G:\wamp\bin\php\php5.4.3 and G:\wamp\bin\mysql\mysql5.5.24\bin
  4. Copy both paths to a single line with a semicolon placed before each path like so ;G:\wamp\bin\php\php5.4.3;G:\wamp\bin\mysql\mysql5.5.24\bin
  5. Go to your windows control panel, click on the system icon, click on advanced system settings found in the left pane. A new window will appear. Click on the Environment Variables button under the Advanced tab. Below User Variables your should see your System Variables. Scroll down in this section until you see the Path Variable  Path, click to Edit this variable.
  6. Finally, add the ;G:\wamp\bin\php\php5.4.3;G:\wamp\bin\mysql\mysql5.5.24\bin string to the end of the string found in the Variable value input box.
  • Adding Windows Environment Variables
  • To test that this is now working you will need to open the command prompt. Click on the start button > type cmd into the search box > right-click cmd.exe and open as administrator (you will need to run as administrator in later steps).
  • Type php into the command line. If nothing happens then you are all set and can close the window for now. However, if the message “‘php’ is not recognized as an internal or external command, operable program or batch file” then your system variable did not take. I would recommend moving the PHP and MySQL paths to the front of the Variable value list, which is what I have done in the example above. You will not need the semicolon before the PHP folder location, instead you will need to add a semicolon after the mysql path so that you are separating this from the other system paths listed. Ensure that the path has no spaces and all paths are correctly separated by a semicolon. Close the window and try opening the command prompt again and type PHP.

If everything went according to plan you should not be able to move to the next steps.

Installing Pear

In this next step you will need to install Pear.

  1. Start by saving the following file to your wamp/bin/php/phpversion directory http://pear.php.net/go-pear.phar
  2. Install PEAR go to your command prompt (open as administrator) cd into the wamp > bin > php > php version
  3. Type php go-pear.phar
  4. Type in system and hit return to install a system-wide copy
  5. At the next prompt asking for 1-12, ‘all or Enter simply hit the Enter key.
  6. If prompted with a warning to edit php.ini type Y and hit return.

Installing Pear on WAMP

Installing Symfony

You are now able to install symfony and create your first symfony project  from the command prompt by following these steps:

  1. pear channel-discover pear.symfony-project.com
  2. next type in pear install symfony/symfony. This file can take a minute or two as it will need to download the file and install symfony.
  3. Once symfony is installed we will create a new folder under your wamp/www directory called symfony_application. You can do this in  command prompt: cd into the wamp/www directory and type mkdir symfony_application
  4. cd into symfony_application and type  symfony generate:project symfony_application. If you receive the error: ‘symfony’ is not recognized as an internal or external command, operable program or batch file then please read the steps for adding PHP and MySQL as windows environment variables above.creating_symfony_application_1
  5.  Type in symfony generate:app symfony_applicationcreating_symfony_application_2
  6. Open up your favorite browser, type in localhost/symfony_facebookgroup/web. If all went well then you should see a white pagecreating_symfony_application_3
  7. Navigate to wamp/bin/php/phpversion/data/symfony/web and copy the “sf” folder.
  8. Navigate to wamp/www/syfony_application/web and paste this folder into this location.
  9. Go to your browser and refresh localhost/symfony_application/web and you should now have all of the assets needed for your symfony project folder.creating_symfony_application_4

Final Notes

If everything went to plan you should now have a symfony project folder setup under your www directory. You can repeat steps 3 through 9 above to create new projects with your own folder name. When you navigate to your localhost you should be able to see these projects listed.

If you have had any problems during the tutorial and have it a stumbling block then please let me know in the comments below and I will try to help you as best I can.