The Mindful Muslim is designed as a motivational platform where the goal is to encourage people to be more mindful of their physical and spiritual health. Today most people feel that they cannot find time to get healthier, so I wanted to create a space where you can find simple and easy ways on how you can adapt different habits into your life.
I have created a joyful straight-to-the point platform that is designed with a simplistic design, bright uplifting colors and with infographic images that gives the visitor a clear picture of what you will find. The website will provide useful tips, links to social media platforms that reflects the content of this website along with quotes from the Quran and Sunnah (sayings of the Prophet Muhammad, Peace and Blessings be upon him).

The target audience for The Mindful Muslim:

• People who are interested in health and spirituality.
• People who are interested in mindfulness.
• People who are interested in mindful parenting.
• People who wants to increase in religious knowledge.

User goals are:

1. Learn about sunnah inspired health habits.
2. Become a more mindful parent.
3. Learn about islamic family values.
4. Become more aware and connected.
5. Be able to sign up to get more inspiration and information.

The Mindful Muslim will fill these needs by:

• Providing the user with images (infographics) on home page that clarifies what yo will find on the website.
• The images on homepage has a hover effect to highlight that it will link you to more information about the topic.
• Providing a simple header with navigation bar that is straight forward.
• Providing informative and inspirational quotes from Quran and Sunnah in Inspiration page.
• Social media links in footer that will provide the user with more information and inspiration of these particular topics.
• Social media links to different platforms that will provide the user with reminders too choose from their liking.
• Sign Up page that encourages the user to visit these social media links.
• Easy to find Sign Up form to get more reminders and inspiration about the topics weekly.

The Business goals of The Mindful Muslim are:

• Gain subscribers via the sign up page.
• Present a good and clear design to gain interest.
• Get connected via the sign up page.

User Stories

• As a user interested in islam, I expect to get accurate information with references where the information is collected.
• As a user interested in mindfulness, I expect to get simple and useful tips that I can easily adapt into my life.
• As a user interested in mindfulness and spirituality, I want to have different opportunities to gain knowledge and reminders that I can implement into my life daily, weekly or monthly.
• As a user interested in health, I expect to get useful tips that I can easily adapt into my life both in movement, foods and mentally.

I choosed the fonts for this webdesign via the fontpair website. I chose these particular fonts because I wanted a elegant and clean look to the fonts that complemented the more playful colours in a good way.

To create the playful yet empowering design I wanted, I looked up the emotional effects of colors. I chose the orange colors for the creative, playful and uplifting effects, white for inspiring and fresh look and charcoal for a elegant and empowering effect to the text.

I wanted the images on this website to be simple, informative and straight forward. Therefore I cose these infographics provided by Sunnah Infographics, both to highlight their beautiful work and to encourage the user to visit their platform to gain even more knowledge about the topics provided in The Mindful Muslim.

The icons are taken from the Font Awesome website.
These are found in the footer for social media links.

The navigation bar is located at the top of every page, making it easier for the user to navigate back and forth trough the pages. I got inspired by this particular tutorial for the design of this navigation bar, I liked the simple clean design and hover effects but made my own design for this particular website. I've styled it so that the active page is highlighted, so that the user easily can see which page they're currently at.

The footer is located at the bottom of every page, with links to different social media platforms. I've used a simple design and a fun hover effect so that the user may get interested in visiting the social media links provided.

The landing page starts with a simple introduction about the page along with a inspiring quote to get the users attention, I've also linked to a specific podcast episode here, where they mention this quote. The same podcast can be found in the footer aswell. The link becomes a light yellow tone when hovered over.
Directly after this I've placed three linked images that highlights when hovered over so that the user understands that you can klick it. The images is linked to the Inspiration page where you can learn and read more about these three specific topics presented in the landing page.

The Inspiration page is presented with the images along with articles about these topics. The articles include quotes from the Quran and Sunnah, inspiration and tips on how to include different habits into your daily life.

The Sing Up page will allow the user to subscribe for a weekly newsletter. The user will have to enter their name and email adress to sign up but can also decide to put in their country of residence. When klicking the Subscribe button they will recieve a simple note in another tab to confirm the subscription.

• To have a section in the landing page with a weekly reminder like a quote or new healthy habit, that is a part of the weekly newsletter.
• To have a additional opaque box on top of every image in landing page that says "Read more" to make it even more obvious that you can klick the images and find more information thereby. Or add a similar hover effect as in this tutorial.
• The ability to share images along with article directly to social media.

• HTML: Page markup.
• CSS: Styling.

• Google Fonts: Font styles.
• Font Awesome: Used for icons.

• GitHub: Storing code remotly and deployment.
• Gitpod: IDE for project development.

• Favicon Generator: Favicon.
• Tiny png: Compression of images.
• Convertio: Converting images.
• Coloors: Creating color palette.
• Am I Responsive: For responsive design images.
• Marvelapp: For wireframes.

The design of The Mindful Muslim should be responsive so that when looked at in mobile phones the images should be stacked over each other in Home-page and stacked on top of paragraph in Inspiration-page so that the user can see the images better. The font size in the Inspiration-page also increases on larger devices so that the user can read the text better. I've tested all pages both for desktop and mobile via the Lighthouse tool and got these results:

• I have tested my code troughout the buildup with the inspect tool to see what impact the code made.
• I have firstly tested if the code works with mobile devices and then checked the outcome on larger devices.
• I have used my own mobile phone to check if the website works as it is intended.
• I have used not only the preview but also the deployed website to check if everything works and looks as intended.

1. HTML has been validated in the W3C HTML5 Validator
2. CSS has been validated in the W3C CSS Validator
3. Links has been checked in the W3C Link Checker
4. I've used the W3Schools tutorials and references troughout my project if there was anything that I got stuck on or needed to be reminded of a certain element or tag.

• The images in homepage would not align as intended in smaller devices. Fixed by changing width on div.
• The border color around the text input when focused did not work. Fixed it by stating outline: none;
• Did not get the navigation bar in header to center (i wrote every css style in same ID a: style). Fixed it by targeting only the ID of nav bar.
• When changing the order of my media queries to structure the css, some rules got overruled by the other and messed up my responsive design. Fixed it by changing the order since css reads from bottom up.

• The footer is not sticking to the bottom of Sign Up-page when screen lagrer than 1450px due to lack of time and knowledge at this point in time.

• This site was deployed to GitHub pages. The steps to deploy are as follows.
  • In the GitHub reporitory, navigate to Settings
  • Scroll down and navigate to Pages
  • From the Source section drop-down menu, select te Master Branch
  • Once the Master Branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
  • It might take a minute or so before getting the deployed link.

The live link can be found here: https://mristimaki.github.io/themindfulmuslim/

It is possible to clone this repositry, to be able to work alongside me for this project it is required to have a free GitHub account and then go trough the steps as follows.

1. Log in to your GitHub account and navigate to: https://github.com/mristimaki/themindfulmuslim
2. In the GitHub repository, navigate to Code and copy the HTTPS link.
3. Write git clone in terminal, paste the link and press enter.
4. Now you should have everything you need to work on the project.
5. Happy coding!

• All of the images used is taken from Sunnah Infographics that creates and shares authentic islamic reminders about islam, balance and wellness.
• I chose SoulFood FM as the podcast linked in the social media section since they provide a podcast about spiritual refinement and their episodes are of the shorter kind, therefore it's easier to get these small reminders in to our already busy life.
• I linked the Yaqeen Institutes episodes of "Keys to Prophetic parenting" in the social media section since they provide authentic islamic reminders and lectures. I chose the particular episodes about parenting since it is one of the topics in this website and the one that I'm the most passionate about.

• The information in Inspiration page is taken from:
  • Sunnah Infographics
  • Sunnah.com
  • Healthline
  • Muslim.sg

• Email [email protected]
• Skype Maryam Rutqvist Ristimaki

I've chosen not to include any contact information within the webpage since this is not a real website yet but if it would be in the future I would put this along with the Sign Up page as well as in the footer with social media links.

I also want to give thanks to my mentor Rory Patric Sheridan that has been guiding me troughout this project.