When trying to draw inspiration for a new website design, many of us have used other websites as a starting point from which the general idea for the website in question will be built around.  There are also instances in which we need to know more about a general website than just the simple aesthetics, as many platforms utilise specific functions and features that cannot be used in other software or CMS platforms.  The following is a series of suggestions and procedures that you can use to help you inspect and mimic any website’s design quickly and easily.

Identify the Platform

One of the first parts of a website that needs to be identified is the platform or software that the website is running from, which gives you a general idea of the direction that you need to go in order to implement similar functions.  For example, if a web design that you are fond of is using Flash, you may want to proceed down a similar avenue in order to imitate the design.  There are also CMS platforms such as WordPress and Joomla that use specific themes in addition to the base software; identifying the particular theme and platform will give you the entire framework from which a similar site can be constructed.

Customise Your Graphics

Every site has graphics added in to make its appearance more eye-grabbing and this aspect can be more difficult to replicate for some than the creation of the platform.  While you do not want to completely copy or imitate another site, you may also want to use a similar image scheme to give the site an appropriate vibe.  Decide whether or not the images used in the site are going to have function (such as buttons and links) or be more aesthetically-inclined (backgrounds and photos).  After you have created your graphics and established the foundation of the site, the majority of the work is complete and you can move on to fitting it all together.

Fitting It All Together

Now that all of the pieces are in place, it’s time to understand how they all fit together.  One of the best ways to do this is to examine the source code of the original website.  Especially helpful if the site was built from the ground-up using direct coding as opposed to CMS “pop and drop”, viewing source code gives you the ultimate layout of how the site is designed.  One of Pingler’s many helpful tools is the Source Code Viewer, which gives you the ability to instantly view the entire source code of a page.  This tool can also be used to initially identify the platform and theme that any given site is using.

With a better understanding of the steps that go into re-creating a website, you are now better prepared to implement that new web design that you have been wanting.  Again, we do not encourage you to directly copy another website in full, but for those who would like to use a base idea to begin building your very own website or to change a website’s design, we hope that this tutorial has been helpful.