Web development / Designing of webpages

[Joriku]

So,
I've always had this issue of being dumb. Now, when it comes to web design, you create a new white page and it's finally time to design. What do you guys do and what tips and tricks to get decent design ideas can you guys with experience give out?

I'd like to get my design skill up by a lot, so what I did/used to do was.

Those images are used from a school project I created
1. I open up paint before anything, started thinking of what do I do?
2. thought of what I need, and made a bad skiss of the idea I had in mind.


Now, when it comes to ot server design or page design. Once I open up that white page, I get stuck thinking WTF do I do since my old way is no longer really used. Is it a good thing to use and should I continue on with that to get better at things or what do you guys suggest?

Now, one last question. Do you start with responsiveness (so phone first, working up to desktop) or do you start with desktop and downgrade the layout?

Thanks in advanced

 

[Beo]

1. Wireframes are useful to plan what the layout will look like
2. Colour scheme and logo decision
3. In terms of responsive, build the site using bootstrap, it’ll save you time and a lot of headache

No idea if there’s something better than bootstrap, I don’t build web applications much anymore and when I do, I just use bootstrap

Good luck!

 

[Fjorda]

Please don't use bootstrap, there is already enough bloated OT sites out there that take 10 seconds to load the 500 unnecessary libraries and frameworks.

It's easier to learn simple CSS than to study the bootstrap documentation...

Also, to answer the last question, all depends on your target audience. If I was making an OT aimed at BR's (+ uses android client), I would make the layout mobile-first, otherwise I would just focus on desktop, and make some simple media min/max-width queries.

 

[Beo]

Please don't use bootstrap, there is already enough bloated OT sites out there that take 10 seconds to load the 500 unnecessary libraries and frameworks.

It's easier to learn simple CSS than to study the bootstrap documentation...

Also, to answer the last question, all depends on your target audience. If I was making an OT aimed at BR's (+ uses android client), I would make the layout mobile-first, otherwise I would just focus on desktop, and make some simple media min/max-width queries.

I mean, I’ve used bootstrap on multiple projects that were quick turnaround and never had load issues xd

But yes the other alternative is use your own css with media queries

 

[lursky]

Please don't use bootstrap, there is already enough bloated OT sites out there that take 10 seconds to load the 500 unnecessary libraries and frameworks.

It's easier to learn simple CSS than to study the bootstrap documentation...

Also, to answer the last question, all depends on your target audience. If I was making an OT aimed at BR's (+ uses android client), I would make the layout mobile-first, otherwise I would just focus on desktop, and make some simple media min/max-width queries.

I'd go with Tailwindcss instead but idea is still not to waste time on producing simple things and save time to work on really challanging things.
It just reduces the cost of developing site and gives you compatibility across different platforms (as none would wait months for concept).
As he mostly talks about prototyping using such libraries would make it much easier as he's having problem starting.
btw. working with bootstrap is not always nice but Tailwind comes with very interesting solutions to these issues (and it supports tree-shaking):

Reusing Styles - Tailwind CSS

Managing duplication and creating reusable abstractions.

tailwindcss.com

As it's almost certain that you'd run into troubles (having it work across many platforms) writing layout styles on your own.
Especially when you're not experienced and having trouble to start doing anything
But ofc. you'd need to also learn basics of CSS (cascading, selectors etc.)
And yeah ofc. it's kind of unfair comparison of these two technologies (from obvious reasons) but anyway it was about making life easier (when it comes to layouting)

 

[Joriku]

I'd go with Tailwindcss instead but idea is still not to waste time on producing simple things and save time to work on really challanging things.
It just reduces the cost of developing site and gives you compatibility across different platforms (as none would wait months for concept).
As he mostly talks about prototyping using such libraries would make it much easier as he's having problem starting.
btw. working with bootstrap is not always nice but Tailwind comes with very interesting solutions to these issues (and it supports tree-shaking):

Reusing Styles - Tailwind CSS

Managing duplication and creating reusable abstractions.

tailwindcss.com

As it's almost certain that you'd run into troubles (having it work across many platforms) writing layout styles on your own.
Especially when you're not experienced and having trouble to start doing anything
But ofc. you'd need to also learn basics of CSS (cascading, selectors etc.)
And yeah ofc. it's kind of unfair comparison of these two technologies (from obvious reasons) but anyway it was about making life easier (when it comes to layouting)

Thank you for your advice, both of you that is.
I tried using Bootstrap, but figured that it be easier to learn CSS responsiveness before trying an different engine such as trap. So I'll do manual css for the responsiveness.

One thing I like to do is mix normal with boots, makes grid and simple stuff easier to use by just porting them in, but yeah. Loading all of that to use it here and there, It's alright for the moment being.

1. Wireframes are useful to plan what the layout will look like
2. Colour scheme and logo decision
3. In terms of responsive, build the site using bootstrap, it’ll save you time and a lot of headache

No idea if there’s something better than bootstrap, I don’t build web applications much anymore and when I do, I just use bootstrap

Good luck!

I'll check out Wireframes, that looks like a simpler approach then my method.

I am currently creating a layout, I'll make a skiss using wireframing and see how it goes.

For now, in a rush to get to work. Thanks both of you, any more tips are welcome!