— decisions, web-development, designs — 6 min read
Created on: 2020-03-19
I always liked designers and architects, very creative people. In web technology, man there are a lot of creative people with fantastic ideas and designs. For me, it sort of became a practise, whenever i see a new things like designs, css effects, color palette, way of ordering elements, UI designs, responsiveness, i take a screenshots, save the links and some times inspect the element how they did this, sometimes i even go to the extent of searching for it in youtube and watch the live coding and hear comments to learn their coding style. I have truly become a fan of lot of people subscribed to their newsletters/channels and read their articles whenever its out.
So when i decided to make a new version of my website, i am basically going to go though all the things i have collected overtime. From the look of it, i got to know, its going to be a lengthy and tedious process as i have collected too many things and got to know some of the links are not working anymore and sites have been upgraded, so sometimes, the reason why saved up that link is not there anymore. Feel like an idiot sometimes, as i should have taken a screenshot instead of saving up the link.
Here are some things i have collected between 2018 - 2020. Its just unorganized collection of things. For this, i used stash.bobbydreamer.com, a small note taking app i had built using javascript & firebase, this seriously served its purpose.
Amazing designs and images which responds to clicks would be great for a page background.
Source : css-doodle.com/
Some doodle links
Title | Image |
---|---|
Honeycomb | |
Flipping Arrows | |
Dance | |
Waves | |
DNA | |
Shapes | |
Doodle 1 | |
TimeTravel | |
Ripple | |
BorderStyles | |
Gradients |
If you are planning on having a websites with lot of categories like some documentation site, sidebars would be great.
Source : Bootstrap Sidebar, Demo
Note : Sidebar is for a personal webiste as it consumes space.
For reference datacamp
Other sidebar links,
ToC are great in documentation, step-by-step, How-to sites as people like to jump to specific sections. Below are some sites, that had good ToC
Title | Image |
---|---|
ToC Bootstrap | |
Scrollspy | - |
Sticky ToC |
Fonts are essential part of a website as that will be the content. It shouldn't be hard to read. Below are some sites, i have come across, where i liked the fonts.
Source : codesd, htmlstream.com/preview/front-v2.4.0/starter, readthedocs, CommonMark, Animated Texts,
1header h1 {2font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, serif;3font-weight: 900;4letter-spacing: -2px;5font-size: 34px;6color: #303030;7line-height: 1.2;8}
Small symbol here and there on the website are good to look at. Like in Front Starter, DTox - Hugo , Daring Fireball - Star logo. Each of the below websites gives you the CSS code to add in your website to setup . So many options,
1TrackJS in Action : Red & orange shades, timeline colors
1right-background:#5e42a6; left-background: #312450;
11. Dark green with white text (background:#122022)22. Website code for polygon33. Big font
mois-es - Horizontal Scrolling Pink & Red theme
1background:#ff4653; card=#9a223d; text=#f7dadf
Banking site
1background:#fdf0e5; big-text1=#2128bd; big-text2=#f44133;2background:#eefbff; big-text1=#2128bd;
1Big Texts 2Verital Scrolling text in the side 3Blue Color combination4background:#86d1cc; big-text1=#0d1c3e;
violetta - Violet Yellow theme
1background1:#471391; background2:#3f1483; text1:#fff300;2background1:#1c143b; background2:#221846; text1:#8d899d; text2:#ffffff
r4ms3s - Violet theme but like a game
1background1:#11132b; highlight-text1: #e76ece; text1=#4d3ba02background:#0c1120; text1:#4ff7b2; text2:#f8f8f8
Storage
Editor
Dynamic blogs would require, editor to edit content, below are the editors, i will have to check on,
Hugo
Gatsby
Themes by LekoArts - Simple and best
Gatsby Starter - Text elegant & like the wobble in page name from chronisp, Github
Resume - Gatsby Starter: Resume/CV Site with Prismic, Github
Bonneville - A Gatsby Starter Blog - Like the text underline technique, Github
GPL
1Blog Page colors from GPL2Color Scheme 13Background : #C1E5E74Content Text : #4B565D or #0009145Heading 1 : #E842616Heading 2 : #0F1D4A7Text highlight 1 : #00A5B38Text highlight 2 : #82CD789Text highlight 3 : #FDD56710
11Color Scheme 212For big square boxes on the page with white svg image with center box like login13Top Left color : #F3BC5B14Top Right color: #009CBA15Bottom Left : #8DB04C16Bottom Right : #E0667717Center box color : #113A5618Center box Text color : #EDF0F219Square box colors can be used for highlighting in center box20
21Color Scheme 322Background color 1 : #C1E5E723Quote Box or small box Color 1 : #EDF0F224Quote Box or small box color 2 : #FDF2E225Quote Box or small box color 3 : #031F4426Heading color 1 : #E7415C27Heading color 2 : #F9B122
Below sites focuss mainly on content, thats what i like
My site should have below menus,
Thanks to user Abby for the below icon sites
Here are the icon resources in no particular order, icons8, freepik, iconfinder, fontawesome, goodstuffnononsense, thenounproject, iconshock, pixeden, iconsflow, streamlinehq, dribbble, iconmonstr, deviantart, fontello, 1001freedownloads, cssauthor, graphicburger, flaticon
Source: WebSitePlanet Blog