If you work on the web, you know that the launch of a new web application is a complicated, challenging and exciting process. Every day we see new projects come to life during the first steps in the development process, when you turn your photoshop comps into live HTML code. Getting the application into a workable (and marketable) product from there requires mastering a number of skills.
Let’s take a look at how to launch a web app, website or what-ever-you-are-building.
Website UI and Design
The days of blinking scrolls and clumsy tiled backgrounds are (thankfully) well past us. Spoiled by design-centric startups like Airbnb and Fab.com, users have come not just to expect, but demand good design. Design is also one of the quickest ways to set yourself apart from your competitors. It is, after all, the first thing users see on your site.
Thankfully, good design isn’t terribly expensive. You can even create simple webpage mockups by yourself if you follow some basic design principles, such as:
1. Sketching: Before you create a single pixel in Photoshop, spend some time sketching the basic vision of your web app on paper. This doesn’t have to be terribly complicated; you can draw out anything you want as long as it has some design coherence. This sketch should serve as a very rough map of what your final design might look like. Don’t be afraid to create several sketches until you reach a more concrete vision.
2. Wireframing: A wireframe represents an ‘X-Ray’ of your website. This is a rough schematic diagram showing the various components on any page. This wireframe can be as simple as a sheet of paper with different boxes denoting Header, Navigation Menu, Content and Footer. Ideally, wireframing and sketching should be done together. You can do this by hand, or use a tool like Photoshop.
3. Creating a Mockup: The third step is to create a mockup of your final design using the sketches and wireframing as a guide. Mockups can be created in Photoshop, or you can use design tools like Mockingbird or Balsamiq to create designs quickly. The mockup will reflect your final design, so take some time to flesh it out completely before moving on to the next step. There are a few things to keep in mind when creating a mockup:
- Adopt a Theme: “Theme” is a very broad term that describes your website’s overall ‘mood’ or ‘feel’. Fab.com, is urbane and modern with a hint of hipster flourish, while Apple.com is clean and minimalist with a distinctly hi-tech vibe. Before you create a mockup, think about your site’s overall theme. Ask yourself: what do I want my users to feel when they visit this site?
- Use Color Appropriately: Color can liven up a dull page, make an element stand out and even help you sell more. Color trends keep on changing every year. While web 2.0 was all about brash frivolity, startups are using more muted colors today. Here’s a quick recap of the dominant color trends in the past year, and what to expect in the near future.
Color also has an effect on how users respond to your web app. Different colors trigger different responses. Bright yellow, for instance, draws viewers’ attention to a particular element. Orange, on the other hand, is great for call-to-action buttons (such as ‘Add to Cart’). Here’s good chart explaining different colors and how to use them effectively in your web app. - Keep Up with Trends: Web design trends change faster than the fashion in Paris. If you surf a lot, you can spot these trends as new startups push the boundaries of what is considered ‘good’ web design. Infinite scrolling and fixed headers, for instance, are among the latest new trends. You can find more specific trends for 2013 on Hongkiat.com.
- Keep an Eye on Performance: While you’re bringing your grand design vision to life, also keep an eye on performance. Large pictures and heavy graphic use can bring down the performance, frustrating customers and even costing you a few positions in search engine rankings. It’s a good practice to keep file sizes as small as possible, and limit the amount of images you use on your web app.
Now that you’re on your way to finishing your web design, let’s look at another crucial usability component: UX.
UX – User Experience
User Experience or UX refers to how people interact with your web app. This is a very broad field that covers everything from usability to conversion rates. As you can imagine, UX requires years of expertise and experience to master. You can hire a UX consultant like Theresa Neil, or tinker around on your own by following some basic UX principles:
1. K.I.S.S.: When it comes to UX, you can’t go too wrong following Apple’s UX dictum – Keep it Simple Stupid! Don’t use two elements where one can suffice, limit the number of choices for the customer, and ensure that your app can be used by even the most tech illiterate of users.
2. Big Words ≠ Big Returns: It’s common for new startups to wax poetic about the features and benefits of their web app, all at the expense of the customer. Keep the text on your web site as limited as possible (except on the blog, about-us page, etc.). Wherever possible, communicate through pictures and videos instead of text.
3. Focus on Numbers: The great thing about UX is that you get access to a ton of data to base your decisions on. Analytics tools like Google Analytics and KISSMetrics can help you track how little changes affect the overall user experience. A startup that focuses on performance metrics will almost always outperform one that adopts a ‘see what sticks’ approach.
4. Get Feedback: Getting subjective feedback on your web app is as important as focusing on performance data. Websites like UserTesting.com can give you a great overview of how visitors use your sites and what you can do to improve the overall user experience.
5. UX is an Ongoing Process: There is never a time when you can’t focus on UX. UX is a constant, endless process. You should constantly try to improve the user experience, no matter how great your conversion rates are, or how happy the users may seem.
Testing
Testing is the process of measuring the effectiveness of your web app. This is where the rubber meets the road. It’s a hard, gritty process that most startups fail to master. Essentially, it involves creating multiple variations of the same page and measuring their performance against each other. This is a purely statistical exercise and can be done by anyone by following a few simple tips:
1. A/B Testing: A/B testing, also called ‘split testing’, is used to measure the performance of two variants (labeled A and B) of the same page. Different versions of a page are shown to different users randomly. You can then calculate how each page performed viz-a-viz the other, and select the right page accordingly.
2. Small Changes Can Equal Big Rewards: You don’t always have to make sweeping changes to see dramatic improvements in conversion rates. Sometimes, the simplest of changes such as using different colored buttons and links can equal big rewards. Try out these simple changes before overhauling the existing design completely, and be open to learning from the mistakes of others.
Universal Accessibility
Have you ever tried to use one of your favorite websites on a smartphone or tablet and found the experience completely disappointing? In this ‘Age of Many Screens’, it is important to optimize not just for desktops and laptops, but also smartphones and tablets. Basically, everyone, regardless of screen size or device type, should be able to access your web app.
One way to go about this is by using ‘Responsive Design’. A web app with responsive design automatically changes to fit different screen types. It can expand to fill all the space on a 27” monitor, and squeeze down to fit on a 4” smartphone screen without any loss in usability. The Site Slinger specializes in creating responsive designs that look great on any screen.
While you’re creating responsive designs for your web app, also make sure that you create corresponding designs for your email marketing campaigns. The Site Slinger can code responsive email templates, as well.
Development
Development is where all the planning and design finally pays off and your vision comes to life. It is often the hardest step in the entire app creation process, depending on who you ask. If you have prior coding experience, development can be a relatively straightforward experience, especially for simple web apps. Otherwise, you should be prepared to pay through your nose for a top notch custom developer to take your design live.
Hiring developers is an expensive process wrought with trial and error. Quality freelancers are not only expensive, but also extremely hard to find. You should expect to go through a number of developers before you find someone who fits your requirements.
An easier (and cheaper) alternative is to hire a PSD to HTML service like The Site Slinger. The Site Slinger specializes in turning PSD design files into actual live sites. We have years of experience working with startups and takes care of all the frontend development work so you can focus on what’s really important – sales, traffic and customers.
The Site Slinger converts designs into code for companies, including startups like WPEngine, Capital Factory, OwnLocal, and more. Our PSD to HTML team hand-codes a full Photoshop design into HTML5, CSS3 and all basic JavaScript animations, which is perfect for an app prototype or marketing site. We also have an amazing custom development team ready for all of your WordPress or web development requests. It’s a far smoother process than hiring (and firing) dozens of overpriced freelancers.
Conclusion
Building your first web app isn’t easy. You will have to do everything from creating the mockups to optimizing for better conversion rates. With a little help, however, you can go from prototype to live in a few short weeks and set your web app dreams in motion.
Resources
Web Design and UI
1. Smashing Magazine
2. Hongkiat
3. Introduction to Typography
4. Niice Design Search Engine
5. Designer News
6. MockingBird
7. Basic Wireframing
8. Advanced Wireframing with Keynote
9. Creating Your First Mockup
10. UI Design Resources
11. Planning Your Website with Sketches
12. 16 Tips for a Better Website
13. Startup Tips from Pro Designers
UX
1. How to do UX
2. Six UX Mistakes to Avoid
3. A Project Guide to UX Design
4. Don’t Make Me Think: A Commonsense approach to Usability
5. 52 Weeks of UX Design
Testing
1. Ultimate Guide to A/B Testing
2. TechRadar Guide to Testing Your Website
3. Introduction to Web App Testing
4. Getting Started with Conversion Rate Optimization
Universal Accessibility
1. A Book Apart: Responsive Web Design
2. Responsive Web Design: What is it and How to Use it
3. 30 Useful Responsive Web Design Examples