Flow 3 - HTML & CSS

Project description:

Create a website for a danish politician, presenting their political agenda.

Subject:

Dan Joergensen.

Goal:

Showcasing their political agenda, focusing on the website’s technical construction.

Construction Final Result

Made by Maria Breum



Intro



When I was introduced to the assignment, the first politician that came to mind was Dan Joergensen. However, I still visited the Danish Parliament's website to review the list of politicians. It quickly became clear to me that Dan Joergensen remained the most interesting figure for me and decided to move forward with him.
He is a politician I admire, and he advocates several important causes.

Since Dan Joergensen does not have an official personal website, but only a profile on the Parliament's website, I had more flexibility in terms of design, as there was no established website for direct inspiration.
I sourced content from his Facebook page, where he frequently posts about his political priorities and ongoing activities.
Additionally, I gathered key information from his official profile on the Parliament's website and found a suitable headshot of him on Google, which aligned with the overall aesthetic I envisioned for the site’s design.



Project requirements



Methodological Requirements:


Requirements for the Visual Design:


Requirements for the Code:


Requirements for the Content:



Breakdown Structures



I had limited time to complete the task, and I did not feel particularly confident with Visual Studio Code or coding in general. However, I accepted the challenge and, after selecting my politician, I proceeded to identify the key elements I wanted to include on the website.

Next, I began sketching ideas on paper to determine how the website's structure should be organized, following the "Mobile First" principle. I opted for a grid layout, as we were encouraged to use this structure. You can see my sketches by pressing the construction button at the top or by clicking here.

I wanted to create a simple website that felt sophisticated, masculine, professional and give it somewhat of a modern look, while still incorporating the color of his party, Social Demokratiet, which is red.



As I had limited time and limited skills in coding a website, I did decided on a simple grid layout and very simple page structure.
About a couple of breakdowns later, I created a design that I felt comfortable with and a design I thought was fitting to Dan Joergensen.



Colors



IIn my choice of colors, I opted to keep the palette simple. I selected two primary colors, one secondary color, and one accent color.

I knew I wanted the overall look of the website to convey sophistication and modernity, with black as the dominant primary color. I designed the background using a linear gradient, where the black seamlessly fades into a red hue, which naturally represents Social Demokratiet(The Social Democracy).
Black has, in recent years, become a symbol of sophistication, elegance, and modernity. It exudes confidence and is often perceived as a powerful color associated with authority and action. In contrast, the white text works well against the black background, providing clarity and readability.

The red color clearly symbolizes his political party – red is attention-grabbing, stimulating, and hard to ignore. The combination of red and black creates a bold, dynamic visual impact.

The gold accent was chosen primarily for its aesthetic harmony with both black and red. Furthermore, gold signifies success, representing significant achievements and goals. It is often sought after, as it is awarded to the winners in competitions and symbolizes accomplishment and recognition. The color is used on the website as a en effect, whenever you hover over different links as well as the footer



Primary Colors:

Secondary Color

Accent Color



Website anatomy



As the website is made very simple, it is user-friendly and easy to navigate through.

It consists of the front page, which is an introduction of Dan Joergensen as well as a quote of his and a headshot.
Then you have the navigation-bar at the top, where you can go to the different subpages. Here, you have the choice to go to to his Main priorities, his CV-page and lastly his contact page. Each subpage includes the most essential information.



Conclusion



While this might not have been my best work, it was still a challenge I was willing to take. I didn't meet all of the requirements, however I did end up with an initial website that I liked and felt fitting for my chosen politician. I also got face to face with coding at was forced to really dive deep into that world. I might have belly-flopped at first, but I did get to learn the beginning of my coding journey.

I also learned the value of accepting the fact that you can't be good at everything and that's okay as long as try your best.