My Web Development Process Part 1: Design

I'll be discussing how I develop web-based apps. I'll include how I do things, what software I use, and resources that helped me. I'm still a college student. So I expect that my web development process will greatly evolve once I enter the workplace and gain more experience.

In building several web-based applications over a year, my process went through several changes. In the past, I went straight to code. I often find myself staring at the screen for a few minutes thinking about how I'll proceed. I'll also try some ideas only to scrape it at the end.

Development without any direction can get pretty messy. It may result in an ill-conceived or a not well thought-out app. So, I redesigned my workflow. As I gain more knowledge in web development, I realized that it isn't just about coding. It's about problem-solving.

For now, I'm following these steps:

1. Research and Ideation
2. Design
   • User Experience (UX) Design
     • Rough Sketches
     • Wireframe
   • User Interface (UI) Design
   • Database Design
3. Coding
   • Front End Development
   • Back End Development
4. Test and Deployment

Looking at it closely, it is similar to the Software Development Life Cycle (SDLC). It is a process in which a project team follows to develop software. It consists of six steps - planning, analysis, design, implementation, test, and maintenance.

Research and Ideation

To start, I'll strive to understand the project, its purpose, the client, and the audience. That can either be done by researching or asking the client. By doing this, I'll have a clear idea regarding what content should the app include.

I'll also look at the apps built by others. It helps in giving me ideas on the similarities and differences of that kind of app. For example, e-commerce web apps usually have a shopping cart.

I ask myself these questions:

1. Who is the client?
2. What is important to him/her?
3. Who is the audience?
4. What is important to them?

I got this idea when I was watching how Travis Neilson in DevTips builds his Personal Website. Watching multiple designers work got me interested in UX Design.

Anyways, as the designer, it is your job to decide where the content will be placed that will satisfy both the client and the audience. Identifying what's important to both of them can guide you in making decisions. Without this step, you might build the project in the wrong direction.

Knowing what contents that need to be prioritized, I've made lists. Ordered them based on priority. Then, I'll think about how they're connected to each other. With this, I can establish the hierarchy of the content. Like the login page first then the admin dashboard page.

Lastly, I'll think about what technology stack I'm going to use. I'll decide on the framework or the library for that project. Maybe, I may want to try plain HTML & CSS, and vanilla JS for fun or practice hehe.

Design

User Experience (UX) Design

User experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users.
-Interaction Design Foundation

Now that I have a clear idea of what the project should contain, I'll proceed to design. I consider the following in making the design:

• Layout
• The flow of the app when a user uses it (User Flow I guess)

Rough Sketches

In this step, I'll think about how the content is going to be organized and presented. I'll start with rough sketches. Following the list of content I've written, I'll create at least three designs per item.

I'll sketch out my ideas using pen and paper to lessen the distractions. I'll just let all my ideas flow. Not minding whether the lines are straight or not. Not being concerned if it looks great, just focusing on the layout. Just letting my mind go wild in shaping the form of the ideas I had in mind. I'm deciding what form the content should take.

After I ran out of ideas, that's where I'll stop. I'll eliminate the designs that I'm not okay with. Then, pick the most suitable design out of them all.

Next, I'll resketch it again in a neater way. I organize the screens and connect them, showing the flow of the app. There may be times when the design will vary due to constant re-evaluation and enhancement.

Wireframe

Now, I'm ready for now some wireframing using Adobe XD. There are applications made for design. These are:

• Adobe Experience Design - Mac and Windows (Currently using this)
• Sketch - only for Mac users
• Figma - Web-based, Mac, Windows, Linux
• There are others like inVision Studio and UX Pin

I'll transfer my sketches from paper to the software. I only use different shades of black when doing the wireframes. This forces me to focus on the layout rather than the looks or style. I'll make it interactive through the use of wires between the screens. Like when I click the login button, it'll transfer me to the dashboard screen.

With this, I can get early feedback from my team or my client. With other people's input, I can see what designs problems I've overlooked. This helps in refining the design. So that it'll focus on solving the problems encountered by the end users. It also prevents me from building the app in the wrong direction. After finishing the wireframe, I'm off to user interface design.

User Interface (UI) Design

User interface (UI) design is the process of making interfaces in software or computerized devices with a focus on looks or style.
-Interaction Design Foundation

I'll skip this step when I've decided to use a template. Otherwise, I'll create my own design.

I look at other's work for inspiration at least once a week. This keeps my creative mind going. It helps me to think of fresh ideas whenever I've hit a roadblock.

For the color scheme, I use the logo's colors as a basis. I also consider the theme when picking colors. For nature, I'll pick green. For fast foods, I'll go with red and yellow to incite hunger. If it is for fun, I'll experiment with the color palette that I see in the environment.

I limit myself when using fonts. Two or three are enough for me. I use fonts that complement each other. I also show the contrast between them. Like pairing the big, bold, sans serif headline with a regular, serif paragraph.

While I have all those in mind, I prioritize readability. I choose colors that are pleasing to the eyes. I'll pick fonts that don't get away with reading the content. And I prefer short paragraphs as opposed to lengthy ones (if it isn't an article).

For images, I'll pick high-resolution ones. Never stretching it, which distorts the image, just to fit the screen.

Lastly, for the animation and transitions, I'm still learning it hehe.

Software that I use in making the designs are:

• Adobe Photoshop
• Adobe Experience Design

There are also others in which you can use like:

• Adobe Illustrator
• GIMP
• Software that I've mentioned earlier like Figma and Sketch.

Resources that helped me are:

• Dribble - contains numerous works by awesome designer and creatives. I use it for inspiration.
• Color Space - for creating color palettes or gradients.
• Paletton - for creating color palettes.
• Font Awesome - icon kit you can use.
• Google Fonts - various fonts you can use.
• Unsplash - awesome photos you can use for free.
• unDraw - open source illustrations.
• Lorem Ipsum Generator - placeholder text generator.

Database Design

This is for apps that need a database. I mostly do front end stuff. So, I rarely tackle this unless I have no choice. I often use RDBMS. I haven't tried noSQL yet.

In database design, I start with analyzing the manual forms or documents I've gathered. These documents can be receipts or registration forms. Then, I normalize the data. This helps in preventing data anomalies.

Database normalization is the process of structuring a relational database in accordance with a series of so-called normal forms in order to reduce data redundancy and improve data integrity
-Wikipedia

Then I create an Entity Relationship Diagram to help me visualize their relationships. The diagram becomes my guide whenever I'm programming and maintaining the database.

As you can see, I prefer to sketch out my ideas first before converting it to digital.

Wrapping up

Taking the time to research, plan, and design can greatly affect the quality of the app. Jumping straight into code, like what I do in the past, can make web development messy.

Researching and planning can lead you to develop apps with purpose and intention. It helps you to identify what is important, and the problems that need to be addressed. Designing can make your app usable and understandable. It also makes you think about the user experience.

I'm constantly learning web development. So, I expect some changes to my process as I gain more experience. It's so awesome to know that each step has a special role to play in web development. Since it isn't only about coding, it is about solving problems. That's why I'm eager to learn more about other fields besides coding.

And that's Part 1 of My Web Development Process. Part 2 is gonna be about coding.

My Web Development Process Part 2: Code

Joeylene ・ Mar 4 '19

#webdev

I hope you've enjoyed reading this. Thanks for your time and happy coding! 😊