Checkout out our new website! (created with Webflow)

Hello Webflow community!

We’ve recently launched our completely re-designed site! We’re continuing to make regular updates.
Feedback is greatly appreciated!

PS. Check out our tee movement!
Have a great day

http://webstrikeofficial.com/

1 Like

Nice and clean.

A few things that could use improvement:

What’s this? It looks like a mistake.

Your use of “|” pipes as a design looks forced and makes it look like a capital “i”.

Your hero shot of (i think its New York?) doesn’t help me understand, in 3 seconds or less, what you’re trying to sell me without words. Is this a website about architecture? Photography? Self-Motivation? If you’re a company about branding, show off how good your own company’s branding is in the header. Or at least the personality of your company. HEre’s an example: http://whiteboard.is/

Your second row is too far part compared to your 4th row and every row below it.

and lastly, your final call-to-action confuses me. “Welcome to Webstrike. BEGIN”. Begin what? Begin an online game? You need to spell it out more clearly. Also, the “or press ENTER” is kind of gimmicky and is not needed.

Please don’t be discouraged. This is ALL just constructive criticism.

Hope this helps =)

GL HF =)

2 Likes

Thank you for your feedback! @PixelGeek I’ll definitely understand what you mean. I have made some changes. (not live yet) But I will continue to improve the site…also the “Press Enter” for the start a project form is default. (not editable).

Thanks again for your feedback!

-Luis

@luis27, I would also take a look at the size of your images. Webflow should show you a size warning if your images are larger than 200kb, and these images may not appear on some mobile devices due to their large size. Also, for the blurred background images that you have in the top sections, the JPEG file format is much more efficient than PNG. You can use tools like http://www.jpegmini.com/ to really get the size of your JPEGs down so that they are delivered very quickly to all your visitors (on desktop as well as mobile).

Thanks for sharing that website! I will definitely use :smile:

I thought I would comment on some image tools I use in my workflow…

I use a few good tools in my own workflow that I would share, these are only available for the mac though (sorry windows dudes and dudettes) and all for low prices:

A. Re-size Sense

Re-size sense allows you to create pre-defined presets for different sized images, so you can create multiple image size presets that you want to convert to, and once you set those up, you can drag in a bunch of images and resize all of them at once to multiple resolutions at once. It is a real time-saver

B. Quick and Dirty

Quick and Dirty does a great job at image compression and will compress both jpg and png files. The nice thing on this program, is I can select any image, and do a one click compression and the the program auto close, so it is really quick to compress 1 or more images

C. OptImage

OptImage is a great program for batch resizing with good compression and supports png and jpg images. I just drag a bunch of images into the program main window and the software is automatically compress and keep the same image file name, so it is convenient and there is very little loss in quality, if any in the resulting compressed images

D. Fluid Mask 3 (also available for windows … congratulations !)

Fluid Mask 3 is a must have tool in my opinion, it makes the process of creating transparent images from any image, dead simple. If you want to use transparent pngs in your web designs, then Fluid Mask 3 is a fantastic program and has great functionality to very quickly create transparent images and backgrounds from any image.

E. Sketch

Sketch is a wonderful tool, that allows you to create vector graphics, and also supports EPS imports and automatically creates retina versions of graphics as well… if you are a designer, and you like to create unique vector shapes, you can’t go wrong with Sketch

Finally, you probably have seen those websites that have little images of the website inside of a desktop or mobile phone image placeholder… well did you know, that if you go to Google’s free page speed tool, that if you analyse your site, google will automatically create one of these little images for you, shown either in a laptop or on mobile phone, for example, if I go to the following url and analyse the webflow.com domain:

http://developers.google.com/speed/pagespeed/insights/

I get this back, after the scan is finished:

and

It is kind of a neat tool to generate these “website picture in a phone or laptop” kind of image, and you don’t have to do any work to generate the image…

I would love to hear what other tools people are using :slight_smile:

Hi @luis27, I have one small comment, really a tip … you see when you hover over the menu item, and you have the left border show on hover ? You see how the menu kind of jiggles a little bit and makes it look a little uneven when doing a mouse hover? You can avoid this behaviour with a simple little trick. Currently you probably have your css set so that the left border is shown on hover only. What you can do, to make that look a little cleaner, is to give the default state of the link a left border, and make that left border the same width as the left border on hover state. Then make the left border in the default state have a transparency of 0% so that it does not show on the default state. Then when the user hovers over the menu, the menu will not jiggle, and it looks a little smoother on mouse hover. also, you could give your nav links perhaps 5px left padding, so that the left border is just a little more spaced between the border and the link.

happy designing and like @PixelGeek recommended, have fun ! :smile: