10
Web Design Tips – Creating a Template Carrying on from ‘the processes of design a website theme or template’, this article goes into detail about some of the areas mentioned in the previous article. If you want to a hire a UK web designer, please contact Neogain.

Web Design Tips - Creating a Template

Embed Size (px)

DESCRIPTION

Tips for how to create a website template. If you want to hire a UK web designer, then please Neogain. http://www.neogain.com/

Citation preview

Page 1: Web Design Tips - Creating a Template

Web Design Tips – Creating a Template

Carrying on from ‘the processes of design a website theme or template’, this article goes into detail about some of the areas mentioned in the previous article.

If you want to a hire a UK web designer, please contact Neogain.

Page 2: Web Design Tips - Creating a Template

Using MockFlow to design the layout.

MockFlow allows you to quickly put together a mock layout for your website design. It is a feature rich service, which I won’t go into too much detail here.

However the service has both free and paid options, even the free version is incredibly helpful and is worth using.

Hopefully it will save you time on your next web design project.

Page 3: Web Design Tips - Creating a Template

Getting started with MockFlow:

1. Sign-up at their website.

2. Choose from the various options, such as creating a layout from scratch.

3. Design the mock layout, which can be simply dragging and drop, then adjusting the size of the components.

4. You can then export the code to a HTML file.

Page 4: Web Design Tips - Creating a Template
Page 5: Web Design Tips - Creating a Template

Now MockFlow is far more than mentioned above, but even for the most basic of mock layouts, you can see it is only a handful of steps, which you can take quickly to produce a HTML file ready for your next stage of designing.

Using gedit or Notepad++ plus to edit code.For linux users there is the incredible gedit and for Microsoft

Windows users Notepad++ whichis even more feature rich.

Both show syntax highlighting, making coding your CSS, HTML, PHP or other code a breeze.

Page 6: Web Design Tips - Creating a Template

Using your own development server.

This is often the area novices trip-up over, which is neglecting to setup a development server.

Often instead using FTP to continuously upload code changes, images etc.

Hammering your FTP server is never wise, but also is a slower way to design and develop.

Page 7: Web Design Tips - Creating a Template

Why not check out our server articles to help you?

‘Windows development server setup’ and ‘Linux development server setup’.

Page 8: Web Design Tips - Creating a Template

Using the GIMP to edit your images.

If your wallet doesn’t extend to buying Adobe illustrator or Adobe PhotoShop there are alternative applications you can use.

Perhaps not as feature rich, but for basic web design, software packages such as the GIMP can be a huge help.

Page 9: Web Design Tips - Creating a Template

Enabling you to easily resize and edit those images such as logos, photos and similar that your client sent over.

Plus the GIMP is great at helping you optimise your images, making them load faster.

Conclusion

You will be amazed how just making a few changes to how you design, could speed up your projects, plus improve the overall quality of work.

Page 10: Web Design Tips - Creating a Template

If you want to hire a web designer, please consider Neogain.