Product landing project - PerformDrive - feedback welcome

3 Likes

This is awesome! It’s very rare I see a good design AND good HTML! I would recommend moving onto prototyping your designs with Figma(a really awesome free tool that allows you to make website replicas as mockups without any code). I learned how to code first and my designs were good just kinda stuffy. Prototyping them like this really turned me into a designer. It’s gr8. Also check out Google’s Material Toolkit, great icon set as well as an awesome color palette for your designs(which Figma also provides as well). Both free, both will improve your design skill!


3 Likes

Also, one more suggestion for the design: try to use some depth with box-shadows and some soft borders. etc. Really accentuates designs well!

dude how did you get so good at this?

1 Like

Practice Practice Practice Practice Practice Practice Practice Practice Practice Practice Practice

How to see any size you want instantly(on Chrome):

Ctrl + shift + i or right click(cmd click on mac) > Inspect

Orange Arrows: The media query breakpoints set in your CSS

It also has preset screen sizes, the one set in the above is the iPhone 7.

Hope this makes your life easier :stuck_out_tongue:

@yoizfefisch This is nice and you completed and shared it before the deadline in the correct way. I like the animations. Great work! :fireworks: I’ve been thinking about possibly using some animations on the next project since we do learn them in the fCC beta curriculum and I definitely need the practice.

Like the others mentioned, the design is nice. I agree with @krisb1220’s and @camperextraordinaire’s suggestions for improvements. Here are mine:

  • Color Contrast: The paragraph text under the txt-fig-text class (starts with With speeds up to who knows...) is just below the accepted ratios for regular and large text. When this happens to me, I go to ColorSafe to find similar colors that have enough contrast.

  • Responsive Design: Most of the design works well except for around the 650-700px width, as @camperextraordinaire points out. Another tool to use when gauging your site responsiveness is the Material Design Resizer. You can see an interactive example of the way the site looks at the 720px width at that link. Overall, the site looks great on most viewport widths and I love that you took a mobile-first approach! :clap:

  • HTML & CSS Validation Erros and Warnings: There are a few HTML & CSS validation/linting errors and/or warnings you may want to resolve. Some of the CSS warnings are related to overqualified selectors.

Those are the main things I’d suggest focusing on. :sunny:

1 Like

@krisb1220 Thanks for your great feedback :clap:.

I was actually playing around with Material Design but couldn’t figure out how to apply it to my project. I am strongly doubting my abilities in visual design, it’s definitely not my strong point :blush:. In the HTML/CSS projects I am focusing on getting a working project that passes all tests, and is truly responsive and accessible.

If you can point me to something specific that you think my project can benefit from these 2 tools, I would love to hear and will definitely try to apply them. (Maybe one day I will be a designer after all, who knows? :man_shrugging:).

@camperextraordinaire Thanks for pointing this out, I fixed it by adding margins to the labels and inputs. Is that a correct method, what do you think?

@deedee Thanks for your encouraging words :smiley:. If my project inspires you and you feel like it takes you too long to get your own off the ground, keep this in mind: This project took me over 50 hours! Many of those before I saw anything resembling what I wanted it too look like. Don’t give up!

Figma:

Get all your design ideas out without ever touching code. If you decide you want to drastically change something, there are times where you have to change/write a bunch of lines just to implement one thing. Using a prototyping tool speeds up how long it takes you to design something, allowing you to get more ideas out at once which will lead to you learning quicker & more about design as you go along. I started using it about 2 weeks ago and I’m not kidding, once you figure out how to use all of the tools you can build a prototype that looks identical to something you would code. Knowing everything you’re about to design and EXACTLY what it’s going to look like will clean your code alone.

With Material, it provides a style guide, prebuilt components for you to ping inspiration off of, well over 100 SVG icons, a color palette of at least 50 colors that will always display well(as long as certain no-brainer rules are followed). It also came out this year, so this is only the beginning.

I’m actually writing my second Medium article on using Figma and Material together to not only speed up the design process but to become a better designer. Bit busy launching my new website, but I’ll definitely comment here or PM you or something for a more in-depth analysis & a tutorial for using both when that comes out :smiley:

The layout was pretty good. However, some of the colors were really bright. There’s quite a lot of green, and it would be nice if they were toned down a bit. I found a nice site if you’d like some color scheme ideas.

1 Like