Design The Interfaces First

Very compelling reasons to design interfaces for your website, module, or content before programming

1. You save money because it's cheaper than designing on the go (or designing after)
   If you're trying to design an interface while programming it, you'll end up spending way more time overall. Programming is usually the most expensive part of software development so paying a user interface designer to do what they do best saves you money in the long term.
2. You spend less time on changing your code
   With a design and prototpye developed, you know exactly what you're developing for. For example, if you're creating a product listing you probably have a lot of specific elements: product name, category, price, sale price, availability/stock, SKU, and details. When you design these elements ahead of time, it gives you a blueprint for how your code will behave. Knowing that certain elements will have specific tags and classes, or other sections will exist within a panel or a modal dialog or a pop-up changes how you code things. If you try programming first and then decide on the design later, you have to go back and change your code. The simpler something is coded, the less issues will arise.
3. You can anticipate the scope of the functionality and avoid issues 
   Good UI design and development can both define functionality and solve issues before you encounter them. In my product listing example, if your listing has a sidebar with a list of filters, it adds to the scope so it becomes the requirement. During the design phase, you can see what issues might arise before they happen. Sometimes when you try designing as you code, you might go for a certain layout but find that it doesn't work for some reason and then have to go back and try a different design.
4. You and your customers will know exactly how it look and behave 
   It's always easier to communicate and set expectations with your customers when you can show them how something will be. This can get everyone on the same page for how something will look and behave saving you time having to make more adjustments mid or post-development. This is more than just the interface your customers use - it can be also for administrative interfaces. When you have all the interfaces designed in advance, everyone knows what work they have ahead of them and what to expect.
5. You end up with a better user experience and product 
   As a programmer, you probably already have a ton on your plate so worrying about design is probably not your top priority. Delegating the design to experienced designers and developers lets you focus on programming and your customers. Designing and developing an interface is more than just choosing colours and fonts. It's also about solving design problems and crafting an elegant user experience (UX) for your users - whether on a phone, tablet, or desktop.

How I create interfaces

1. Sketch out the basic layout 
   Using paper and a thick black marker, I create create the layout component by component. If an element is not necessary, I don't put it in. If it is, I make sure it's there. I like to keep things simple in this sketch. I don't even use words for content or labels if I can avoid it. I just squiggle the words because I want to focus on the overall idea of the page. I determine the primary call to action as well as the secondary call to actions if necessary.
2. Prototype the interface in HTML / CSS / JavaScript
   Once I have the sketch done, I jump into my IDE and develop the interface for desktop, tablet, and phone. I try my best to follow my sketch as closely as possible. If I have ideas on how to improve it as I'm going, I usually save those until I have what I originally design done. That way I can at least see how my sketch turns out before changing it.
3. Test and reiterate
   Once everything is built, I thourougly test it. If I can, I populate it with real content to see how it will behave in different scenarios.
4. Review it with the customers, colleagues, and stakeholders
   It's super important to get some review of the work to make sure nothing is missing or not quite right. Take their feedback and incorporate changes into the interface.
5. Send off to programmer and then post-development review 
   After everyone's happy with the interface, I send it off to the programmers. Once they have a working prototype that's running in a real development environment with at least dummy data, I take the time to review and really test it. Sometimes there are things that are hard to anticipate before it's working software, so I find those issues and then work with the developer to make adjustments until it's polished.

Even if you're not an experienced designer, I'm confident that if you design ahead of programming, you will probably save a lot of time, headaches, and money.