New sites + site redos have a few things in common, including following the same steps from start to finish. Check out what you need to know when planning your new website before we dive into designing your new website. Because no plan is no good. Curious what all of the main phases are: Planning, Design, Development, Testing + Launch.
Phase Two — Designing your new website
Design is a critical step to any project, but not all design phases look the same. Some projects are laid out page by page, device by device until everything feels pixel perfect. Other projects can breeze through with a brand guidebook + some key interactive elements mapped out (like buttons + hovers, menus, and form fields.) The goal is to avoid trying to fix design issues in the final stages. No one likes wasting time.
Design issues are thinks like readability, hierarchy, and user experience. Making sure the content you planned is readable and clear. Along with giving your headings + typography stylings some hierarchy to guide users around the page versus having all headings the same size and color. And last, but not least, making sure the experience on your site is a positive one. Otherwise folks will not come back.
While my degree is in design, I love partnering with talented designers to handle phases 3-5 after they work their magic.
Clients benefit from a professional designing their new website + having a developer who “speaks” the same language. I can take what’s designed — no matter how much or how little — and run with that in development.
Breaking design into pieces
Breaking your site design process into manageable pieces is great for your sanity. Pretty much every site page needs a header and a footer. Some will use a sidebar or a full-width callout section for an opt-in. Starting with the elements that repeat throughout the pages can be a great foundation.
Once you nail the direction of those pieces down (designing for smartphones, tablets and desktops), next might be the various page templates. For example, my site has a portfolio, blog + static content pages. Designing for those areas requires different elements and features.
If you’re not familiar with the design phase, you might be surprised to know that there’s a lot of trial + error here. Getting the ugly ideas out of your brain + onto paper or digitally drawn can be super helpful for finding your way to the design that works. Many designers start with broad strokes and work their way up the detail chain before finalizing the solution that works.
The results of designing your new website
The end result is a Photoshop (or similar) file that will be shared with a developer. And while every developer is different, here’s what I recommend you have before moving on:
- All page content from Phase One. This means text, images, links, video, etc. Gather it all up in Google Drive or Dropbox so that it is easy to share.
- Original design files. That way your developer can save any element they need to if it’s not properly saved for web. It can also help them to grab colors + font sizes, unless….
- Color + font details. A few of my favorite design partners will provide me with a PDF of the hex values for the colors in the project, the font families in use + the sizes they want the headings to be at. I may refine these details if the layout changes online, but it’s a great tool to have.