do you style as you build or build then style
when building a new product, do you polish your css as you create the features, or do you blast through all the features (front to back) then come back and style everything ? why ? have you found one to be more efficient than the other ?
Depends on your motivations. I'm motivated by creating aesthetic and interactive experiences, so the opportunity to dig into styling and animation is what helps me keep going on the other 'boring' work.
True. This really helps me at times. :)
ah interesting.. yeah seems like how most people work; by what's engaging for them. I find that styling drains me so I'm always looking to alternate it with more biz-logic or backend type of work
I tend to start with the basic layout. It gives me an ease of mind, things look clearer and it feels a bit more like a real thing. Once I have couple of pages I start to work on more specifics (buttons, color, fonts etc.) and change as I go.
yeah for sure a basic layout at the start should be a given, it's the little fiddly css that i was wondering about... but yeah i do the same, few pages in I go back, also helps keep the type of work changing, to not get bored, as some of the other comments mention
I make a picture in my head and then start to build.
If there's something I don't like, I start over. One thing is for sure, UX and accessibility is very important, and I put them first of anything...
Also I collect inspiration and put on a Figma project..if you need help with anything let me know.
This are my projects.
Colorsandfonts.com
Wickedtemplates.com
Unicornsfeed.com
so you just purely build off of a mental image ? without even a napkin sketch ? haha if yes, then dang, that doesn't sound easy. I find that I need to lay down the basic structure somewhere in a drawing/sketch..
and sweet projects right there 👌 definitely might make use of the colorsandfonts one
Yeah, no napkins. Nothing for me.
Ot feels like I am loosing time, soon as I have something to be able play around I deploy.
This is what colorsandfonts looked the first of january.
And here is wickedtemplates.
Guess there are a couple of ways to go around this and different people believe different things but I personally think the proper way to go is to:
1)Define product & features on a document
2)Think about UX and site navigation(Where each page should be connected to)
3)Sketch on paper or prototype online your product(Depends on how motivated you are.)
4)Build the product & features on a simple 'skeleton' with no CSS
5)Start designing and connecting elements based on your initial sketch/prototype
For sure you should go with at least an initial design plan or things can get pretty messy and may end up wasting more time by causing you to redo site layout or design
yeah the first two steps should be a given I think... i mean you can't start building something if you don't know what you're building haha.. I thought step 3 was a given as well, but seems like some just build off of a mental image.
As for 3 and 4, like I said on another comment, I read somewhere that it's more efficient to build then style ? since the human brain has to shift gears between logic and design / optimisation, which might be inefficient ? I'm not sure about that but thinking about giving it a shot..
I usually just fiddle with the css as I build features, but I do feel like my process has some inefficiencies.. specially because styling can suck me in like a black hole, fiddling away for hours
Depends on the situation whether the styles are essential. I started with quick hacking some stuff together, later we wrapped Material-ui components which allows us to have quick nice look of everything. But we could still improve on stuff. In our recent talk, we summarize how the look of our application evolved.
yeah for sure depends on the situation. I use material-ui components at my day job, but man I find their css api to be extremely confusing, with all the class names haha.. to be fair though the components are of a very high quality.. but I find them frustrating to customise
As a material-ui noob, I second this CSS frustration.
Components look good but I would sometimes prefer them to be written differently. But I wrapped most of them to work nicely with Clojurescript and Reagent, so they don't have any state and are connected to the rest of our system. I do styling manually using CSS overriding some of their pregenerated styles. Doing all these wrappers took about a month and customizing for a different look wouldn't be that difficult.
At GorillaSite we first design everything in sketches using Figma, we define the styles and then we build from scratch using Tailwind and everything custom.
These are the latest work we have done with this process:
You can try ProgressiveWines with this access code: F2BC
And tell me what do you think about the login experience we developed :)
Among others...
man good stuff! the progressivewines login was awesome, and the aurorafestival is very eye catching and unique...
you make detailed high-fidelity wireframes with figma before you write a single line of code ?
@armouti Thank you very much for your comment!
Yes, we worked on full prototypes in Figma before writing a line of code with our UX / UI Design team. After that we solve the frontend with whatever is necessary.
We usually do it with Tailwind + JavaScript <3
I usually start by defining features and getting a rough sitemap in place. Then I create wireframes. Then I usually create a visual mockup for the homepage. Depending on the size of the job / amount paid, I might mockup other pages and individual components as well to allow for client input. I used to design as I went, however noticed that development time was cut down drastically when I created a polished design first.
It also makes it easier to keep the client up to date and involved in the process.
that's very interesting, so you create a fully designed app/site that is completely non-functional, then go back and add in the logic ?
Yes that's right. We know the goals and aim of the website / application before creating it. You are aiming to fulfill that at all times. Sometimes the design can influence the logic, so it makes sense to get this sorted to begin with. If you start with the code, then the solution can veer away from the ideal solution for the end user.
I tend to balance the two. I'm really lazy and get tired of things, losing interest really quickly. Since I know myself I try to avoid that kind of feeling and something that works for me is going for the low hanging fruit. When you see results often dopamine keeps going and you tend to stay motivated.
So, I would start with the project scheme, then maybe a simple landing page. Maybe at that point I feel like that dumb html should do something and get some controller going. Then I realized I have some functionality that I cannot see and go back to the frontend to connect that use case. You get the idea.
That works pretty well for me. But everyone is different anyway!
yepp same here! going for the low hanging fruit keeps me going... funny that someone else does this too
I start with the content, lay it out in the web page or app, and then polish how it looks.
I've actually read somewhere that this way is better for productivity, since the human mind has to change gears between logic and styling and that can slow it down ? Not sure, but I'm thinking about giving this a shot, just build without styling, then go back and style everything
It depends on how well I know what I'm building. If the what is straightforward and there's little unknowns then I style as I go.
If I don't quite know yet what the solution to build what I'm trying to build looks like, I follow this list:
This helps me validate a given solution as fast as possible (because I might need to try a few before I find the one that actually works!) without wasting time on styling I would have to re-do.
I create a barebones prototype in App Drafter
Then in its "Previewer" -> "Save as PDF" and import that PDF into a graphic design program. That PDF is an editable starting point.
Then instead of using App Drafter (I work there btw) I repeat the Save to PDF and import several times using the actual in-progress app.
This comment was deleted 4 years ago
where does it come into it for you ? I mean for me i usually can just do with a napkin sketch or low-fed wireframes, build that, and fiddle with the css as i go along
This comment was deleted 4 years ago