Designing as a Developer(blog.benroux.me)
blog.benroux.me
Designing as a Developer
https://blog.benroux.me/designing-as-a-developer/
8 comments
I think there's a bit of a difference between "making it look nice" and good design.
The article does touch on points that help make a better design but doesn't link to the deeper meaning behind it.
Design is, in effect, planning. A good design is a good plan to achieve a goal. A good web design is a good blueprint for a website.
This is similar to code design. Ask yourself some of these questions:
- which is easier to read, a pyramid of if statements hacked together or a well factored design where indentation isn't excessive and modules do one thing well?
In visual design, this would be your grid system, consistent and readable typography and well thought placement of modules. Code smells bad when you've got no consistent styling in a 1000 line procedure - the rules that lead to good design are very similar.
- which will lead to a better end result? A problem explored on paper, with ideas bounced off the client and colleagues or something thrown together in 10 mins in code?
Getting your requirements down is just as important in design. From there, wireframes with client and colleague feedback is equivalent to a design document of some sorts (even if it's one page a la one feature in iterative development). Based on wireframes and requirements, a mock-up follows with more client feedback. Again, you can't produce good software without a clear idea of what's being built and so it is with design.
If designing for one's self, you are the client. In that case, get someone who will give you quality feedback at each step too.
The best way to look at design and "make things look nice" if you are a programmer is to learn the fundamentals of design and look for parallels in programming.
Certainly, there are exploratory designs too. These designs, like equivalent programs, are useful to find a good solution to a tricky problem. In that sense, these wouldn't be complete designs but ideas for a component you can use in a complete design.
Apologies in advance for rambling - I'm starting off 2017 with the flu!
The article does touch on points that help make a better design but doesn't link to the deeper meaning behind it.
Design is, in effect, planning. A good design is a good plan to achieve a goal. A good web design is a good blueprint for a website.
This is similar to code design. Ask yourself some of these questions:
- which is easier to read, a pyramid of if statements hacked together or a well factored design where indentation isn't excessive and modules do one thing well?
In visual design, this would be your grid system, consistent and readable typography and well thought placement of modules. Code smells bad when you've got no consistent styling in a 1000 line procedure - the rules that lead to good design are very similar.
- which will lead to a better end result? A problem explored on paper, with ideas bounced off the client and colleagues or something thrown together in 10 mins in code?
Getting your requirements down is just as important in design. From there, wireframes with client and colleague feedback is equivalent to a design document of some sorts (even if it's one page a la one feature in iterative development). Based on wireframes and requirements, a mock-up follows with more client feedback. Again, you can't produce good software without a clear idea of what's being built and so it is with design.
If designing for one's self, you are the client. In that case, get someone who will give you quality feedback at each step too.
The best way to look at design and "make things look nice" if you are a programmer is to learn the fundamentals of design and look for parallels in programming.
Certainly, there are exploratory designs too. These designs, like equivalent programs, are useful to find a good solution to a tricky problem. In that sense, these wouldn't be complete designs but ideas for a component you can use in a complete design.
Apologies in advance for rambling - I'm starting off 2017 with the flu!
I'd add: draw it first, don't expect visual art to work well from a text editor. There are many drawing programs for good reason.
I love Unsplash!!! Thanks for discovery
Another link that is useful here is how to create a logo in 5 mins by Design inc: https://journal.designinc.com/how-to-make-a-logo-for-free-in...
The author says that they avoid "Bootstrap like the plague" in favor of Zurb. Why is that?
Author here. Over the years, Zurb's grid has consistently stayed ahead of Bootstrap's in functionality (ex: Zurb was allowing embeddable grids while Bootstrap was still using fixed width) and also in class clarity: "three large columns" vs "col-lg-3".
Beyond these reasons, though, i wouldn't suggest other developers turn their back on Bootstrap if that is what they are familiar with. Its adoption has reached a point where the resources surrounding it are unmatched.
If you are comfortable with bootstrap, stick with it. If you are like me and have a bit of contrarian in you, give Foundation a try and see if you prefer it.
Beyond these reasons, though, i wouldn't suggest other developers turn their back on Bootstrap if that is what they are familiar with. Its adoption has reached a point where the resources surrounding it are unmatched.
If you are comfortable with bootstrap, stick with it. If you are like me and have a bit of contrarian in you, give Foundation a try and see if you prefer it.
Something to take note of is that zurb grid foundation has ballooned over the years, it used to be way more minimalistic and more modular than bootstrap. Bootstrap and foundation have stolen things from each other over the years and they are very similar today, but generally foundation styling is more subtle and I think that is what he is getting at. The ability to be unique with less effort than you would need using bootstrap.
Also Foundation has a superior grid layout system last time I checked, but dont quote me, I have not looked into bootstrap 4
Also Foundation has a superior grid layout system last time I checked, but dont quote me, I have not looked into bootstrap 4
There is also Paletton: http://paletton.com/
Hey Ben thank you for your article. I've been thinking about the same, I feel I am much more qualified in the programming part but I really want to make good design as well. One thing I've been doing is buying html themes from sites like themeforest and adopt them to the framework I'm currently working in. These themes are not perfect, and often I have to fiddle around with their code. But the design is usually very good and done by people that are much more experienced than me in UI design. This stuff takes practise. It's almost like expecting UI designers to be able to code well. At the same time I learn different UI tricks by looking at the code.
There isn't really much in that post for you of you are not HTML guy.