Picking the Right CMS.
Content management systems are extremely helpful for web design. Since I first designed a website a lot has changed with the ways in which designs are produced, and how those aspects are served in development. I could remember hand-coding most of my early stuff and the concept of responsive or SVG icons was still pretty far off. Since then a lot of companies have leveraged technology in unique ways to adapt for a wide variety of use cases, from desktop computers to smartphones. The concept of a content management system (CMS) is pretty simple. It allows you to publish, edit and modify content, organize, delete as well as maintenance from a central interface. It automates the eco-system to a website. When considering a CMS it is helpful to know what tool you are dealing with. Wordpress is by far the most popular CMS out there, although there are a lot of other companies that compete for a similar ease of use. I recently used ProcessWire for my current site and have found more flexibility in the way the site is structured versus Wordpress. CMS is all about adapting a set of tools to accommodate the project you have at hand.
Wordpress does a great job at larger integrations and blog content, but it comes preloaded with modules that not all sites necessarily take advantage of. Other management systems give the information architect more freedom to customize modules and sections to their preference or need, but require additional optimization to make them competitive with something like Wordpress. I find my work in building custom websites as one where you are constantly weighing the return on investment, while balancing the output and quality of the design.
Grid Systems.
Grid systems are vital to any website. Think of it as a movable foundation for your digital property. At desktop size your website fits within certain parameters and breakpoints, and when it shifts to tablet that base becomes smaller and elements adapt. A grid system is vital to having an organized and streamlined process from design through development. Bootstrap and Foundation are both common frameworks that do excellent jobs at handling front-end grid systems. Add-ons such as Susy make customizing breakpoints and gutter spacing much easier. This is especially helpful when diving into mobile details since smartphones can vary in form factor. My first step before beginning any web design work is to define breakpoints, or the maximum allowable width sizes to a grid. I consider large format monitors, laptops, tablets, and smartphones. Column and gutter spacing I usually take as a case-by-case basis to decided what is best based on content. I've found 30px gutters seems to fit well for most projects, but tend to go smaller for mobile devices.
Designing a Custom Site.
Now that foundational elements are established with what CMS and grid system you are using the design process can begin. Sky is the limit with front-end integration, meaning you can do a lot with visual customization. It is helpful to look at and understand how and why companies use certain elements in their site in order to adapt them for your own. I find competitive analysis is vastly informative in the design process, however the missing link for most people is the amount of time and resources a company has put into developing those resources. This is where a balance of things that fit within your scope and budget can align to innovative and interesting ways of presenting your website. I primarily use Sketch for custom site designs, however I also appreciate the creative aspects Photoshop integrates into their software. In Sketch I define artboard sizes and grid systems. In Photoshop I will create a new document to the largest breakpoint and define a grid using GuideGuide. Most of my work recently has been interpreting wireframes, so a lot of the ideation part is loosely defined. In situations where I am ideating more I will usually start with a sketch or comparative analysis based on the industry. It helps greatly to have content documented in a text editor such as Microsoft Word. It ensures the text editing of your site is preserved, while giving structure and direction to that content. I find tools like Google docs useful as well for collaborating with offshore teams and other project members.
When beginning a custom design I start from a blank canvas. After defining the grid and breakpoints I then build out the visuals. I use vector shapes in all of my work and will start by defining spacing for navigational and other elements on the page. It helps to understand the primary pieces of functionality so you can refine your decisions in those areas. Once larger elements are specified on the page I define more detail. I am always conscious of icon sizing and typographic layout to ensure consistent creative direction, and how to reference those decisions once the design is complete. I find doing it this way helps to move designs along quickly, there are cases where I am constrained within existing guidelines and create a loose guide to base the work from. I consider typography and how best to balance it on the page with headlines, sub-headlines, and body text. Defining H1, H2, H3 and other header tags within the word doc helps to visualize it within the design. Once the design is completed I will usually define a UI kit that relates the custom elements in the work to an over-arching theme.