Hi there. I’m just looking for some feedback for a project I’ve been working on. I’m trying to improve my skills, particularly designing responsively and site performance.
If anyone could give me some feedback on design, performance, structure, anything to help me optimize it. I would be most grateful. All i have is a friend saying they can’t scroll down on the site. Anyone else having any of these issues? I’m new to using locomotive scroll but it all works on my M1.
Thanks a million.
Design is great, but the load time is too important. You need to improve performance. It took me a good 30sec before the content appeared. I just had the mouse and the nav button before that.
After the first content is loaded, it’s still slow and laggy.
Looks like the main reason is you need to improve all your images. Just the one with the rocket exhausts is 3.9MB. This is making your site way to heavy…
Thank you Pasint. Really appreciate the feedback and getting back to me. I do struggle with page limits and performance. I’m always drawn to the design side and not very technical. But I know one doesn’t work without the other.
I use minifed to reduce image sizes, but clearly not enough. I’ll go through them all and see if this helps. It’s a shame as it always runs smoothly on my device then I hear that’s it’s slow and laggy. I’m just about to do Flux’s course on the process of web design and designing first through Figma. Hopefully, this should help with forming designs around performance.
If you or anyone has any link, advice or tips to improve this side of my designs I would be really grateful.
Thanks again for your message.
Before trying to compress images, try to size them better first. The one mentioned is 1847px large, that’s probably 3 times what it needs to be. Also there’s no transparency, so PNG is not essential. You’ll get it lighter using JPEG. Once this is done, you can lower the quality to compress is more. In this particular case, I think you should be able to have it at no more than 150-200kb. That’s 20x less than the current weight… Check all the other images and you’ll have a much better experience already.
Aw thats awesome Pasint! Thank you so much. I take it you just reduce the size of the image through figma or some other external app before it comes onto webflow? I tend to set a background to a Div block rather than IMG inside a div. Would this make a difference to how it is sizing? Sorry to be a pain. I’ll look into this all through the forum chats and research on YT.
Thanks so much though! Thats already valuable knowledge I didn’t know.
Hi @Gareth_Ellison me feedback will be more from costumer point of view.
First I would like to mention one thing, do not underrate your self in first sentence. The words “surprisingly low prices” let most people thing that quality can be questionable. The human mind is set way “what is cheap is not good” and you are trying get companies that do not care as much about money when is come to quality. So If you really need to mention pricing you can change it to something like “competitive price”.
Secondly If I would be looking on your website the most important for me as potential client will be showcases to see what you have done and that part is missing so I will move to somewhere else.
About content: As potential client I do not care what tools you are using when result fulfil my expectation. If client will come to your website he/she already know what they need and explaining why on 3-4 sections is not necessary. This lead me to next thing that all sections are way too large and to get to your contact took a while as scrolling is endless and in middle I almost give up.
I would not judge design as everyone has different vision about how landing page should look like to make potential client get in touch and generate money.
Pricing section should be more clear what this price mean. I suggest that it is starting price per hour and not per project.
Overall page load fast in for me on desktop (fiber) on mobile is took about 3-5s to show first content (images) and I had no problem to scroll down. Only nav was hiding all the time so I had to pay attention to keep it open be able to click on it.
IMO your website should be more compact. I will stop here.
Yeah, Figma, XD or photoshop or whatever you are using the most. I use those to resize and generally recompress the image after with Optimage to get it even lighter.
BG to a div is cool, that works and can make it easier for some responsive configs. The idea is just to get the weight of the image down as much as possible, while retaining decent quality.
Thanks again Pasint! So very helpful for me and will help my designs now when I build.
Hi Stan. That is so so helpful as well! I always appreciate it when people tell it like it is. I’m sure with your experience you will have a better understanding of what attracts clients. I am just after reading a really cool article about the importance of case studies and testimonials and how you frame them. So I will get to work on adding them. More importantly, add them at the start of the site. I think I’ll shorten the tools section or take it onto a further page in which case. Thanks for the info.
With regards to the pricing, that makes sense. My concern was that I would only be attracting new businesses with a limited budget because of my lack of experience. So I was trying to aim the site at them. I’ll frame this much better as to not devalue myself. Thanks for the tip. The prices were for basic websites. I didn’t want to charge too much as to deter people on a budget. But maybe that is too low? Plus it takes me an age to build websites at the moment!
I’ve taken note of compacting the page more. It is a lot of scrolling and maybe gaps are too large between sections as well as large sections. I always like to add a little anticipation for what’s coming next so leave a slight gap enough to have some blank space. I’m not sure if that’s good practice or not?
And you shouldn’t stop there! These messages from you both have helped me tremendously. So thank you again for taking time out and giving me all this feedback. Exactly what I’m looking for.
hi @Gareth_Ellison so you can mention then you’re focused on small to mid business
If you are student living with parents not paying rent, bills etc. have everyday full fridge as parent will take care about it and all you need are some pocket money then… But if you thing that you will do research, create design, build and publish for 110 bucks you pushing your self into big troubles.
Do for you simple calculation how many hours it takes to have it done and after divide 110 by this number to get what you will earn per hour. Charging per hour is not best practice anyway the optimal way is to charge per project as each project will have different levels of difficulty mean different time to finish it. There is way more you should to learn about business it self to be able set your price on market.
I know that is hard to start but do 3-4 case study projects as showcases to show your skills and add links to these to your website.
Hi Stan. Thanks again for the reply. I’m eating into your time here.
I’m not a student, nor living with parents. I’m 41, and bloody skint! I just knew I couldn’t provide some of the higher-end websites that designers build on here. Maybe £100 is a little low. I was starting off in Fiverr for £25 a site just to gain some experience. But need to make some money! I think once I master responsiveness and site performance etc I’ll hopefully have more confidence in my ability to charge more. I’ll maybe increase those prices however. Also hoping Flux’s course will help my skills and increase prices.
I’ll add the projects and get it on right away. Listen thanks again for your time and knowledge. It helps me, and probably so many others, so so much. It gets a little overwhelming when you first start out.
Thanks a million!
Hi Pasint. Just done the first image you recommended. Took it from 3.7MB to 238KB! Obvious to more experienced designers, but to me, a game-changer! Thanks so much! I just thought all you could do is put the image through one of the apps to reduce size. Had no idea about resizing in terms of dimensions of PNG to JPEG would make such a difference. Thanks so much!
Now just need to change the structure, compact, some content and wording, projects. Really helped me out!
Thanks again to both!
Hi @Gareth_Ellison I do not know about this course but as WF is just GUI you can take any course about HTML, CSS. What I mean you can learn basics and advance techniques of CSS on YT for free as this is all you need to understand responsiveness.
Once you will be pretty good in understanding how to use CSS you can design almost anything in WF with none or little of custom code. When you will earn any new CSS knowledge you can try to apply it in WF and WF university is great place to learn how to use this platform.
Hi Stan. I did start a little light coding but then concentrated on the design side of WF. But I’m starting to understand the importance on getting a handle on the basics of code in terms of ‘how’ you design. Performance and responsiveness as you mentioned would fall into line. Flux course is just more about the design process. It teaches you wireframing on Figma. Basically putting a structured design process in place. I thought this may also help to get the fundamentals of my designs right. I guess it’s a steep learning curve. But today has been in a huge help in terms of structure, content and design. Even things like making contact more accessible and how I format the page.
Anyway thanks again for all your help, and hope I didn’t detract too much from your own work. Really appreciate it though.
hi @Gareth_Ellison do not worry I’m always happy to help and share.