Design Methodology for Digital design & Squarespace

Squarespace Design Guild | Design for Squarespace | Design Methodology for Squarespace Designers in Web and Digital

Design Methodology, it's one of those terms that unless you have been to design school in some capacity you probably have never heard. It's actually not that complicated, it's just understanding the clear method of designing not just work, but well planned, well articulated, good work.

In the previous blog post, I mentioned a point about finding professional validity when designing with a wireframe on squarespace, it's part of a great design methodology to have a plan, and that in the end is what a wireframe really is.

What is Design Methodology?

Design methodology is the practice you use to create your work, not the fly-by the seat of your pants blog post graphics, not the I need to design a mother's day card TODAY, not the I just need to get this quick project done methodology. That is fueled by creative fire and passion, Design Methodology is what needs to be implemented when you have a client, or a large project with expectations, and deserves not only a good outcome, but the outcome that suits them best, that has been developed using a process AND that creativity that sparks your passion to do design in the first place.

It's one of those things as a young designer you struggle with day-in-day-out. Maybe you aren't used to rigorous deadlines when you first set out, or being able to pull a monkey out of your brain for a client presentation. It doesn't happen on cue until you train yourself do use a method.

Branding & Art Methodology

In design school much of the focus was on a final creative piece, we were designing packaging, branding, type, posters, all things that you think of when you think PRINT GRAPHIC DESIGN. Well those days while still the core of a good design education, are not always included in the process. 

No one taught us how to wireframe while working with a client remotely, or explain to them what a call to action button is that we need to design. So the conversation about digital design methodology was well, just not brought up even 7 years ago. 

Traditional design methodology follows this main path. (this is my overall structure):

1. Exploration

2. Trial

3. Development

4. Edits

5. Bringing it all Together

You've seen it before. We talk about design process on our blogs, and on our design services pages, but are you speaking to designing the brand, or the digital work itself? 

The Problem with Traditional Methodology in Digital Design

So you are now saying, well just apply the same method do digital design right? Wrong. AND Right.

Here's the main problem that I see when attacking digital solutions with a traditional methodology. We are focused on the satellite view instead of building it from the ground up. With traditional methods you start first with inspiration from found objects or maybe one inspiration piece. You then sketch to create a concept, refine, refine, refine and then guess what? You refine some more. This works for sculptors chipping away to create that perfect element, just a little bit here and a little bit there. 

When you do that in web design, you can end up without the correctly functioning pieces. I had this happen to me recently, it wasn't a big deal, but some things had to change on a page that I was not expecting. We went into the design with the concept of two sections, and those two sections were going to be completely different, but as we refined, we realized that the best way to solve both problems was through the same feature, but we could only use it once on the page. STUCK, if we had thought out the problem and the core elements before-hand while also knowing the end product we wouldn't have been left with this. Granted, problems happen, but we did not structurally wire-frame out the page in a functional matter before hand. 

Attack the Problem from Both Ends

So what's my solution? You have to attack the problem from both ends. It takes some ability to focus and then refocus, like drawing with a microscope and then using a big broad bush rotating. Not easy. In order to create functioning technology and digital design, you need to make sure that form and function are operating together as one.

My Suggested Design Methodology

Phase 1: Branding Elements (SIDE A). Let's pretend that you are NOT designing your customer's brand. That they are coming to you with a design problem which is web-only and  you need to solve it. First thing to do is to know the brand style of the final site. Are we talking pastels? Neon and black? Whitespace? Texture? What are the primary colors and what are the secondary colors? Is there more than one logo to work with or is it just one layout you can use. In the past I have actually created a full style-guide for my clients that have come to me with branding, we refresh the brand, and we get it in working condition for their new projects. Now put the branding aside.

PHASE 2: FOCUS ON FUNCTION (SIDE B). What are the main features and function items that the site needs to have. Is it a slideshow of previous work? Is it informational? Blog based? From here you can figure out what a) platform and b) core structure you need. Working in the lens of squarepace, you might be deciding between different pricing plans, how the actual audience is going to interact, is it commerce based, and then if so, can you use ss commerce for your product? 

Once that is answered you can narrow down your template choices. Ok, so you want a great commerce store, but you only have medium res photos, that are older, but great new branding. Let's go for a site that shows those photos better that has some whitespace. 

PHASE 3: BUILD YOUR FOUNDATION (SIDE B): From here now you can pull out that branding style guide again, look at what you need to accomplish. Now put it back away. Set your core elements for the page design, for the site layout. Do not code, do not design, do not change a font or a color. Add buttons, sidebars all of it. Try do accomplish it from the outside in using this order:

1. Work first on your main settings.

2.Get the header, and then footer completely done.

3. Then move on to your 1st priority page, get the elements you want on the page in there. 

4. Move on to main navigation pages, connect everything together with links, etc.

 

GO BACK TO BRANDING (side A): Before adding any content at all besides your fake content for layout purposes, apply the style-guide branding to the site. Work on elements in the style guide ONLY.

So we are talking about:

1. Logos, sub logos.

2. Fonts

3. Colors

MAKE IT FUNCTION WITH EASE AND BEAUTY (SIDE B): Now it's time to code the settings and make the function of each element work the way you want. How many seconds between slides? Any space between that instagram grid? Do you need to code in some overlays and change some css for function? 


At this point your site is a fully functioning site with colors, branding, but with ZERO of your client's content. This is a mixture of form and function building both at the same time.


BACK TO DESIGN (SIDE A): Now you can add your content, add the text, photos, images etc. Don't forget to refine the same way you would a publication design. Edit, refine, step back, edit refine, complete. 

CHECK THE FUNCTION (SIDE B): It's funny how the final step is back to function. In the end you have built the foundation from a beauty and structure side all at once, so what is left is to test every single item. Check every browser, check ipads, iphones, android phones, try from other internet speeds, every link, page etc.


In the end the client is looking for form and function. You are the art director-artist, planner, layout editor, designer, printer, tester, and mailman delivering the final product to the audience, so it takes a bit of design methodology that works for designing these elements simultaneously.