So, I’m trying a new workflow that I came up with yesterday that seems to be working for me. I’m deciding exactly what I NEED in a page first, Then doing a layout that makes sense and is responsive, then I’ll add my design elements to an already responsive page. Is this a bad way to work? Any foreseeable problems? Any feedback is welcome. Thanks.
First I added the elements that the customer, or I need.
Check this with the tests. It passes all 17 and I’ve done nearly no hard coding.
Then I added a Grid layout to my elements, which makes it responsive, natively. See here.
Then I started adding some of the data and values in and am going to start styling with color and fonts and images next.
This is where I am now.
Thanks for your time!
It looks okay but the colors are too bright and dont fit well together. you can visit color.adobe.com to get a better color scheme. your form could also use some padding, its way too close to the border. The header has a lot of whitespace and the font is the same throughout the entire page. here’s a preview of what it could look like
Lol. Thanks. The colors are just background-color placeholders so that I could easily see the actual container sizes when using Grid for the first time.
I’ve done no styling or coloring of the form yet. It’s a nice way to see your containers when using Grid by giving them all primary colors.
But, thanks for looking. I was just asking for feedback on responsiveness and structure, and the workflow that I’ve decided on( elements, Layout, style). I haven’t done the style step yet.
Thanks again for the feedback.
I didn’t look at your preview because I know what it can and will look like. I just haven’t started styling and wouldn’t want your idea to bias my decisions before I’ve even made them. But, I’ll look after I’ve styled it and picked my colors, added padding, margins, fonts, etc. NONE of that has been done yet. Haven’t reached that phase of the design.
Also, I use http://www.dasplankton.de/ContrastA/ for color picking. Thanks again.
I basically work this way as well! I start with just the raw html. See where everything will go, add as much lorem as I think my actual text would be, stuff like that.
The only thing I don’t do, and maybe should do, is make my work responsive before styling. I mean, I guess I do in a way, but more often than not, I think of some other style or element that I want to add and then poof! I gotta think on my feet again with the responsiveness.
Then my ultimate styling of what font style to use and what color scheme am I sticking to.
From what I can tell with your examples, everything looks responsive and works well. The only thing I ask is why put your survey desciption to the left side of the screen? I mean, it is different than other peoples, but its not how traditional surveys go…unless you’re just using it to check the responsiveness. If that’s the case, cool, it works!
Thanks for the feedback. Glad to hear that I naturally stumbled on a workflow that makes some sense so early in my journey. That said, I don’t really subscribe to the whole “traditional” idea of design, first of all. Secondly, It helps to fill the dead space that most survey form projects suffer from. Also, it will help to keep it all to one page with as little scrolling as possible.
I actually work on MTurk, filling out surveys for a living and, funny thing is, there’s no standard survey form format, anymore. I do 50-100 surveys most days and I probably see half as many different displays. They’re changing all the time now, since the current, most frequently used, format is just a holdover from when we still printed them on paper. But, when I’m cranking out surveys every day, one of the most annoying things is having to scroll to see the last question or 2 because someone decided to center align the whole thing and run it like it’s coming out on 8.5x11 sheet of paper.
So, tl:dr reasons are single page(minimal/no scrolling) and to fill “dead space” It’s also because my description is going to be longer than standard forms usually are and it would have made for too much scrolling.
As far as responsive before styling, for me I mean, making the layout responsive. Then general page styling, then element responsiveness tweaks(additions), then styling for those elements.
I really appreciate the input. We’ll see when she comes out, how it will be. It’s simple enough to change my grid-template-areas and go “old school” if what I’m doing doesn’t work.
TL/DR It’s gonna be the wave of the future. You don’t get noticed for making the same looking survey as everyone else, with different colors. It’s worth a try.
You’re absolutely right, dude. I guess I was going traditional for mine bc A: that’s all I know/see… and B: because I’m still pretty new to it all. But I should challenge myself and my layout forms more often. I kinda sense I’m in a loop of ordinary instead of original and I gotta change it up to stand out
Thanks for giving me your perspective. It’s refreshing and straightforward. Now I gotta get a bit more creative
I don’t think there is any problem with it. Actually am adopting it for my next project. And I can’t wait to see a completed piece of this project. Big up dear…
too funny, nice. I also like to use place holder colors to see how my layout is going
Hey guys! I think I’m putting a pin in it and calling it done.
Super happy with the results, for 11 days of coding!(3 days on this project) I know it could use more work for commercial use but, It passed the test, does what it should, I think.! Feedback welcomed!
Wow… This is beautiful. I liked the way it responded well to mobile viewport. It’s very good. May be my personal preference, I like it when all form fields are having the same width but still looks nice as it is now.
I liked the Amazon “a”. Indeed 3 days were worth. Let me wait for the next project.