How do I make this website better?

The left and right containers will both have different text, but more like a list. Additional information: The page also has a parallel effect at the start, and we have good programming skills. Thanks in advance.

(1 votes)
Loading...

Similar Posts

Subscribe
Notify of
3 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
regex9
11 months ago

It would be good first to put a few basic questions into the room on which the page can be better described.

For example:

  • What function should the page perform? Is it the presentation of a service, a product, a person or organization, a subject? Or does it offer special functions (Chat, Forum, Games, …)?
  • What content are available and how are they (priorized) structured? In this context, not only text content, but also media content are meant.
  • What specific target group should be addressed?
  • What information does a typical page visitor seek with you and with what expectation he can access the page (e.g. finding short-processed information or longer texts to make up)?
  • Again for the expectation of the user: How should a visual expectation of a potential visitor (the targeted target group) be excluded? To name examples: At a football club I expect the club colors or at least lawn green; in a cinema dark colors as if I was already in the cinema room, with a news page tending to be a multi-column layout.

As far as possible: The answers are interesting for you, not for me. They serve as a help to realize how the page can be arranged thematically / in its mood..

For example, a website that is supposed to appeal to medieval fans would typically have a completely different basic colour (e.g. purple, brown) as a website that has made it the task of awarding soy milk (e.g. white, light brown tones). For a portfolio page, a one pager is probably sufficient, while a website about flora and fauna can be divided into several subpages. A portfolio of a photographer or artist is more influenced by images than the portfolio of a editor.

It is also helpful to look at several websites that go in the same or similar direction, as they usually have the same applications.

In addition to the content structure (assessment and prioritization), I would start with the typography selection as well as the color set in terms of design. The font not only characterizes the external style of the page, but in general how quickly visitors can process the presented texts (lies here). Usually a consistent style (i.e. only one font with different fonts) is advisable, the color palette would also be reduced (a color for action elements, a text color, a background color and possibly 2-3 supporting colors for transitions, etc.). Adobe Color can help a little. It takes research and tests for both stylistic agents.

With regard to the layout, you should see how many columns you need maximum for a side grid (design grid) (the screenshot as a result could be enough a two-column grid, unless you have content that would place even more boxes next to each other) and how large the width of the central content container should be. Here on GF you have a horizontally centered container with a maximum width of 1024px. You could also make it narrower or wider or leave it completely. In addition, the keywords Fluid (for contentful pages) and Elastic Layout (for pages with a greater focus on media content, less text) can be inserted.

If you have only a few content, you should see how you can fill the space in a meaningful way. Although separators/frames, battens or rounded corners can play in, I would guess from a flat-rate distribution (as on the screenshot). Avoids deep, visible nesting. On the screenshot you have two rounded boxes in a rounded box, which in turn floats on the website. It would be better to remove the first or second plane.

With little ideas, less design interest or lack of time, I would recommend searching for finished HTML templates. Via search engine you can quickly find some websites that offer them. Another possibility would be CSS frameworks that already specify styles (e.g. Ant Design, Bootstrap, Flat Remix, grommet, Materialize, MUI, …).

If you want to work more into layout design, then 99designs a possible starting point.

CrieXY
11 months ago

With tailwindcss

LeBonyt
11 months ago

With Bootstrap.