Portfolio Site Critique & Elements Brief
Deliverable 2 – Elements Project
Due – week 13
- 2019 international year of the periodic table
- Understanding the periodic table – groups and columns
Design and create a digital product to explain elements from the periodic table.
The periodic table as we know, is a table of chemical elements arranged in order of atomic number, so that elements with similar atomic structure appear in vertical columns
The content is scientific to be used by those in the science profession. Nevertheless, what about children or undergraduate students. Is the content aiding or confusing their understanding of the periodic table elements?
Using IxD is it possible to enhance learning through better thoughtful design by considering the content, micro/macro level interaction or even gamification
This project will ask you to look at the content of the periodic table from the micro packets of information in each cell on the periodic table to the wider range of content when looking at the details of each element
- A branded homepage containing your version of the periodic table
- At least five additional element pages aimed at the 10-year-old audience and below OR
- At least five additional element pages aimed at undergraduate chemistry students
- A style guide/visual grammar and brand to accompany design
- The delivery platform for this project is a Prototype Tool (Adobe XD, Invision, Figma)
- Design first
- Start on paper
- Final product Adobe XD/Figma/Invision
- Also consider the visual grammar, name, brand, icons
A typical UX Workflow
Same workflow from designing/building your portfolio site
Discover – plan – text design – sketch – visual design – prototype/build – test – discuss – deliver but keep refining
- Discovery date
- Discovered by
- Managing disparate range of content
- Organising content into logical structure
- Presenting content coherently
- Target content to specific audiences
Taxonomy the practice and science of classification of things or concepts, including the principles that underlie such classification. It’s important, before you begin, to organise your content. It can be written in a spreadsheet, paper or post-it notes. This is gold-dust for Exploration and Research and Development on your blog.
Task to be Completed
- Organise Periodic table data
- Begin to consider the paper prototypes, sketches, and wireframes
- Visit the elements project
Portfolio to date (published website screenshots)
case study homepage
space buddy study case study
big dog’s pizzeria case study
Portfolio Site Tutor Critique
- Nice home page shot. The container needs a width set to remain the same size.
- Bit of a gap following ‘Get to know me’. Centre the top bio image there, or make it align with the body paragraph.
- Case study body copy is a little small: show the screens first or pull them up through the text.
- In footer: could have email address.
- Use hover-over colour changes in the links.
- Use dark blue colour in circles for your footer colour.
- In your gold button on front page, change that to black.
Portfolio Site Peer Critique
I found this critique session to be very useful as we are coming into the end of portfolio site sessions. This critique gave me insight into some final things to consider and fix in my site. I plan to take on this feedback and use it to better my site. I found a lot of my small fix ups came from small detail issues, like placement, gapping and aligning issues etc. Small thing I need to pay attention too that once fixed will make better improvement to my site.
Organise raw text in file by seeking relationships within the content and organise the content in a spreadsheet.
- try and understand the relationship between your pieces of content. Take the content, understand it. What atomic number? What symbol of element? Try and organise this into a spreadsheet.
The following content has been supplied as raw text. Your task, as a designer, is to seek relationships within the content and organise the different types of content in a spreadsheet. Extra credit for those who identify which sequence these elements are from.
H Hydrogen 1 Diatomic Nonmetal 1 s 1.008 1766 He Helium 2 Noble Gas 18 s 4.002602 1868 Li Lithium 3 Alkali Metal 1 s 6.94 1817 B Boron 5 Metalloid 13 p 10.81 1808 O Oxygen 8 Diatomic Nonmetal 16 p 15.999 1772 Al Aluminium 13 Post-Transition Metal 13 p 26.9815385 1787 Sc Scandium 21 Transition Metal 3 d 44.955908 1871 Se Selenium 34 Polyatomic Nonmetal 16 p 78.971 1817 Cs Caesium 55 Alkali Metal 1 s 132.905452 1860 Ac Actinium 89 Actinide N/A f 227 1902
H Hydrogen 1 Diatomic Nonmetal 1 s 1.008 1766
He Helium 2 Noble Gas 18 s 4.002602 1868
Li Lithium 3 Alkali Metal 1 s 6.94 1817
B Boron 5 Metalloid 13 p 10.81 1808
O Oxygen 8 Diatomic Nonmetal 16 p 15.999 1772
Al Aluminium 13 Post-Transition Metal 13 p 26.9815385 1787
Sc Scandium 21 Transition Metal 3 d 44.955908 1871
Se Selenium 34 Polyatomic Nonmetal 16 p 78.971 1817
Cs Caesium 55 Alkali Metal 1 s 132.905452 1860
Ac Actinium 89 Actinide N/A f 227 1902
Formula – symbol, name, atomic number, group, electron configuration, relative atomic mass, discovery year
To add on in spreadsheet – Discovery name, state, colour
Paper Prototype a design for your periodic table
- sketching out your idea. Consider brand, colour, and visual grammar BUT this all depends on the stage of sketching, navigating toward finding the look. Think outside the box. Your paper prototype can be quite different.
Visit the Elements Project Ulster Museum
I couldn’t go to the Ulster Museum due to not being able to travel there because of health reasons, I decided to look at some online visuals of the exhibit and also look at some visual research from a book I found usual for informative research.
below is the book cover and some graphics I found interesting. I then went and looked at the 5 elements I thought I could be looking into. I found all the visuals to ve very graphic and to stand out. The visuals are also very informative in relation to each element. I really like the colour style used throughout, a style I think I could use for showcasing the actual element symbols.