A Web Designer's Toolkit
Every Web designer has their preferred toolkit, which is heavily dependent on their level of coding knowledge, as well as their methodology and approach to Web design.
In this article we will go over some of the core components of Web design and popular tools adopted by Web designers, from creating a sitemap to actually launching a website.
Sitemaps
A sitemap is a visual representation of the pages that comprise a website as well as their respective names in hierarchy that displays the relationship between pages.
One good program for creating a sitemap is Microsoft Word, which allows you to create a hierarchal bulleted list of the website's structure in addition to its native spellchecking and grammar tools.
Alternately, some designers like to create their sitemaps in Adobe Illustrator, which only a small group of people have access to. While this may make your sitemap visually appealing, it will also make it harder for non-designers to work with.
Wireframes and Prototypes
With an agreed upon sitemap established, it's time to start wireframing the layout of your Web pages. Some designers may start with a pencil and paper while others may use tools such as Adobe Illustrator to create a vectored wireframe of your website in conjunction with InVision (https://www.invisionapp.com/), which allows you to share your wireframes created in Illustrator in Web browsers for client feedback and compatibility testing.
An increasingly popular alternative to Illustrator and InVision is Balsamiq (https://balsamiq.com/), a cloud-based tool for creating wireframes. Both tools allow designers to create unique, graphically accurate wireframes that give clients a better understanding of how a website will look upon completion.
Design
When it comes to designing Web pages, Web designers have two routes they can take. They can take the tried and true path for designing Web pages using Adobe Photoshop (https://www.adobe.com/products/photoshop.html). Photoshop allows designers to create pixel perfect designs to a customer's exact specifications. Alternately, designers may opt for a new breed of tools such as WebFlow (https://webflow.com/) or WebyDo (https://www.webydo.com) that offer a Photoshop-style interface in the cloud to empower designers to create websites without coding.
These tools dynamically create responsive HTML, CSS and JavaScript as the designer lays out their Web pages. While these tools are still in their infancy and have yet to receive widespread adoption, they are a clear indicator of where the market is trending in terms of the tools designers will use to design the next generation of websites.
Responsive HTML Coding
Once your design has been completed and approved it is time to convert these designs into responsive HTML, CSS and JavaScript. This is where popular code editors such as Sublime (https://www.sublimetext.com/), Atom (https://atom.io/) and Microsoft Visual Studio (https://www.visualstudio.com) come into play. When selecting a code editor it's important you pick a tool that has robust syntax highlighting, code completion and allows you to easily organize your code.
When coding the initial Web pages, most Web designers will often employ a front-end responsive framework such as Bootstrap or Foundation to lay out their Web pages using a responsive grid structure while others may build or use a framework of their own. Front-end frameworks like Bootstrap and Foundation are ideal because they are widely used and thoroughly documented, making it easier for your clients to update their websites by using technologies they are already acquainted with.
Website Management Software
After your core templates have been converted into responsive HTML, CSS and JavaScript, you may be done if you're building a smaller website. For organizations with larger websites that aim to benefit from economies of scale and avoid duplicate code, content management systems (CMS) come into play.
CMS solutions like an on-demand Web experience platform allow you to take your core templates and re-use them to build out your entire website. Using a CMS platform that empowers you to speed up development time has since become industry standard, but it is important to make sure your CMS allows you to create core templates that avoid the need to duplicate code.
In conclusion, pick a CMS platform that is thoroughly documented, supported and allows you as much design freedom as possible.
About the Author
Shawn Moore is the founder of Solodev and the driving force behind the Solodev Web experience platform and Solodev Launch digital marketing services. A visionary leader, Shawn has strategically grown Solodev from inception to a successful company that services clients across the nation and has been named to the Inc. 5000's fastest growing private companies for the past two years in a row. Winner of several industry awards for Best CTO and CIO, Shawn is changing the CMS landscape with Solodev, winner of the 2016 People's Choice Award for Best Cloud CMS.
