Been learning webdev for past 4-5 months . I have no background in design or development at all. But i learnt from online tutorial and recommendation from reddit. Finally got a project to work for. Completed last week but i have no idea how it looks, it looks decent to me but almost everything looks good to me so i cant trust me.
i tried to apply all the basic design principle and things i learned from material design.
Any feedback on anything design, layout ,color, typography will be appreciated.
here is the link to website
someone reddit recommended to ask feedback on this forum you guy are great.
Thank you !
Honest feedback: This is not made for people to use it will only confuse them
there’s much to learn there
Thanks for the feedback. Anything specific i should be looking for and what will confuse people. Just want to narrow it down so i can work on my skills step by step.
This works really well on my phone, it’s very easy to use.
Few things at first glance:
With the articles, I’d tweak how you’ve used the cards. I can’t read devanagari so I’m assuming what each block of content is, but you have the lede and the content split into different cards, and the image outside of the card. I would either take the lede/content out of cards, or put all three things into a single card.
Edit: this is the part of the design I mean
Edit: very minor, but looking at that image, the I on on the left of the nav isn’t aligned with the sections list
I’d also try to make the associated articles more seperate, visually, they kinda run straight into the article itself.
Maybe a test data thing rather than design, but I’d want the associated articles to relate to the main article a bit more
The tags look like buttons, so it’s slightly confusing that they’re not clickable and don’t go to the category they relate to: I’d adjust the design a bit so they don’t look like buttons.
From a dev PoV, something you.may have looked at or maybe not (apologies if you’ve already done something similar): I’m on very fast WiFi and a quick phone, and it’s extremely smooth. If I was developing it, I’d want to see how it performs when it has to make lots and lots of requests (it’s a news site so this will happen) on a crappy phone. There are a few test REST servers on NPM that you can use to do this locally (and you can generate vast amounts of data for it with Faker). You would generate the data, save it as JSON, then tell the server to simulate a bad connection and connect your app to it.
Thanks for the feedback… Honestly i considered making those category clickable for that specific page but then i forgot about it . Really helpful feedback this is …and about that dev POV . I am just serving this as a static files created by gatsby with strapi as a cms for those articles. I have no idea how i can implement what you suggested on REST server on npm thingy but i will have a look and also try to run this on a slow network. Again really appreciate your feedback.
I didn’t know much about Strapi, but afaics from looking at the docs you can just fill up the local version you have. There are a few libraries to generate data – Faker.js is most widely used.
Simulating crappy connections is probably the most useful thing. Basically, you can put something in that sits between the local database and the app (a proxy) – there was a thing called Toxiproxy I used years ago and it was good, but it’ll be worth digging around in Google to see what there is.
Because it’s Gatsby, it’s a wee bit different to how things normally work, so might not matter so much (it’s building a static site each time), so possibly ignore this atm – it is a thing I think would be good to look at though, as being able to test how your site works without needing to deploy it somewhere is incredibly useful (it’s just a little bit of a pain, as you need to figure out the best way of testing, then create data format that matches how thing should work)
There’s a load of other things you can look at from a purely UI point of view. For example, generate articles with huge titles, generate ones with small titles, generate really long writer names, generate long category names, etc.,and see what breaks the UI.
Yes i read an article yesterday it was something titled as “just in case css” …basically describing what you are saying about testing ui things with a really long title and stuff. I have yet to test those.
And about slow connection i might sound noobish because i am but doesn’t dev tools have a network toggler where you can make your connection really slow to check on slow networks.
I am looking into injecting fake data to test things out and ui just in case stuff .
Link to the article if anyone intrested
Yup, it does – it’s quite blunt, though it will certainly do perfectly well for what you want. What I wrote was a bit of a brain dump based on things I have in front of me – it’s massive overkill for what you want, so apologies for confusing things, I hadn’t really looked at how Strapi does things. Basically two key things:
- Fill up the Strapi dB locally with lots of stuff. With a news site, there’s gonna be a lot of content, so you want to see how the UX works with that (how do you find things when you have lots and lots of text content that uodates regularly?)
- Use the devtools to simulate different browsers and network connections
Maybe ignore what I’ve said re that unless want something a bit more granular – basically what I’m talking about is kinda a step up from that, where you basically have something that doesn’t just have “slow connection” for everything, instead kinda randomly does bad stuff (some things might take ages to load, some might look and straightaway). It starts getting a little more complex to set things up, basically, but then simpler to do lots of tests once it is set up.
Totally understandable what you are saying … I looked into toxiproxy and found some other like clumsy and fiddler or something. It might be a overkill for now but will look into it as this website grows over time .
A post was split to a new topic: Feedback on this website