Website design process and steps.

Hello guys please, can you give some advice for my website design process? I'll be very grateful.

Fist I will describe the steps I take for the design process , then I'll try to explain it and give more details about it.

1. 1. 1. First contact
         
         
      2. Determine the project size, direction and scope.
         
         
      3. Site map and wire-framing in XD or Figma sometimes I use Edraw Mind Map
         
         
      4. Content gather and categorize and if it is necessary(in the most cases) generate it
         
         
      5. Create the prototype with Figma, way back I used a lot Fireworks 8 from Macromedia,
         
         
      6. Create the site, create the pages and link them together and adding all the design elements
         
         
      7. Testing phase, look for bugs, and things that have to be tweaked.
         
         
      8. Launch the site on line.
         
         
      9. Deliver it to the client
         
         
      10. Post production phase
          

I'm the type of designer that chooses his clients, at least I try to. Because I had bad experience in the past with some projects that turn out toxic. I will talk about that issue in another moment, for now I'll stick to the design process.



1. Lets see, when I get a new client either from a passive method like in the case he fund me or I find him by myself, I make contact with him or her, so in the first order I talk with him on the phone and ask what is his budget that he has in mind, with a little bit of sense of touch, don't be rude or scare him for being to direct.

I never make a contact by email or chat only when I'm promoting myself or trying to get new clients by email campaigns. So after asking what is exactly what he wants, generally they what a web presence to promote their business or give some kind of service. I don't make apps by myself for the fact that here in Spain the web design an development work is undervalued and they think of us (the clients with no programing or design skills) that we press a Photoshop button or write ten lines of code and it is done, so I stick to the web design and nothing more because they are scrooge, a lot.

After more or less get to some agreement about what he wants I tell him the price if it is the case of a tailor made site, if the site is a standard one, like those presented in my offer I stick to it, for example a 5 page category made with HTML and CSS site I charge 300€ if the client provides me the graphic and text if I have to generate it I charge him an extra per page(later we will talk about fees)

So I present him a basic contract in which I state the condition of our commercial relation and the method of work flow, payment and other things. That done, we jump straight to it.

2. They all want to be the first in Google! so I tell them that it is impossible and there are other methods of promoting themselves either on line or some marketing camping. After they tell me the story of how they want to achieve extra hi income with the website, I interrogate them (not like the CIA, but very close) to find out what they really want to accomplish. The thing is that I changed my mentality about the clients, in as much as my life philosophy (we will talk about nihilism) changed by the years, so back then I only see numbers and money, but in a marketing course I have taken the teacher managed to change my point of view. That been said I imagine the scope of the project an reach and embrace it. I must add that I do this on a tailor made web site, in a small project a pass to the action directly because is more simple. So with that figure out I go to the next step.

3. This one is easy I draw with pen and paper the site map then a rude wire-frame after that I put the elements I think their have to be included like text box, image holders, lists, forms etc.

4. I must admit that in all cases the new client only has a business card with a shabby logo on it or maybe some flyers. After that I ask for the text that he wants to appear on the website, and with his collaboration tweak it so that it fits and apply for the initial SEO. In the case that he doesn't present nothing I charge them for the copyright generation and stock pictures(if he doesn't have professional photos) or if he wants to go to a photographer, in some extreme cases I shoot the photos myself with my reflex camera, I purchase a tripod and some lights for this case. That done, to the next step we go.

5. This is I think the mos difficult part of the process, I have to inspire myself, but the process of creativity I will tell you more in another occasion for now let say I have it, so I generate by default 3 different static layouts with all the elements and the color scheme in place and present them to the client. We pick one and the work on it to fine tune it and the go to the next step. I usually use Figma for the fact that I can directly present the prototype online at the same time the client sees it ant talk on the phone with him and ask about his opinion about how it came out. After that I implement the navigation between the pages and the navigation menu and make it work. When he gives me the OK I pass to the next step.

6. The creation is a little bit chaotic in my case, because I'm an anarchist and some times even hedonist and always do what I like and what I want, this is a big problem, that it is why I give to the client a two weeks period from the first contact till I deliver the site. I start out with the prototype made in Figma and transport it to a PNG which in some cases I print it and in others I just leave it on my second monitor. If the client wants a static site I code it in Visual Studio Code or Atom, I love both of them, If he wants a CMS I jump in to Elementor and get it done. I want describe the creation of the website because it is very simple and linear I just have to stick to the steps I usually define before the task.

7. The testing phase is a little bit tedious if the site is large, but with good practice and flowing the right steps it is fairly simple, some times I use my friends to look around the site a see if there is something wrong, like bad dimensions photos or other elements that need to be arranged.

8. This step is a little bit complicated, because the client has to have his hosting account running and the domain name working, I don't lunch the site if he doesn't provide me his hosting account credentials, I don't offer hosting services from bad experience in the past, like when they want to end the relation with you. I measure the sites loading speed and see if it is all OK and then upload the hole site, with the assets and the scripts.

9. In this step I give the client his credentials back, and if he doesn't have tech knowledge, create his email accounts. If it is a CMS I install the plug-ins need like the ones for anarchistic, anti-spam, security ones and so one

10. Now I try to hook the client so I may charge him a regular fee for maintenance and site content actualization, backups, newsletters and so on.

Thank you and have a nice day.

 

This is indeed a great post related to web app design and development. You have described all the web app development points so well.

 

Thank you Susi, but I resumed a little bit the steps. For example the 7'th step it can take a lot of time and I didn't mentioned all the sub-steps you have to follow, but if you have the right habits it can be easy to do.

 

I'd say your strongest points seem to be client relations, and your weakest parts are ACTUAL DESIGN.

This is because design-wise you've got it utterly back-assward, and have been suckered by trash like XD/Figma/Fireworks and other such visual "tools"... Where to be brutally frank the only thing about them that can be considered professional grade tools are the people promoting their use.

Those are glorified paint programs, not design tools, and your overall process reeks of likely making inaccessible broken slow trash. Design is not art unto and of itself, design is engineering that incorporates art. It involves specifications, guidelines, usability, and dozens of other things dicking around pushing pixels in a GUI are NOT going to provide.

That you've got screwing around with that artsy-fartsy bull before you even have content? Just plain garbage.

Content first, then semantic markup, then layout with CSS, THEN worry about the artsy extras. Remember, websites are for more than just perfectly sigted users sitting at screens, and whilst I've not seen your work, from what you've said I bet you dollars to donuts that if you're using halfwit idiotic TRASH like fireworks and figma instead of doing your design in the markup and stylesheet? Well, you're probably telling large swaths of users to go F*** themselves.

Which is never a good business plan.

Mind you that's all guessing wildly, but there are a lot of telltales there which make me think you're an artist under the delusion you're a designer. I'd have to see an example of your work to say for sure.

 

What is ACTUAL DESIGN? Are you talking about the graphic design and design layouts, about the discipline and science of making a website if yes what kind of site? Like making sure that all fits and you respect the laws of information architecture, the navigation, animations, forms and the graphic elements fit nicely, are consistent and all woks good?

I am no sucker and don't know why do you have to insult and despise me?

I work with UI design software because it is more easy to make a initial layout designs so that the clients may choose from.

Or do you code the site first and after that work on the graphical layout and show it to the client when you finish the work? And you need an aid or do you design maintaining in your brain the layout and where goes everything. I don't have parapsychological powers to do that, my brain is normal.

I make pixel perfect sites, use the Fibonacci sequence, reticules, guides, gestalt principles, color psychology, form, space, groups and all that and more, even eye taking. I plan the layout using mathematical calculation and I use occultism, sacred numbers and other things

For content what are you trying to say? I didn't said anything about designing before I had received or generating the content, only a wire frame and the sitemap sow at the same time with the client we may , after that I implement the content and design with it on my mind. I use pen and paper so the client and I can decide what to do with the content before.

I think that you are something different from the rest of web designers, first yo make the content and the coding and then the layout? I don't understand you very well.

I know perfectly what a website is, and that there many types of sites both by function, by style and goal and each one needs a different approach when planing them.

Please stop insulting me I'm no idiot,

If you insist I will never talk to you again and report it to the mods.

I have my own way of designing, I try to keep it simple so don't costs me to much effort. If you design a site without a visual aid because they are trash it is your choice to do as, I live in the XXI century and use technology.

Judging by your reaction it will be hard for me to be your friend, and frankly I don't even know who you are so this may be a test to see how it ends up and I'm fit to be part of this community.

 

Would you PAINT a house BEFORE you built the house? That seems to be your method of webdesigning by designing the graphics before you have page to put them on.

 

I think I have misunderstood something, let me explain. By layout I understand the initial static PNG done in Photoshop in which the graphical elements are arranged on. Where the banner, hero, logo, navigation, images and the rest goes, I'm talking about for example a 5 categories corporate site with de home, services, products, about us, and contact section. So I do that first.

Yes, I first draw it on paper to draw the wire frame so after that when I figure out the graphical configuration i jump in Photoshop create a layout so I can guide myself when coding in Visual Studio Code or Atom,

But I'm giving it up for Wordpress and Elementor, much easier and economically profitable
This is what I understand for the term layout:

 

Gonna go a little out of order:

Sorry if it came across that way. I've spent the past decade working as an accessibility and efficiency consultant for websites, and I've encountered the broken approach you're using client after client after client. The results are ALWAYS a middle finger to users, and part of why most of my clients are in court for WCAG violations.

Because if you screw this up in certain industries you CAN end up in court over this, either for civil cases or actual criminal prosecution under laws like the US' ADA and UK's EQA. Used to be the only places we had to worry about that was for medical, public utilities, banking, and government organizations, but ever since Domino's and Beyoncé got raked over the coals in the US legal system -- the Supreme Court basically telling Dominos to "suck it" -- it's now open season on almost any business's web presence. If big names like that can be bent over the table for their arsty scripting loaded inaccessible wrecks, what chance do small business owners have? That's why we as web developers and designers need to be out there dotting our t's and crossing our i's... or... something like that.

As such I can be a bit... passionate on the topic because I'm sick of seeing client after client bent over the table by know nothing artists under the DELUSION that they're "designers". Generally people who use the tools you listed do not know enough about usability, accessibility, or any other actual "engineering concept" in regards to websites to be designing a blasted thing. No matter how pretty their "art" is.

But broken, artsy, inaccessible trash is the norm from most people who just don't know any better. I suspect -- again this is a guess since I've not seen your work -- that you're utterly ignorant on these topics... and I don't mean ignorant as a insult; it just means you don't know any better. We can fix ignorant.

Web Design, Architectural Design, automotive design, doesn't matter. Design is engineering. About the only design that isn't ACTUAL design is "graphic design", where frankly prior to about 25 years ago NOBODY called it that. It was graphic arts, for a reason. It's art, NOT DESIGN.

Such software most always results in broken layouts, bloated sites, and utter inaccessible trash... and you even say it:

IF you're thinking in pixels, you're not thinking. Pixels are the most inaccessible of metrics, and if you're working in PX sized fonts, with PX sized widths, margins, and paddings, you're flipping the bird at users with accessibility needs. They're called EM, use 'em!

The mere notion of "pixel perfect" is utter and total rubbish since users may have different scalings, default font sizes, and so forth. That's why there's a industry-wide shift to vector art via SVG and iconographic webfonts. It's why people are deploying double-resolution images for HDX/retina displays and/or 4k scaling. The moment you see font-size in px, or width in px, for anything other than a raster image -- and even then -- you're looking at the pesky 3i of web development: Ignorance, incompetence, and ineptitude. Again, I don't mean ignorant as an insult. It's the other two we have to worry about!.

Sadly it's always been that way, PX "design" being utter broken 3i trash. Even sadder, most people vomit up lame excuses for it when EM is so blasted simple and easy. See my recent article on that:

https://levelup.gitconnected.com/accessible-fonts-please-stop-using-px-for-screen-f0df20efcf8c

I make semi-fluid elastic responsive sites, where the concept of "pixel perfect" is the antithesis of usability, accessibility, and just plain sanity.

Semi-fluid -- Dynamic width of the main content column with a max-width to prevent long lines of text from becoming unwieldy.

Elastic -- They scale to the user's system (or browser) default font size because EVERYTHING is built in EM or a percentage of the max-width.

Responsive -- adjusting the layout based on the available screen space. Laughably we had responsive design BEFORE media queries existed. Out of the box HTML is responsive. Artists under the delusion they were designers screwing around with fixed width layouts, table for layout, or "grid" based nonsense were the ones who made sites non-responsive! That's grid as in the derpy "divide the page up into twelfths" and not as in the "CSS Grid Layout Module"

Most of the above I do based on the needs of the content, not some arbitrary and typically broken pre-determined scheme. (again, see that grid of 12 chazerei)

Content FIRST.

1) take the content or a reasonable facsimile of future content, and organize it as usefully as possible if HTML, CSS, layout, and the goofy graphical stuff doesn't even exist in a flat text editor. This order regardless of layout demands should remain inviolate. Praise be for CSS3's ORDER property!

(5 minutes if that)

2) mark up that content with proper semantics, saying what things are, NOT what you want them to look like.

(5 minutes if that)

See my article explaining proper semantics. It's shocking how many people can't even use H1..H6 properly.

https://levelup.gitconnected.com/semantic-markup-probably-doesnt-mean-what-you-think-9e44d2439b18

3) Apply CSS to it to create the layout.

(5-40 minutes depending on complexity)

4) Then and ONLY then start screwing around with colours, presentationa/non-content images, and so forth.

Content dictates markup. Content + markup + device capabilities + usability dictates layout. Accessibility minimums limiting the choices of the presentation stage.

As a dearly departed friend (and legend 'round these parts) used to say, "People don't visit websites for the goofy layout you hang around the content, they visit FOR the content" -- hence why idiocy like full-screen splash pages and goofy dumbass "rotating" plates are actually in most cases usability junk that does nothing but wank off the marketing turds who REALLY need to go back to working in print -- since they know but two things about websites, and Jack left town.

Usability, accessibility, the content, the logical document structure, and my semantics dictate layout. There's only so many ways you can place content on a page in the first place anyways, and once you know the techniques for doing that -- something flex and grid have GREATLY simplified -- you should be able to code in semantically neutral hooks (DIV, SPAN), proper semantics (numbered headings, tables, lists), and pretend semantics (SECTION, ARTICLE, HEADER, FOOTER, MAIN) that ideally you can do any layout with little to no changes to the markup.

I just had it out with a guy about that one, as his "psychologically manipulative" colours were an utter and complete violation of WCAG minimums. I don't care how good the colours are in terms of "brain triggers" -- if the users can't actually huffing read anything, what good is it?

That's EXACTLY what I was referring to. How can you create a useful/accessible wireframe before you even know what's going into it? Much less build a sitemap on the same grounds? How does that even make sense? Content FIRST! Otherwise you're just shoe-horning content into a layout it wasn't designed for, or worse having the layout dictate the content!

EXACTLY THAT. Again, how can you make an accessible layout before you know what's going into it? Much less, how is all your artsy stuff useful to users with accessibility needs? What's your graceful degradation plan for non-screen media users? Do you know the WCAG minimums? Do you even use media targets or are all your pages devoid of the media attribute on your LINK tags?

One also has to remember that websites are NOT just for the perfectly sighted sitting at desktop resolution screens. Speech/aural, braille, TTY, search engines, and other non-sighted UA's are equally important, which is why proper semantics and logical document structure are far more important than the visual layout... and why they should be done FIRST!

Progressive enhancement, you layer ... content > markup > layout/style > scripting, in such a manner that if any of those are unavailable -- or just plain different -- it still works and is useful to who really matters, the visitor.

Again, it seems doubtful but again I'm guessing wildly. I'd have to see your work but from what you've said so far, it's setting off all the warning bells I've learned in 40 years of programming, half that in web tech. It SOUNDS like you've got the same "visually oriented" approach that was the bleeding edge of 1990's markup methodologies; back when people were slopping FONT/CENTER tags, ALIGN, BGCOLOR, SIZE attributes, and TABLE for layout all over the blasted place... equally flipping the bird at users with accessibility needs.

Thing is the technologies and methodologies you said are stuck in the 1990's. See long dead trash like Netscape Composer, Frontpage, and all the other train wreck laundry lists of how NOT to build a website. Just like the nonsense of people dicking around in photoshop vomiting up PSD's and calling it "design". It isn't. Not by a long shot.

PLEASE, don't take my comments so personally. I know it's hard to take the harsh criticism on the cheek, but your statements genuinely worry me in regards both to your spreading these outdated and outright broken approaches, much less how much you might be setting up yourself and your clients to be really badly screwed over.

If I'm harsh with you, it's because I've seen these mistakes before, I've seen this mentality before, and I've watched it screw over far too many people. That's not your fault, you're just following the crowd. Sorry to say, that's the bandwagon fallacy, and goes hand in hand with all the other sleazy, dishonest, scammy practices that continue to be hot and trendy no matter how many people end up fleeced by it.

Because whilst trash like Elementor or Turdpress can be profitable at the start, long term it can really screw you. There's nothing worse than losing any profit to fines and settlements. With the rapid increase in accessibility lawsuits -- and the upcoming changes to the WCAG and various laws sending businesses scrambling -- the "visual first" approach is just BEGGING to get yourself screwed.

BUT AGAIN, I'm just guessing here based on what you've said so far.

 

Exactly that -- NOT design. Art. What's your responsive plan? How are you handling dynamic/elastic scaling? Are you planning on natural wrapping for semi-fluid design?

You're pissing around drawing goofy stuff that may even force you to write content to the layout instead of the other way around.

Photoshop is not a design tool, it's inaccessible pixel pushing bull that results in broken inaccessible websites just BEGGING for a lawsuit if used for any practical business purpose.

I have NEVER seen a website that started life in Photoshop that wasn't a giant middle finger to actual users. That's 1990's / early 2000's thinking that NEVER should have existed as part of "web design" in the first place. No matter how many people blindly copied the technique in ignorance.

Because websites are for MORE than just sighted users. Because websites have to scale to hundreds of thousands of different PPI and resolutions.

As mmerlin said, you're painting the house before it's built... or even before architectural plans have been drawn up.

 

Good day detahshadow.

First of all I will like to kindly ask you to accept my apologies for protesting and don't understand your way of criticizing and addressing me because the first thing I thought is that you are a troll and love to prick people.

After seeing your forum profile I notice that you are an extraordinary generous, altruistic person and you have a strong designing and programing knowledge and for that I raise my hat.

Please note that I'm a sloppy graphic designer I didn't finish the design school and don't have an official title and I have notion of basic webdesign skills sufficient enough to make an HTML static website. So I design fast, nice and simple corporate sites, don't take jobs that require programmatic ability(I know how to "borrow" code). I believe that you are right and I'm not in to real design because I don't follow the logical and practical design sequence method but I mange myself to earn my living. Also please note that by the nature of the projects I take on it dose not require a clean and more technical approach and process, I don't do SEO or online marketing campaigns that is why a run away from online stores and complicated web applications.

I'm only into front-end and the most complicated job I did was install a shoutcast online radio station on a Linux server, don't have the knowledge but now I'm starting to learn back-end and development, because I focus mostly in the appearance of the site but without violating the information architecture basic laws use a lot of psychological stuff to, like creating personas, choosing the right color scheme and so on.

Please allow me some time to really understand a read a couple of times your posts, I'm in a little bit of hurry this days and don't have enough time to give you the attention and respect you deserve judging by the effort you put in answering and politely explain the correct point of view about the design errors I make.

For now, thank you for your patience and kindness and hope to be good friends.

 

@Horia It seems that your design process is working well. What prompted you to ask this question?

I have questions for you. Where in the design process do you show your design to the client? What happens if they do not like the design?
Do you design the mobile version and desktop version at the same time?

 

I recently read an article about the stages of creating an e-commerce website. I recommend to this topic:

https://blog.codeharbor.dev/2022/11/16/the-process-of-developing-e-commerce-website-part-1/

 

Very interesting post, but it's just a theory. Clients can be very problematic and sometimes they are hard to work with.