What will be the process of professional website building?

Question

I searched for a while, but I can not find anything related to Google or here.

Some friends and I discussed the issue of launching a company, so I think it would be nice to do a quick pilot project to see how well we can work together. We have a designer who can do HTML, CSS and Flash, likes to do art, but does not like to do HTML and CSS ... And 2 programmers who are ready to do something.

My question is: from the point of view of an experienced site, what steps are we taking - in chronological order - to properly process the website? Does the designer design the look of the site, and then programmers fill in the gaps with functionality? Or programmers create a “layout” of the site with most of the functionality, then the designer season it? Or is it rather the reverse process?

I just want to know how a professional usually handles this.

Update: Retake some notes from each post.

Step 1: Define the requirements. What will your website / application do?

Step 2: Use Cases. Who will use the application and what to do with it? You don’t need to do this with a bunch of crazy UML diagrams, just use any visual aids that you think are best for you. Find a CMS provider, a search provider, or both. When planning, perhaps do some analysis of your competitors and see how they made their own in similar areas.

Step 3: Visual proof of concept. This is done by your designer, and not by your programmers ... Programmers, as you know, do not work well in the user interface. Use an image program like Photoshop and not an HTML editor. First, leave it fluid and simple. Choose a three-color theme for the site (two primers and an accent.) Find out how you want to lay out things, bearing in mind the selected CMS and / or search function. Focus on usability, add pizzaz later. Turn the created concept into JPEG layouts or create an intermediate site so that the client can view the work. An intermediate site will test future releases before moving them into production.

Step 4: After the site is conceptualized by your designers, ask your HTML / CSS developer to turn it into markup. He / she must shoot for XHTML compliance and test as many major browsers as possible. Also the right time to create tracking / versioning / bug tracking systems to track changes, bugs, and feedback.

Step 5: Ask your programmers to turn your requirements into software. This can and should be done in parallel with step 4; there is no reason why they cannot code the main parts and write tests while the user interface is designed and developed.

Step 6: Marry the final UI design with code. Test, test, test!

Step 7. Display the final result to the client and receive a click.

Step 8: Expand the site for production.

Rinse, repeat ...

Answer 1

Step 1: Define the requirements. What will your website / application do?

Step 2: Use Cases. Who will use the application and what to do with it? You don’t have to do this with a bunch of crazy UML diagrams, just use any visual aids that you think will work best for you.

Step 3: Visual proof of concept. This is done by your designer, not your programmers. Use an image program like Photoshop and not an HTML editor. First, leave it fluid and simple. Choose a three-color theme for the site (two primers and an accent.) Get an idea of ​​how you want to understand. Focus on usability, add pizzaz later.

Step 4: After the site is conceptualized by your designers, ask your HTML / CSS developer to turn it into markup. He / she must shoot for XHTML compliance and test as many major browsers as possible.

Step 5: Ask your programmers to turn your requirements into software. This can and should be done in parallel with step 4; there is no reason why they cannot code the main parts and write tests while the user interface is designed and developed.

Step 6: Marry the final user interface design with code. Test, test, test!

Rinse, repeat ...

Answer 2

As a first step, I would recommend doing a few preliminary projects using an approach such as paper prototyping to lock down what you want your site to do and about what you want it to look like.

Next, read the Agile approach for software development and see if you like the sound of what it offers. It is best suited for small, well-motivated teams.

Determine the minimum amount of functionality that you can create that you can provide as a product so that you can get user feedback as soon as possible. Then expect to iteratively add functionality to the product over time.

Answer 3

There is no universal way. Every store does it differently. Therefore, a warning: gross generalizations follow.

Web development usually consists of much shorter release cycles, because it is so easy to release a release, compared to client software. Thus, more “flexible” methods are used more often than “waterfall” models that arise when developing client software.

Answer 4

• Think about what you are building.
• Take care of all legal materials (for example, which business object you will form, how each team member will receive compensation for their work, whether there will be health benefits, etc.).
• Layouts. I suggest that designers make layouts, as programmers are known to have poor user interface design.
• Set up some kind of bug tracking / case management system so that you have a centralized location for all your feature requests and bug reports.
• Start coding.
• Once you have a simple version of your application, ask some people to check it to make sure that you are on the right track.
• ???
• Profit!

Answer 5

The web style guide provides a fairly detailed overview of the process.

Answer 6

Just to give something on the other side of the coin. Where I work, over the past couple of years we have been working on the reorganization of the company’s website. Here are some highlights of the process:

• Identify vendors for the various features you need. In this case, this meant finding a content management system provider as well as a search provider.

• Get a new design for the site that can be applied to what was selected in the first stage.

• Using system integrators and your own developers, start creating some functions for the site and use flexible, customizable software in 1 and make it useful for the organization. Please note that it took a couple of years to eliminate this work and some business solutions.

• Release the preview site to test functionality and fix bugs, add improvements as needed.

Please note that in your case you may not have the same budget, but there are various CMS frameworks for choosing, as well as how much integration do you want for the site? Do I need to speak with half a dozen different systems? In the case I mentioned above, there are CRM integration, ESB integration, search integration and translation integration to give a few examples of where things should be connected correctly.

---

In response to the comment, make sure that you and the client know what is meant by “simple,” as if there were any e-commerce features, forums or personalization, these are examples where it’s important to know what you need now and have an idea what you need in the future, because there may probably be a ton of things that customers may wish, but you should find out some of the detailed details at points in the future. For example, some people might think that Google is simple, and from the perspective of the end user, however, how many computers work in Google, how many different applications do it 24/7? I would have thought. Simple is good, but sometimes doing something simple can be incredibly difficult.

Answer 7

You should mix and match the lists given here for your needs.

I just want to make sure you know one thing ...

Customers are "stoopid" when it comes to web design.

You will need to kiss, scratch, drag, gnash, tear and push each demand from your naive little souls. If you do not? Guess who's to blame?

The road you are now looking down is difficult, filled with competition, stress and risk. This requires stamina, faith, patience and the ability to eat ramen 5 out of 7 days a week.

Answer 8

To add (or repeat) the list of Dave Sversky.

• Collect customer requirements

• Do some competitor analysis. Collect screenshots of competitor sites.

• Create a site map / wireframe - What is the structure / content of a site?

• Get designers to create JPG layouts. They can use screenshots for inspiration.

• Get Feedback from JPEG-Based Clients

• Create HTML layouts from JPEG

• Get feedback from customers. Return to step 4 if necessary.

• Embed HTML using selection technology

• Unit test site

• UAT and get a signal.

• Deployment for life

Customer reviews are crucial; they must be involved in every step to ensure successful implementation.

Hope this helps

Answer 9

In addition to the steps outlined in other answers, I would add this (added somewhere near the end of the loop):

x Once you have a more or less comprehensive solution, set up an intermediate site.

at. Connect a client on an intermediate site.

d. Expand the work site.

Celebrate! But not too difficult, there will almost always be several iterations of changes, because users rarely know exactly what they really want for the first time.

So, when (not if) the client requests changes, you can work on the changes and promote them on the intermediate site first! This is important because: a) it gives customers the ability to view changes before the whole world sees them; b) if the integrity of the data at the production site is important, you can hope to fix any problems on the intermediate site before they affect the production of the data.