“Hey Omar, we should create our own websites, some sort of professional portfolio ” — that’s what my friend told me a few months ago.
“Pfew, what for, man? It’s pointless” — that’s what I’ve responded, over-confident about my statement.
I was wrong.
Very recently, I realized that as I grow in my career, create more content, and sporadically speak at events, I need to keep all of those “assets” in one single place.
We took the decision to launch our professional portfolios. Seif is a software developer, and I am learning web design — it turned out to be a great opportunity to work together. 🤝
In this article, I will share with you the first steps on how I proceeded to create my own website.
This is not a guide, and you do not have to follow the steps below if you want to create your own website.
Buy the domain name
The moment we agreed to create the websites, I bought a domain name.
Luckily, I could find my last name and bought www.benseddik.com (don’t click, it’s not live yet).
I guess that’s the perk of not being named Smith or Müller. 😌
To all the 50+ family members who share my name, I am officially your self-proclaimed digital ambassador. ✌️
Select a website building tool or find a developer
Once I got the domain name, I had to think on the website creation.
Luckily, my friend Seif is a web developer, so I do not have to deal with tools such as Wix, Squarespace, or Wordpress 🙏.
The reason I say “luckily” is because, when you create a website from scratch, you have fewer restraints, you are free to create any type of design, you learn how to coordinate design and development, and can you have a stronger performance.
Structure your pages and content
I am done with the domain name and tech part. Now, let’s focus on the content of the website.
At first, I thought it would just be a digital CV, but then I realized that my goal was not to share my professional experience.
In fact, I do not even list the companies I worked for. LinkedIn serves that purpose.
The website will be more focused on the content I create, speeches I deliver and random things like press-release appearances, artwork, or re-tweets of my content.
The website’s structure is:
- Home Page: to access the below pages.
- Content: all the articles I publish on Medium or W261.
- Speeches: I only got one recorded 😢.
- CV: opens a PDF.
- About Me: more on meself 💉.
- Contact Me: Instagram, Snapchat, TikTok, … joking, e-mail only.
Think about the style
Awesome! I bought the domain name, selected the tech stack, and structured the content of the website.
Now it’s time to think of the image I want to display, and the style I will use. To get inspiration, I visited dozens of portfolios of designers and realized that most tend towards a certain extreme.
For instance, UX interns who try to get into corporations (Google, Facebook, Microsoft), tend to have the same portfolio layout and content.
On the other hand, we have the experienced and skilled designers who “don’t care”, and keep the style too loose, e.g. a picture of themselves and plain HTML.
To get the best of both, I aimed for balance.
My goal was to maintain a simple design, yet, keep the website visitor engaged and curious to know more.
Draw by hand
Progress, progress, progress! We have the domain name, we have decided on the tech stack, structured the content, and thought of which style to adopt.
Let’s get visual and draw what the website would look like.
I have drawn page by page, and it helped me get a better idea of how to place the multiple elements I want to showcase.
It’s time to convert those drawings to their digital form.
I used the free collaborative interface design tool Figma and created prototypes. An alternative is to use Sketch, but I have Windows. 🙃 💻
I created wireframes for each page, and it gave me a great perspective on how the website would look like.
As a noob in learning design, I started with only MacBook Pro and iPhone X frames, but plan to eventually create for more frames (e.g. tablet, phones with smaller sizes).
Design the pages
Once I was done with the wireframes, I started to fill the grey boxes with actual content and images.
It suddenly started to take shape, and it opened my eyes on what to modify.
Awesome, now you have an idea of what it looks like.
Design a personal symbol or logo
To create my own symbol (or logo), I used the free vector graphics editor Inkscape.
You can save your logo as .svg (useful when you create animations with it), and apply a transparent background (comes in handy when you have Dark/Light mode)(Ctrl+Shift+D).
The purpose of this symbol is twofold:
- Re-direct you to the homepage when you click on it.
- Insert as a signature in my drawings and content.
Get feedback from designers
This is my first experience designing a website.
I needed feedback from designers. Luckily, I know a couple of talented ones who gave me feedback, that I will be applying as I acquire the knowledge:
- Fix the margin, alignment, positioning, alignment, and spacing.
- Decide on states: hover, active, and disabled.
- Understand how grids work.
- Revisit the purpose of the logo.
- Prepare a clear handover to the developer.
Once I will be done with this, I will seek their knowledge again.
If you don’t know any designer, there’s a simple trick to engage in a chat with a few (or almost anyone in any discipline):
- Go to LinkedIn.
- Type “web designer”, “designer” or any other relevant keyword in the search bar.
- Find relevant profiles.
- Reach out to more than 40 (or as many as you can).
- You’ll get at least 3–4 who would be happy to help.
(I’ve done this when I needed help with SEO, it worked).
Humans can be very nice. 👀
That’s it? Nah, cool stuff to come
Did you expect a dull and static website from me? Nah. 🤚
Here are some cool features that will be there:
- Dark/Light mode: to make it stylish (like N26).
- Interactive logo: the logo will slightly change if you hover or click on it, this is an opportunity to learn more about CSS.
- Hand-drawn written sections: I am thinking of drawing all the menu sections (CV, About Me, Speeches).
- Parallax effect: as you scroll down from the home page, my head will turn and purple/red laser beams will go out of my eyes.
- Highlight on scroll: this is a cool feature I found out in another portfolio.
- Carousel: to show the press releases, re-tweets and other fun items.
This is a laboratory for me, and probably one of the best ways to learn web design. ⚗️
Did you learn anything new reading this? Then that’s a success for me. 🤙
This website will constantly change, therefore, will be considered an “unfinished project” throughout my life.