DEV Community

loading...
Cover image for My Web Development Process Part 1: Design

My Web Development Process Part 1: Design

jorenrui profile image Joeylene Rivera ・Updated on ・8 min read

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
  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

Wireframe via pen and paper

Wireframe via pen and paper

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

Wireframe and Prototyping using Adobe XD

Wireframe and Prototyping using Adobe XD

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

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

Designing the Website using Photoshop

Designing the Website using Photoshop

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:

There are also others in which you can use like:

Resources that helped me are:

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

Data Normalization via pen and paper

Data Normalization via pen and paper

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.

Entity Relationship Diagram via pen and paper

Entity Relationship Diagram via pen and paper

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.

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

Discussion (14)

pic
Editor guide
Collapse
kromiro1 profile image
Kromiro • Edited

Thank you for a great guide to programming for beginners. I also have to learn programming from a lot of open sources but since some time understood that except basic knowledge you have to find some special tips for different situations. In such cases, different blogs like mova.io help me a lot.

Collapse
jorenrui profile image
Joeylene Rivera Author

Slr, I really appreciate that 😊 Always happy that sharing my experiences managed to helped others.

I agree with your point regarding those special tips. Educating yourself on topics outside of programming like soft skills and design will greatly affect your way of building things. That's why I'm also a wide reader 😊

Collapse
jomanwalter profile image
JomanWalter • Edited

I am currently in the midst of job hunting myself. I was beginning to become discouraged after so many rejections but found hope when I found this forum on FCC.
Congrats to you on your success!
Thinking to start learning at blockchain development.

Collapse
jorenrui profile image
Joeylene Rivera Author

That must have been hard. Wishing you all the best in your job hunting. Hope everything will become great for you. And thank you for the congratulations 😊

Collapse
didin1453fatih profile image
Didin πŸ‘¨β€πŸ’»

Nice article πŸ‘
I think you can try to use dbdesigner.id to create Entity Relationship Diagram.
This can help you to collaborate with your friend on web and cut off your step in generate SQL Create database.
medium.com/@didin1453fatih/databas...

Collapse
a_omaf profile image
Aomaf

thanks for sharing yiur process,
its really helpful.

Collapse
jorenrui profile image
Joeylene Rivera Author

You're welcome πŸ˜†

Collapse
sherribooher profile image
Sherri Booher

Thanks for sharing your process. This gave me some insight into how others build their projects. Good stuff!

Collapse
jorenrui profile image
Joeylene Rivera Author

You're welcome 😊 Tho I'm also getting curious how others build their stuff πŸ€”

Collapse
nilomiranda profile image
Danilo Miranda

Just the kind of article I was looking for, thanks πŸ™‚πŸ‘ŒπŸ½

Collapse
jorenrui profile image
Joeylene Rivera Author

Glad it helped 😊

Collapse
jamespriest profile image
James Priest

Great job! Wonderful and clear step-by-step process on deconstructing a project into manageable chunks. I like your straight-forward and disciplined process!πŸ‘πŸ˜Š

Collapse
jorenrui profile image
Joeylene Rivera Author

Super thanks James 😊 I tried to be as conscise as possible in explanation it. Glad it turned out well

Collapse
silentdev profile image
Ezekiel Lawson • Edited

This is best tip I have seen so far @jorenrui thanks for sharing this great idea it has helped me a lot I'm having the thought of learning UI πŸ‘πŸ‘β™₯️β™₯️