: What is your ideal workflow for web development? More than occasionally if I am tasked with creating a website from scratch, it seems doable right up until I begin working on it. Then it feels

@Kevin459

The most important thing to keep in mind when designing anything is that the primary function of design is to communicate a message.

With that in mind, the first thing you need to figure out is what message the website should communicate. That involves consulting with your client to find out what they expect from their website and sometimes, it means guiding them towards the right course of action.

Some clients - not big ones usually - can't provide a solid answer when you question them on what the website is for. In cases like those, it's your job to tell them what they need and why they need it.

To figure out the purpose of the website, you need to immerse yourself in their business and put yourself in their shoes.


What does the website need to communicate, and why?


The worst thing to do in any case, is start designing before you know what you're designing it for. There are many steps to take before you even begin to conceptualise the layout.

To get a far better understanding of your clients needs, you should use a Creative Brief. Once you've populated most of the categories, you should already have a far greater understanding of the task at hand.

Next, you need to define the content, and in most cases this is the hardest and most important part. Note also that content and SEO go hand in hand, could even describe them as joined at the hip. After all, SEO is - as a basic definition - just keywords embedded in to good quality (well written) content. Google (and other SEs) place the most weight on what is actually written, with much less regard for how it's presented and least of all for the graphics you use.

Once you have defined the content, or at least the headings of the content, you need to figure out the information architecture - the order in which you will present the information to the audience, considering things like:


What is the most important (primary) information?
Which parts are supplementary information? (information that is secondary, or elaborating on primary information)
What would the user be looking for when they land here? (the best results for this question will usually come from primary research, but in small projects that is often not an option and you just have to use common sense and consult people you consider intelligent)


After analysing the content, you should now be able to define what kind of website it will be, there are two broad categories: static and dynamic. A static website is one that has all content mixed with the code and rarely changes/gets updated. A dynamic webpage generates content (or pulls it from other sources like databases) based on conditions, most often through a CMS (content management system) like WordPress, and is updated quite often.

Two clues there are that a website that won't be updated very often is best served as a static website, whereas a website that will be updated often is best as a dynamic website. If you're creating a dynamic website this is the point when you look at what framework you will use, which is a whole different topic.

So by this point, you know what the purpose of the website is, what content it will contain and what type of website it will be.

The next step is deciding how many pages there should be, which goes hand in hand with defining the navigation structure. I find that the easiest way to spot a poorly designed or generic website is when you see all the typical 'About Us', 'Contact Us' and similar pages that are actually quite unnecessary. Why does anyone need a whole page just to display some contact details? Isn't it better to put the contact details on every page? Additionally, in most cases the home page should say a lot about who the company is, often eliminating the need for a whole 'About Us' page, but that is very much a case-by-case consideration.

Now, once you have all of this information organised, you can start to design the layout.

When designing the layout, the best course of action in my opinion is to let the content define it, rather than fitting content in to an existing layout.

The first step for designing a layout is identifying the consistent elements that will stay the same on every page - usually the header, primary navigation and footer. Prepare a template of just these elements, that share the same style sheet.

After this you should design each pages' unique layout, placing the most consideration on figuring out how to make the important information stand out, and how the primary and secondary information will be structured.

The final step for actually designing the website layout is deciding what pictures to use and where to place them, they are support for the information and most often not the important part - that's why I consider them last. Additionally, it's a lot easier to decide what pictures are needed and where to place them once the textual content has already been structured.

Finally, after the website has been designed and looks ready, you should begin to optimize in all the ways you can identify. A great tool for identifying how to optimize your site is Google Page Speed Insights, there are a whole host of tools available for free from Google, and far too many to list here without knowing any specifics.

After optimising, it's time to get feedback from users, and that part can be done in many ways, so I won't go in to specifics.

This answer is far from a complete guide to designing a website, and I will try to revisit and improve it if I can, but there are many important things to consider and every case is different, so it's impossible to create a one-size-fits-all answer.

Vote Up Vote Down

@Holmes874

This is hard to answer as there is no ideal workflow. It's going to be different for everyone and different for every project.

My idea workflow:


strategy meetings. Determine business objectives, goals, key users, etc.


Then, in parallel as much as possible:


iterative UX design. Sketching, prototyping, user testing as needed.
iterative UI design.
iterative content creating.
iterative development. More sketching, prototyping, user testing, q/a testing, interaction design, etc.


Then, post launch:


some sort of feedback loop. Surveys, usage data, feedback, etc.

Vote Up Vote Down