nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Why are my designs rubbish?

Some_randomer

So I'm a long time developer that has finally decided to learn some design. My skills already include html and css / Bootstrap, in that I can manipulate elements and move stuff around if someone has already created the layout.

However I've spent the last couple of months on and off trying to improve my actual design skills - so create a web page from scratch rather than copying and pasting what's already been done, or using a Bootstrap template etc:

https://cb-design.github.io/abc-arch/index.html
https://cb-design.github.io/abc-arch/index2.html
https://cb-design.github.io/abc-arch/index3.html
https://cb-design.github.io/abc-arch/index4.html

I've been playing with a fictional architecture web page and the idea was to use a couple of images and overly them with text, also play with the opacity etc. But no matter what I try I think it just looks a bit rubbish.. what am I missing? Is it reasonably good, or how near / far is it to what a proper web designer would do?

Can anyone recommend a basic but good guide for design newbies?

Tia

Find more posts tagged with

css

web design

web design advice

html/css

Quick Links

Comments

S.M.B.

I've been doing front end development for years and feel like I know what's good design and what's bad design.

However, give me a blank piece of paper and I struggle.

There's been a massive influx of web dev boot camps over the past few years but I am not aware of too many that focus on UX / UI Design.

A lot of Web Design courses teach you about CSS / Bootstrap / WordPress which to me is far removed from the skills someone needs to design websites.

The naming of this very forum highlights this as it's often used to discuss all things web development as opposed to actual design matters.

I do know someone who I believe did the graphic design course with Shaw Academy and ended up becoming a very talented designer who works in the digital space. But even a course like that is a starting point where you only get to grip with design fundamentals.

shane7

For my first year or two I only designed in HTML and CSS. I never touched a CMS like wordpress and to this day I still don't use bootstraps. I know bootstraps would probably speed up my workflow but I'm so used to designing my own CSS code now I don't think its an issue. I'm 100% self thought using youtube and lynda.com I've never set foot in a class room. I design my sites in html/css and use php to re-code them over to Joomla. I have my own business now and get to work from home. So if you get your head in the books and keep at it you will quickly see your design skills improving

But my advise to you would be to find a couple of websites you really like and keep practising and practising till you get something similar. I would focus heavily on your column layout so you become more proficient at manipulating your page layout.

It always amazes me the amount of web designers who haven't even designed their own website they just use a wordpress template if only their clients knew. The majority of my competitors all have wordpress themes as their main sites it beggars belief. Anyway that's not a route I would advise you to go once you become proficient at making your own sites it will help you stand out from the crowd.
I'm based in Wexford if you are ever down this way I would have no problem meeting you for a few hours and giving you some good starting points. But a membership on lynda.com would be a good place to hone your skills.
Do a responsive webdesign course, css course and maybe a photoshop or illustrator course too. Lynda.com has loads of courses and last time I checked the first month was free so no harm giving it a bash. If you have any questions or would like to see some of my source code to help get a better understanding then feel free to PM me

beauf

Some_randomer wrote: »

....I've been playing with a fictional architecture web page and the idea was to use a couple of images and overly them with text, also play with the opacity etc. But no matter what I try I think it just looks a bit rubbish.. what am I missing? Is it reasonably good, or how near / far is it to what a proper web designer would do?....

https://en.wikipedia.org/wiki/Aesthetics

Your design is like a faded copy of the typical WordPress template.
Do a graphic design course, especially something with a lot of typography.
You need to go look at art and design, then come back and look at web design with a new perspective.

You have the most important part, a sense that something isn't working for you visually. You need to go off and learn how to use that...

Good design takes, an eye for design, technical design (not web) skills, and a lot of hard work. Most people stop at about 10%. A good designer will go way past 100%.

The Art College Degree shows start soon. Go wander around them.

beauf

Of course some people just have an eye for good design. A lot of it can be learn, but there's a certain amount of it that can't.

Coinsguy

On mobile its hard to read the text, that's the basics in fairness. Black text on images that have dark backgrounds at times, then in another you've white text on light backgrounds.

The last link is all over the shop on mobile too. 2 very obvious things that I noticed at a glance.

Some_randomer

shane7 wrote: »

I'm based in Wexford if you are ever down this way I would have no problem meeting you for a few hours and giving you some good starting points. But a membership on lynda.com would be a good place to hone your skills.

Thanks for the offer Shane much appreciated.

When I started I thought all I had to do was take an existing image and overlay some text on it, play around with the opacity etc but I'm seeing now that there's more to it than this

vandriver

Black text over the dark lines of the fence in the first one render it hard to read.

beauf

It's not a great choice of font either.

A graphic design course would train your eye.

It would also teach you something about design language.

I did one recently on design for infographics or business graphics and realised much of it is the same rules and concepts as graphic design I have learnt over the years.

A lot of people doing web design do not have graphics training and it stands out like sore thumb. Most people don't realise why they prefer one design over another. But good graphic design is usually the reason. Also designing information layout and UX and UI design are separate skill sets. People like to call them the same thing but they are not.

Pixel Eater

I'm the opposite of you; know the design part but now trying to grapple with the more technical end of things.

If I may be so bold I have a few comments on your site: It's all very flat, if you don't mind me saying. The name of the company should probably be a logo or at least a logotype. Even a nicer font would improve things. The grey background is a bit dull, maybe a more vibrant colour or even a gradient or pattern would liven things up. The background photo is blurred and interferes with the text, consider changing that too.

beauf

Basically everything. Its a copy of other designs without knowing why they work.
That's just a matter of fact description of the design. There is no design.
It can be taught, the OP needs to do a course on the design side. Even being around creative people will give the OP a new perspective.

The example the OP has done, does suggest they have a good foundation to build on. In terms of design.

Some_randomer

beauf wrote: »

It can be taught, the OP needs to do a course on the design side.

You're right there is a difference between UI / UX and design which a lot of people don't realise. Can it be taught though? Even to someone with zero art or design skills? I can't even do a good matchstick man.
Can you recommend any good design courses / tutorials that might help a complete nonce to improve?

tricky D

I would suggest something like the following approach.

I would use something like a concert event over an architect firm for reasons that will become clear shortly.

Design is about what you give to the users to do tasks ie. solving issues. Aesthetics is about making it look good and I would leave that until later. So what do the users need? Bios, videos, news, ability to buy tickets, venue info. But hang on mobile is big and mobile users will generally be in a different mode to desktop users. Mobile users who are on the move are more likely to want venue info like parking and directions, over the other stuff, so you need to prioritise the content and functions accordingly. Avoid viewing mobile as an afterthought but more as an equal priority.

So you have 2 content and function strands. On a blank piece of paper write down the order and type of of content for the 2 user scenarios. Just 2 priority lists, nothing else. Then work out a desktop and mobile layout for these using just placeholders (boxes with 2 diagonal lines). The code that up into one html page with the content but using css to organise the content priorities for the 2 user modes eg. venue info low on desktop and high on mobile. Just do all this in black and white until you get the way the site works done.

Once happy with how it is working, then move to the aesthetic stuff. A good idea is to use a swatch for your colours eg. https://color.adobe.com/explore/?filter=most-popular&time=month. Then work out your typography remembering that contrast is your friend. Keep these bits simple to avoid the design becoming too busy. Then work in your images and AV media.

Rinse and repeat for other industry types.

Bear in mind, this is just one very simplified approach and there is plenty more stuff that could be included eg. factor in your SEO from the start - it is not an item to be left for a later stage. Other posters hopefully have different approaches which they can bring to the matter.

Lastly, I would not worry much about not doing stuff quite from scratch as you could find yourself adopting bad habits and it's less efficient.

beauf

tricky D wrote: »

...Design is about what you give to the users to do tasks ie. solving issues. Aesthetics.....

In a really good design they are combined.

Search for "Form follows Function is true for Websites"

https://en.wikipedia.org/wiki/Form_follows_function

tricky D

True but, I'm trying to keep it simple.

Most of the creative process involves a combination of 3 factors:

Design - solving issues/problems/needs
Engineering - making sure the solution is robust
Aesthetics - making it look good