How to develop a Sexy Templates like Smashing Magazine?

[Miracle_Web]

Hi! I’m now looking at Smashing Magazine. And their site is sexy as your first school love.

Here is a link to different pages, and they all use different templates: Guides — Smashing Magazine, Quality Printed Books on Front-End, Design, UX, Accessibility — Smashing Magazine, Events — Smashing Magazine

I want to become sexy, like Smashing Magazine. And there is my question, when you creating a page with different sections (blocks) within a page, how is better to develop that?

For example, items like this:

Or like this:

Just raw past HTML&CSS, or I should make a different components for each block? Something like React,js components does? (in Hugo I guess Shortcodes will become as components)

Can someone experienced, who already developed Hugo themes, give me advice, please? I’m developing my first theme for GoHugo, it’s my first time you know, you all has your first time, so please understand my situation and can someone advice or help me?

[Cloud-Forge]

Are you asking us how to become a web designer ?

[Cloud-Forge]

The best advice I can give you, is to try fiddling with Hugo.
Install a few themes and look under the hood to understand how they do things.

Maybe look at the Bootstrap ecosystem, than can alleviate some of the more UX demanding things.

Then look at the source code of the websites you enjoy, like the one you were talking about in your post.

Then you’ ll be able to make the designs that you want from those different sources of inspiration and techniques.

[Miracle_Web]

No no, I know, how to develop it with HTML&CSS. My question is, how to implement design pages like the above examples to Hugo.

I need to just insert raw HTML Code? Or for each section (block) I should develop partials (or shortcodes for Hugo).

I mean, is there any way to develop reusable components for blocks, like React.js components does? What is best practices to implement pages with elements, like on screenshots?

[Cloud-Forge]

Well, my advice still stand.

try fiddling with Hugo.
Install a few themes and look under the hood to understand how they do things

If you want to work with a new tool, you’ll have to do some reading and researching.

In Hugo, there are several ways to make templates. And to answer your question, yes you could copy / paste all the HTML at the right place and it would ultimately work.
But then using Hugo this way would defeat its purpose. But it’ll work.

Best advice I can give you is to install Hugo’s theme and to play with them to understand how the engine works and maybe do some reading on the instruction section.

[idarek]

They using static generator, hence using HTML, CSS and JavaScript skills and you are ready to go.

[tut]

In addition, learn some web/graphic design or hire someone with those capabilities.

[Miracle_Web]

@idarek @tut @Cloud-Forge Holy guys, thanks for the help. Again, I know how to develop it with HTML and CSS.

My question is how to make it reusable. Because I don’t want each time to copy past or edit raw html code. What is the best option to make them as reusable components? Should I create partials, or better shortcode? There is my question.

[idarek]

If that a “blocks” that you want to paste in the content of the website (markdown) then probably shortcode, in another case they are probably part of your layout, hence will be partial. You need to design your website and then you will see.

[Cloud-Forge]

for me shortcodes are more small functional items that help create content faster once you site is ready.

In your case, for the block you want to reuse, I’ll definitely use partials, like a services partial.

[Miracle_Web]

thank you for the help, good game well played gg wp gl hf!