Once you have a brand identity – a purpose, core values, goals, strategies; with the visual aspects like a color palette, typeface, and a logo – it’s time to think about the website. The site is not only necessary for a one-spot hub to show your product or service according to the brand, but to have that hub to include easy navigation and call-to-actions that benefit the audience. The combination of staying on brand and meeting the consumers needs with an ease of use way will bring back loyal audience members. 

With the brand identity that I developed (see Stitched & Sable Living’s brand here in another blog post), I pulled together a homepage for both a desktop and mobile device. In a time and age where there are several devices – all different sizes, and used for different purposes – as a designer, you have to understand that the website layout needs to be adaptable for any application. A responsive website design will adjust itself to fit each screen size for an understandable use per the devise. 

For a successful website design, you must at least have:

1. Responsive or adaptive design
2. Branding
3. Images
4. Clear navigation
5. Content promotion
6. Contact information

Among more, but these are the main callouts I have here. 

My Website Design Process:

Beginning from the brand identity, I started the layout with creative strategy in mind. 

How could I communicate to the audience a bold image and tagline that immediately grabs them in?

What kind of call-to-actions could I include on the homepage to get the audience searching for more?

Then, I developed a site structure with a content outline. The web structure would have a bold image at the top with a tagline; and a header for the name of the site with navigation to different pages. The content would include what makes the site stand out – product pages for different purposes (for you, for the kids, for the pets, for you & them); moving down to a specific spring collection for those looking for seasonal items. 

The empty boxes are placeholders for actual product.

Because Stitched & Sable Living is a product shop, the homepage is scrollable to reach different navigation points specific to what the audience is looking for. I think this is an important aspect for the website because the consumers could look for quite a few different possibilities, and find what they need easily.

It was at this point that I was able to start forming the design into a grid layout.

While the grid is split into three columns for the desktop website design, the mobile screen couldn’t hold so much of that information before getting too small to read or touch. For that reason, the mobile screen has two columns for better ease of use. However, to keep the design unified from the two different devices, both grids are modular. A modular grid, described by Robin Landa in Graphic Design Solutions, is where there are consistent horizontal divisions and vertical divisions. 

Another notable difference between the desktop and mobile version of the site is that the mobile version scrolls to five screen-lengths rather than the three screen-lengths of the desktop. Just like the reason I changed the number of columns, this was necessary for readability and touchability on the mobile screen. Besides these changes, though, the site remains intact as a universal

---

So, if you’re designing a website – remember, you are not only designing for the brand itself, but for the audience to have the best access possible to benefit from your brand! Keep these notes in mind when developing your own successful website.